web动画

未分类

网页动画为了提高网站用户体验, 如果考虑IE,那么对不起,我不认识你!
兼容性: 支持css2(ie6,7,8)/css3(ie9,ie10支持部分) 具体可到 caniuse 查询
请使用谷歌浏览器,这不是打广告!为了你的人生安全,请远离IE.
屏幕适配问题这里不考虑!

web动画类型

• css 动画
• js 动画
• svg 动画
• canvas 动画

1.css动画

• 优点:
  
  • 复杂难度由(业务需要)决定,有简单,也有复杂(简单、高效)
• 缺点:
  
  • 0.不同浏览器的精度量级不同
  • 1.高度复杂动画无法实现和支持(浏览器支持)
  • 2.不适用开发复杂动画,例如:曲线动画,过于复杂的动画还会给页面带来性能问题,pc/移动端渲染的速度不一致(动画播放/时间过度)
  • 3.复杂动画调试困难
  • 4.编写不规范引起过度性能问题(阴影/3d属性等)
• 代表作: Animate.css
• demo展示
  
  • 纯 CSS 绘制《辛普森一家》
  • 30个CSS碎片拼图，30种濒临灭绝动物
  • 慕课网H5圣诞主题(css/js/svg/canvas)
  • 纯CSS3模拟烧烤动画样式代码

2.js动画

• 优点: 用js编写方式代替css编写方式
• 缺点:
  
  • 1.局限限制于在浏览器对css的支持
  • 2.编写复杂
  • 3.原生js编写动画超级麻烦,一般使用第三方动画框架,需额外引入js文件
• 代表作:anime / GSAP
• 评价: 单单只有js动画,在某方面表现不佳,但配合js的可具有控制性,逻辑操控,配合css/svg/canvas等发挥最佳效果
• demo展示
  
  • 参考anime 官网

3.svg动画

• 优点:
  
  • 矢量图形，不受像素影响
  • js可控制
  • SVG的结构是XML，可访问性高(盲文、声音朗读等)
• 缺点:
  
  • 制作 svg成本高,需要专门设计svg的设计师
  • 不能动态的修改动画内容(svg文件设定后不能修改)
  • 浏览器兼容性问题，IE8-以及Android2.3默认浏览器是不支持SVG
• 代表作:无
• demo展示
  
  • 字体线条动画
  • 描线动画
  • 图案变形动画demo1 图案变形demo2
  • 纯用svg写的H5页面
  • logo穿刺
  • 地铁线动画
• 文章资料参考:SVG 动画精髓

3.canvas动画

• 优点:
  
  • 页面渲染性能比较高
  • 可实现超复杂动画
  • 数据保存(另存为图片)
• 缺点:
  
  • 编写难道更高
  • 对文本的渲染支持是比较差
• 代表作: Phaser.js/Pixi.js/CreateJs/白鹭
• 评价: 对于可以处理更加复杂的动画,canvas现主要用于开发游戏多, 当然canvas现在的应用型是非常高的,比如图表,地图等大多由canvas实现,有少部分由svg实现.主要看需求,用于不同的项目.
• demo展示
  
  • [shanemielke 过场动效]- 本地
  • Annie2x 案例

扩展话题

还有一款3端通用的动画实现: Lottie开源动画库
- vue-lottie

flash 转 canvas 动画

那么问题来了,如何高效编写这些动画? 如果是手写那肯定是不行的,想想都头痛...
那么示例用 Adobe Animate CC 2015 写的flash 转成js借助create.js 来用 canvas 渲染.
当然lottie 的最大特色是一个json文件 3端 通用,那么怎么做?
它使用的是After Effects CC (2014) 13.0 - CC (2018) 15.0 +bodymovin插件 转成json,再依赖lottie库 实现渲染(实际是svg动画)

参考资料

• 主流动画实现方式总结
• CSS3动画实践