Open TongtongGitHub opened 7 years ago
最早的JS动画通过使用 setTimeout( ) 或者 setInterval( ) 方法设置一个时间，来不断刷新帧。这样做的主要问题是可能不够流畅，比较占用系统资源。因为需要不断获取和修改Dom的布局，所以导致了大量页面重排。
目前使用 requestAnimationFrame( ) 方法，让浏览器决定最优帧速率，选择绘制下一帧的最佳时机。requestAnimationFrame 类似于 setTimeout， 但是无需设定时间间隔。此定时器为 HTML5 中的新标准，其间隔时间不由用户控制，而是由显示器的刷新频率决定。（市面上的显示器刷新频率为每秒刷新60次）
var requestId = requestAnimationFrame(func); cancelAnimationFrame(requestId);
使用它来实现动画与 setTimeout 类似，需要每次每帧结束时再次调用。不可设置时间间隔（系统决定），时间间隔一般为16.67毫秒一帧。
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。 总的来说，requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API。
目前比较好的JS动画库是 tween.js 配合 requestAnimationFrame，通过不断update dom元素的属性值来实现动画。具有非常强大的缓动效果。动画效果类似CSS3的动画，但更加强大，当CSS3动画无法满足一些需求时，推荐使用这个库实现动画。
CSS3实现补间动画主要通过属性值的转换，实现方式主要有transition 和 animation （keyframe）。
transition 包含4种属性：transition-delay transition-duration transition-property transition-timing-function，对应动画的4种属性： 延迟、持续时间、对应css属性和缓动函数，
transform 包含7种属性：animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state，它们可以定义动画名称，持续时间，缓动函数，动画延迟，动画方向，重复次数，填充模式。
总的来书，css 动画相比与JS更轻量，性能更好，更易于实现，同时也不必担心缺乏标准和增加带宽消耗的问题。 缺点是不能动态的修改或定义动画内容，不同的动画无法实现同步，多个动画彼此无法堆叠。
SVG本身有类似CSS3的动画体系，优点是很强大的，能够实现路径动画，但是浏览器支持性不好，复杂度高。Snap.svg.js 是一个比较流行的svg库，能够实现svg图形的创建，Dom操作和动画实现。
1) 矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何 2) SVG对动画的支持较好，其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画 3) Javascript可以完全控制SVG Dom 元素
1) DOM比正常的图形慢，而且如果其结点多而杂，就更慢。 2) SVG 画点报表什么的，还行；在网页游戏前，就束手无策了；当然可以结合 Canvas + SVG实现。 3) 不能动态的修改动画内容 4) 不能与HTML内容集成 5) 整个SVG作为一个动画 6) 浏览器兼容性问题，IE8-以及Android 2.3默认浏览器是不支持SVG
1) canvas适合图像密集型的动画 2) 页面渲染性能受图形复杂度影响小 3) canvas可以在更底层操作
1) 整个就是一张图，无论你往上画什么东西——没有DOM 结点可供操作 2) 没有实现动画的API，你必须依靠定时器和其他事件来更新Canvas 3) 对文本的渲染支持是比较差 4) 对交互要求高的（比如TIBCO的很多产品）的界面，不建议使用Canvas
Good!
TongtongGitHub
commented
7 years ago TongtongGitHub
commented
7 years ago
网页动画的主要实现方式：
JS动画
最早的JS动画通过使用 setTimeout( ) 或者 setInterval( ) 方法设置一个时间，来不断刷新帧。这样做的主要问题是可能不够流畅，比较占用系统资源。因为需要不断获取和修改Dom的布局，所以导致了大量页面重排。
目前使用 requestAnimationFrame( ) 方法，让浏览器决定最优帧速率，选择绘制下一帧的最佳时机。requestAnimationFrame 类似于 setTimeout， 但是无需设定时间间隔。此定时器为 HTML5 中的新标准，其间隔时间不由用户控制，而是由显示器的刷新频率决定。（市面上的显示器刷新频率为每秒刷新60次）
var requestId = requestAnimationFrame(func); cancelAnimationFrame(requestId);
使用它来实现动画与 setTimeout 类似，需要每次每帧结束时再次调用。不可设置时间间隔（系统决定），时间间隔一般为16.67毫秒一帧。
优势
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。 总的来说，requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API。
目前比较好的JS动画库是 tween.js 配合 requestAnimationFrame，通过不断update dom元素的属性值来实现动画。具有非常强大的缓动效果。动画效果类似CSS3的动画，但更加强大，当CSS3动画无法满足一些需求时，推荐使用这个库实现动画。
CSS3动画
CSS3实现补间动画主要通过属性值的转换，实现方式主要有transition 和 animation （keyframe）。
transition 包含4种属性：transition-delay transition-duration transition-property transition-timing-function，对应动画的4种属性： 延迟、持续时间、对应css属性和缓动函数，
transform 包含7种属性：animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state，它们可以定义动画名称，持续时间，缓动函数，动画延迟，动画方向，重复次数，填充模式。
总的来书，css 动画相比与JS更轻量，性能更好，更易于实现，同时也不必担心缺乏标准和增加带宽消耗的问题。 缺点是不能动态的修改或定义动画内容，不同的动画无法实现同步，多个动画彼此无法堆叠。
SVG 动画
SVG本身有类似CSS3的动画体系，优点是很强大的，能够实现路径动画，但是浏览器支持性不好，复杂度高。Snap.svg.js 是一个比较流行的svg库，能够实现svg图形的创建，Dom操作和动画实现。
优点：
1) 矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何 2) SVG对动画的支持较好，其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画 3) Javascript可以完全控制SVG Dom 元素
缺点：
1) DOM比正常的图形慢，而且如果其结点多而杂，就更慢。 2) SVG 画点报表什么的，还行；在网页游戏前，就束手无策了；当然可以结合 Canvas + SVG实现。 3) 不能动态的修改动画内容 4) 不能与HTML内容集成 5) 整个SVG作为一个动画 6) 浏览器兼容性问题，IE8-以及Android 2.3默认浏览器是不支持SVG
Canvas
优点：
1) canvas适合图像密集型的动画 2) 页面渲染性能受图形复杂度影响小 3) canvas可以在更底层操作
缺点：
1) 整个就是一张图，无论你往上画什么东西——没有DOM 结点可供操作 2) 没有实现动画的API，你必须依靠定时器和其他事件来更新Canvas 3) 对文本的渲染支持是比较差 4) 对交互要求高的（比如TIBCO的很多产品）的界面，不建议使用Canvas