1.css3 animation
css3新增的animation可以方便的编写实用且高效的页面动画效果
单纯的css规则就可以实现一个简单的小球下落效果
2.css transition
css3的transition提供页面变化后的过渡动画效果
使用js或者:hover等伪类改变元素的样式之后,transition会为元素的样式改变添加上过渡效果,取代默认的瞬移效果
3.js requestAnimationFrame
单纯使用css也有它的局限性,比较难以高效的编写出复杂的动态效果,比如为小球下落添加上回弹效果。
然后就是单纯使用js编写动画,通常是使用定时器与requestAnimationFrame来定时改变dom结构展现出动画效果。相较于初始的定时器动画,requestAnimationFrame是专门为实现高性能的帧动画而设计的一个API,与定时器相比有两个主要优势:
1. requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
2. 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout,不同的是requestAnimationFrame不是自己指定回调函数运行的时间,而是跟着浏览器内建的刷新频率来执行回调,这当然就能达到浏览器所能实现动画的最佳效果了。
这个小球的回弹效果使用了tween.js来实现。
4.js setInterval setTimeout
setInterval与setTimeout是js的定时器,setInterval会每隔一个给定的时间段执行特定的代码,而setTimeout会在给定的时间间隔之后执行特定代码。
使用setInterval执行dom操作刷新页面就能实现各种动画效果,在效率上会略低与以上三种方式