anime.js 简单入门教程

anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全。

下面就来看看如何使用anime.js来编写动画效果。

先在github下载好anime.js,然后在页面引入它。

弹球效果

引入anime.js后,就可以开始来编写动画效果。

首先来编写一个弹球的动画效果,先来使用anime.js提供的方法来编写好基本的结构:

var bouncingBall = anime({

  //code here

});

然后在里面使用anime.js提供的对应的方法来实现动画效果,比如要操纵的dom元素,动画的时间以及缓动曲线等等。

var bouncingBall = anime({
  targets: ‘.ball‘,
  translateY: ‘50vh‘,
  duration: 300,
  loop: true,
  direction: ‘alternate‘,
  easing: ‘easeInCubic‘
});

下面来一一解释下各个属性的含义。

targets属性是用来指定要运动的元素,可以使用类似CSS选择器来选择元素,或者是下面几种方法来选择元素:

DOM选择方法document.querySelector(‘.ball‘)或者是document.querySelectorAll(‘.ball‘)方法;

js数组的方式[‘.ball‘]

js对象的方式{elementName: ‘ball‘}

如果你要操作的元素有多个值或者是要操作多个元素,可以这样做:

var bouncingBall = anime({
  targets: [‘.ball‘, ‘.kick‘],
  //rest of the code
});

在上面代码中,第二个属性是translateY,也就是要操作元素做出变化的属性,和CSS中操作元素的方法非常相似。作为一个经常和动画打交道的前端开发人员,对于使用transform属性来提高动画的性能想必是非常清楚的,同样在使用animejs来编写动画效果的时候,特别涉及操作元素位置的时候也建议使用transform等属性来操作来提高动画性能。

第三个属性是duration,即动画的运行时间。如果要延迟执行动画,可以使用delay这个参数来指定动画延迟时间。

loop属性是用来定义动画是否循环运行。默认值是false,即动画只运行一次。当然也可以指定具体的数字来定义动画运行的次数或者是定义为true一只无限循环运行下次。

direction属性定义是否应该轮流反向播放动画。有三个值default、alternate和reverse。alternate表示动画应该轮流反向播放。reverse表示反方向运行。

最后一个属性是easing,它是用来定义动画运行速度曲线的,与CSS3中的动画曲线一样。

可以使用下面的方法来看看anime中有哪些速度曲线:

console.log(anime.easings);

现在再来完善下弹球的动画效果。

在上面的代码中,实现的效果只是球的上下弹起的效果。在真实世界中,当一个球掉在地上的时候,球会受到自身的压力从而产生一个变形的效果,可以使用transform中的scaleX来达到这个动画效果。

下面是具体代码:

var bouncingBall = anime({
  targets: ‘.ball‘,
  translateY: ‘50vh‘,
  duration: 300,
  loop: true,
  direction: ‘alternate‘,
  easing: ‘easeInCubic‘,
  //new code
  scaleX: {
    value: 1.05,  //代表缩放的值
    duration: 150,  // 运行时间
    delay: 268   //延迟多久执行
  }
});

可以去这里看看最终运行的效果。

demo

使用开发者工具查看可以看到实际的动画效果就是通过改变元素的CSS属性来实现的。

同时操作两个元素来编写动画效果

下面通过一个踢球的动画效果,来看看anime.js是如何来操作两个元素来实现动画效果的。

var kickBall = anime({
  targets: ‘.kick‘,
  scale: 1.2,
  duration: 300,
  easing: ‘easeInCubic‘,
  complete: function() {
    anime({
      targets: ‘.ball‘,
      translateX: ‘70vw‘,
      scale: 1.5,
      easing: ‘easeOutBounce‘,
      delay: 150
    });
  }
});

可以看到当踢完球的动作后,球才动起来。这里用的是complete这个回调方法,当上一个动画完成后再执行下一个动画。

当然像这样动画效果使用CSS实现起来也是非常简单的,CSS版本

动画控制

anime.js还提供了诸如play、pause和restart方法来控制动画的执行、暂停和重新运行动画。也可以使用seek()方法来跳帧运行动画。

下面通过按钮分别来控制踢球和球运动的动画效果。

