1. 动画基础
动画其实就是快速播放连续的图片,那么动画制作呢,就是将一帧一帧的图片绘好,然后按照一定的顺序,和播放速度进行播放。
* 动画帧是由,keyframes(CSS3)来定义的,其中包括了动画帧的顺序。
* 动画帧的绘制,可以使用transform,其中有几种变形,translate,skew,scale,rotate.
* 动画播放速度,动画的播放的帧,是由animation来指明的。
* 动画帧的切换过渡效果有transition来指明。
但是并不是说以上的三个属性都必须同时拥有。在分析如何实现一个动画的时候,首先从帧开始,先分析每一帧动画所呈现的样子,画出来,然后再安排动画排演的速度,动画的切换,最后考虑动画的播放次数。
2.中心位置不变的动画-transform
仔细观察一个动画,如果发现该动作主题(Motion Object)的中心位置不变,那么就考虑使用transform实现,transform动画的详细介绍。要特别注意一个transform-origin的属性。
3.动画的播放速度-animation-timing-function
常用的有linear和bizar,其中的bizar可以创建很多流畅的曲线运动速度,所以很普遍的被使用
4.动画的切换-transition
直接使用transition其实就可以创建一些简单的动画。transition