css3 animation结合after effects做前端帧动画

找了好几个教程,看了两天,硬是看的晕晕的,我还是在已经了解了前端帧动画的实现方式的基础上,到底是我理解能力不行,还是怎么样;

这些写教程的,也只有阮一峰,张鑫旭的功力能让不懂技术的人看完都能略懂。

看了标题就该知道这篇文章要讲什么,废话不多说,直接开始:

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. 苏水儿,字立水。

推荐阅读更多精彩内容