开发笔记3-H5页面实现帧动画

动画的实现方式有以下几种方式：js、css、canvas、gif

• gif对透明效果支持不好，比较方便，但是现在动画基本带有透明效果（不推荐，内心OS～为啥不普及apng？？？）
• css实现效率比较高，通过用雪碧图当背景，再控制背景图显示的位置，但是视频转为雪碧图太大了
• js实现比较灵活，交互性高，实现方法也有几种：

1、通过js切换标签的src（不推荐）
2、通过js切换background的url（不推荐）
3、通过js移动雪碧图的显示位置，类似css的实现方式，但是可以在此基础上添加交互
4、使用appendChild()和removeChild()，效率较高，即使帧数较多也不成问题（推荐），参考《炫酷H5中序列图片视频化播放的高性能实现》

另外也可使用Airbnb的LottieJS库《LottieJS库》，配合AE插件-bodymovin，即可把AE工程导出为json文件，兼容性有待测试，AE里粒子等复杂的动画效果不能实现。

把动画导出成canvas的方式还是使用adobe的AnimateCC（前身flash）比较成熟。

————————————————2020/06/18 分割线————————————————————
经过几个动画项目后，去他*的序列帧、雪碧图0.0，2D动画还是Adobe Animate省事