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 //延迟多久执行
}
});
可以去这里看看最终运行的效果。
使用开发者工具查看可以看到实际的动画效果就是通过改变元素的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()绑定就可以用按钮来控制动画的运行和暂停了。
使用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
anime.js 简单入门教程的更多相关文章
- JS简单入门教程
JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
- GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
- sea.js简单使用教程
sea.js简单使用教程 下载sea.js, 并引入 官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目 ...
- Flyway 简单入门教程
原文地址:Flyway 简单入门教程 博客地址:http://www.extlight.com 一.前言 Flyway 是一款开源的数据库版本管理工具,它更倾向于规约优于配置的方式.Flyway 可以 ...
- NumPy简单入门教程
# NumPy简单入门教程 NumPy是Python中的一个运算速度非常快的一个数学库,它非常重视数组.它允许你在Python中进行向量和矩阵计算,并且由于许多底层函数实际上是用C编写的,因此你可以体 ...
- [转]Backbone.js简单入门范例
本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...
- React JS快速入门教程
翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...
随机推荐
- python学习日记(包——package)
简述——包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 注意: 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都 ...
- BZOJ 2302: [HAOI2011]Problem c(数学+DP)
题面: bzoj_2302 题解: 令\(dp[i][j]\)表示编号 \(\leq i\)的人有j个的方案数: \(cnt[i]\)表示编号指定为\(i\)的人数,\(sum[i]\)表示编号可以\ ...
- 数位DP::SoSDP
数位DP:: SoSDP 学习博客(待补) 下面做一些例题: SPECIAL PAIRS 题意 给n个数字,求这些数字有多少对的\(AND\) 结果是0.数字不大于1e6.顺序反相反视为不同的对. 思 ...
- jdbc 连接各种数据库 CRUD
一,jdbc简介 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范(接口),称之为JDBC.这套接口由数据库厂商去实现,这样,开发人员只需要学习jdbc接口,并通过jdbc加 ...
- 如何优雅地用Redis实现分布式锁?
转: 如何优雅地用Redis实现分布式锁? BaiduSpring 01-2500:01 什么是分布式锁 在学习Java多线程编程的时候,锁是一个很重要也很基础的概念,锁可以看成是多线程情况下访问 ...
- 【Mac上的PotPlayer视频播放器】Movist Pro for Mac 2.1.2
[简介] Movist 是Mac上最好用的视频播放器之一,功能齐全,类似Windows上的PotPlayer,今天和大家分享最新的 2.1.2 中文版本,Movist 支持几乎所有常见的视频格式,包括 ...
- IDEA的Tomcat的几个坑。
IDEA乱码的解决. Tomcat配置完成后打开IDEA可能会出现控制台乱码,如下. 解决方法如下: 首先设置Tomcat在配置项VM options文本框中输入-Dfile.encoding=UTF ...
- 2017-12-20python全栈9期第五天第二节之可变 数据类型和不可变数据类型
- Linux下nc命令的使用
nc命令的作用 实现任意TCP/UDP端口的侦听,nc可以作为server以TCP或UDP方式侦听指定端口 端口的扫描,nc可以作为client发起TCP或UDP连接 机器之间传输文件 机器之间网络测 ...
- 重装了Devexpress后项目报Dll引用找不到问题解决办法
最近将我的开发环境从VS2015升级到VS2017,升级完后报如下错误,找不到Dev的引用,明明是重新装了dev为什么找不到呢? 经过查看dll引用地址,发现我的dev一开始是安装在C盘,dll引用路 ...