找了好几个教程，看了两天，硬是看的晕晕的，我还是在已经了解了前端帧动画的实现方式的基础上，到底是我理解能力不行，还是怎么样；
这些写教程的，也只有阮一峰，张鑫旭的功力能让不懂技术的人看完都能略懂。
看了标题就该知道这篇文章要讲什么，废话不多说，直接开始：
1.前期软件准备
after effects，sublime text3（代码编辑器，随你喜欢），ps。
提示：安装after effects，就是adobe公司的软件，做视频特效的，我并不会用这个软件，但是本文过程中要涉及到。如果你不会安装，那么你可以百度，或者请教你身边懂的人，如果还不行，那么这篇文章你可以右上角，有个 x，选择关闭。
提示：安装PS参见上面这段，安装sublime text3或者其他代码编辑器也参见上面这段。
2.涉及知识准备
css属性：animation: 动画名 持续时间 动画执行曲线 是否无限 是否反向执行动画。
提示：我用animation这个属性的时候，常用的就这几个简写的值：比如 animation: move 3s linear infinite alternate; 也可以只用前面2个，因为前面2个是必选，后面几个是可选。比如 animation: move 3s; 这个属性你必须要懂，要会用，才能顺利进行。
css精灵图是什么意思，这个要懂，也要会用，背景图片不停的移动，在div中看到的景象就时时在变化。
帧动画实现原理：
相似案例1：大家在坐地铁的时候，会透过地铁玻璃看到车厢外玻璃窗内的电子显示屏的广告，像视频一样；
相似案例2：iPhone手机拍摄的视频，在相册中预览的时候，可以拖动视频下方的类似进度条一样的一张一张照片组成的视频；
相似案例3：翻书动画（我只能想到用这种定义）
我的解释：帧可以理解为，某一时刻，某一瞬间的图像，那么一小段视频可以由很多帧图片组成，就像小学生写汉字的时候，写出汉字的笔划顺序。把每一笔画都当成一张图片，然后把几张图片连续起来，就像视频一样在播放了。
3.如果上面两步内容你都可以完全OK，那么可以进行实操了。
上面我说了，我不会用after effects，所以我让我的UI做一个简短的视频。
当你有了上述知识储备和素材的时候，注意，要引入一个after effects的插件，
下载 CSS-Sprite-Exporter.jsx 文件，下载链接：https://raw.githubusercontent.com/bigxixi/CSS-Sprite-Exporter/chinese/CSS-Sprite-Exporter.jsx
打开AE, 点击 文件->脚本->运行脚本文件... 然后选择刚才下载的 CSS-Sprite-Exporter.jsx。
或者可以复制 CSS-Sprite-Exporter.jsx 到AE的脚本文件夹:
Windows:
C:\Program Files\Adobe\Adobe After Effects <版本>\Support Files\Script\
Mac:
/Applications/Adobe After Effects <版本>/Scripts/
这样你就可以从 文件->脚本 中直接选择CSS-Sprite-Exporter了
上面这一段最后一句话，“这样你就可以从 文件 -> 脚本 中直接选择CSS-Sprite-Exporter”，他的原教程链接是
https://sq.163yun.com/blog/article/193790222677258240
有兴趣可以去看一下，也很详细。
下面开始讲我注重的点：首先AE这个软件我不会用，我导入素材后，一开始用这个插件导出素材死活导不出，直接就崩溃。
然后我在思考这人间到底是谁在渡劫，世界都不美好了。然后我在想，是不是因为素材太大，导致内存崩溃，所以我把素材画布变小，然后奇迹般的导出来了，因为原素材是1920 * 1080的。我改小之后就拿到了素材，然后就开始帧动画开发了。
有问题可以下发评论，或者qq联系我：513492640. 苏水儿，字立水。