HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

2022-11-14 07:48:38

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame

2、css3

3、svg

4、canvas（当然，这个还是要配合js）

也许这么分类是不对的，因为无论如何都需要脚本控制，那么也许应该分为

1、js+传统css

2、css3

3、js+svg

4、js+canvas

但由于requestAnimationFrame比较特殊，所以还是单独出来说吧。

1、setTimeout和requestAnimationFrame

setTimeout就比较基本了，没什么说的，然后requestAnimationFrame可以看看这个文章：

http://www.zhangxinxu.com/wordpress/?p=3695

requestAnimationFrame的好处是

类似flash的enterFrame事件，跟浏览器重绘同步，不像setTimeout那样强行插入，更容易实现平滑的效果
灵活，可以实现很多css3无法实现的高级效果，例如一些曲线缓动、弹性效果等
容易做到浏览器兼容，可以封装函数，低级浏览器改为使用setTimeout

缺点是，很多浏览器不支持，尤其android，只能使用setTimeout弥补。

简单兼容：

window.requestAnimFrame = (function(){

  return  window.requestAnimationFrame       ||

          window.webkitRequestAnimationFrame ||

          window.mozRequestAnimationFrame    ||

          function( callback ){

            window.setTimeout(callback, 1000 / 60);

          };

})();

2、CSS3

CSS3可以利用css语法把动画绑定到dom上，不需要js代码参与。CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

Transform： http://www.w3cplus.com/content/css3-transform

Transition： http://www.w3cplus.com/content/css3-transform

Animation： http://www.w3cplus.com/content/css3-animation

好处是：方便，不需要js参与，适合做一些图片/文字的简单效果

坏处是：不灵活，效果有限

网上一些所谓“惊讶”的CSS3效果，很多都是配合js实现的，可以说，js+css应该是灵活运用，包括css2和css3的内容。

3、SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。