//Animating the kick
var kickBall = anime({
  targets: ‘.kick‘,
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: ‘easeInCubic‘,
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: ‘.ball‘,
  translateX: ‘70vw‘,
  scale: 1.5,
  easing: ‘easeOutBounce‘,
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation
when clicking the play button */
btnPlay.addEventListener(‘click‘, function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

这里有两点需要注意的是:

为来在页面加载完的时候,不运行动画,需要设置autoplay的值为false;

只需要把对应的动画方法和play()绑定就可以用按钮来控制动画的运行和暂停了。

demo

使用anime.js来操作SVG

最后来看看使用anime.js来操作SVG。

在开始之前,把每一个SVG中的path元素都赋予一个CSS类,这样方便使用animejs来操作。

比如,要实现一个眼睛的动画效果:

var movingEyes = anime({
  targets: [‘.inner-left-eye‘, ‘.inner-right-eye‘],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代码通过来改变circle元素cy属性的值来使猫的眼睛动起来。

在上面的代码中的delay这个属性,是使用一个函数来返回值的,这样可以更灵活的控制动画的延迟时间。通过元素的索引值来返回不同的延迟的时间。如果元素的索引值是0即左边的眼睛的延迟时间是300毫秒,如果是2即右边的眼睛延迟500毫秒来运行动画。

上面通过两个简单的实例介绍了anime.js的一个使用方法,更多的使用方法就要靠你的想象力了。

更多的实例可以去这个集合看看。

在Codrops上也有好多精彩的实例:

Codrops.net demo: Inspiration for Letter Effects

Codrops.net Demo: Background Segment Effect

Codrops.net Demo: Fancy SVG Letter Animation

Codrops.net Demo: Multi-Layout Slideshow

Codrops.net Demo: Item Reveal Animations with SVG

本文主要是结合Animating the DOM with Anime.js这篇文章写成,有疏漏或者理解不到位的地方,还请多多指教!

原文地址:https://juejin.im/entry/58e9e48d61ff4b006b513f51

原文地址:https://www.cnblogs.com/joyco773/p/10734850.html

时间: 2024-10-04 17:04:16

anime.js 简单入门教程的相关文章

JS简单入门教程

JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script type="text/javascript"> var a = 10; var b = 11; if (a < b) { document.write("hello man") } else { document.write("hello world&q

程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注头条号.每日更新.也可以添加小编微信:fullstackCourse.一起交流,获取最新全栈教程信息.因为FQ原因,不能下载客户端的同仁,可以关注后回复“GitHub客户端”获取安装软件. 上篇教程:GitHub这么火,程序员你不学学吗? 超简单入门教程 干货 GitHub概念部分出现了一丝纰漏.为

iBatis简单入门教程

iBatis 简介: iBatis 是apache 的一个开源项目,一个O/R Mapping 解决方案,iBatis 最大的特点就是小巧,上手很快.如果不需要太多复杂的功能,iBatis 是能够满足你的要求又足够灵活的最简单的解决方案,现在的iBatis 已经改名为Mybatis 了. 官网为:http://www.mybatis.org/ 搭建iBatis 开发环境: 1 .导入相关的jar 包,ibatis-2.3.0.677.jar .mysql-connector-java-5.1.6

Swift简单入门教程:30分钟玩转Swift

通常来说,编程语言教程中的第一个程序应该在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现:    println("hello, world") 如果你写过 C 或者 Objective-C 代码,那你应该很熟悉这种形式——在 Swift 中,这行代码就是一个完整的程序.你不需要为了输入输出或者字符串处理导入一个单独的库.全局作用域中的代码会被自动当做程序的入口点,所以你也不需要main函数.你同样不需要在每个语句结尾写上分号. 这个教程会通过一系列编程

GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】

本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式的版本控制库.通过使用git,可以方便的记录代码版本. 因国内外大量著名的项目,都开始搬迁到github.它又可以称为开源代码社区. github还是学习的好地方,学习优秀的代码. 可对其他项目中有bug的地方进行改进提交,集合众人的力量促进软件的优化改善. github何其火热,截至2015年2月

sea.js简单使用教程

sea.js简单使用教程 下载sea.js, 并引入 官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目: js/libs/sea.js 创建项目结构 |-js |-libs   |-sea.js |-modules   |-module1.js   |-module2.js   |-module3.js   |-module4.js   |-main.js|-index.html 定义sea.js的

NumPy简单入门教程

# NumPy简单入门教程 NumPy是Python中的一个运算速度非常快的一个数学库,它非常重视数组.它允许你在Python中进行向量和矩阵计算,并且由于许多底层函数实际上是用C编写的,因此你可以体验在原生Python中永远无法体验到的速度. NumPy绝对是科学Python成功的关键之一,如果你想要进入Python中的数据科学和/或机器学习,你就要必须学习它.在我看来,NumPy的API设计得很好,所以我们要开始使用它并不困难. 这是一系列关于科学Python的文章中的第二篇,别忘了看看其他

React JS快速入门教程

翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.net/adousen 推荐阅读 React|RakNet 博客:http://blog.csdn.net/rsspub/article/category/1435601 在入门教程里,我们会创建一个简单却实用的评论盒子来作为我们的例子,你可以把它放进一个博客什么的.它实际上就是Disqus.LiveFyre.

1. 最基本的爬虫~爬虫简单入门教程

一.什么是网络爬虫? 信息时代,每天我们都在上网,每天我们都在浏览器上访问网站,我们打开一个网页,接着又跳转到另一个网页,看到喜欢的内容,或者是一段幽默的句子,或者是一张美女的图片,我们会选择将其保存下来,当数量很多的时候,我们就会选择用程序来实现这样一个过程,实现自动浏览网页,自动根据我们的要求,保存我们想要的数据.于是,爬虫就应运而生了.所以,简单来说,爬虫就是实现网页自动浏览,数据自动保存,根据我们的需要进行自动化浏览器的操作或者自动化测试的这样一种程序.至于为啥要叫爬虫,因为互联网是一张