-模块二基础动画-1728196807935.pptx

→模块二：基础动画运动动画《前端互动设计》课程讲授人：彭珂珂

上节课我们讲的路径动画的原理，这节课我们在的路径动画的基础上来讲一下运动动画。

这是上节课做完的效果，一个带有弧线的运动动画。运动动画是在路径动画基础上来对它的动作进行一下调整。路径动画整个过程是进行的匀速运动，重开始到结束整个物体都在做匀速过程，这个不符合我们的实际认知。那么想让它开始的时候冲劲大一些快点冲上去，然后慢慢的飞出去，那这种动画怎么做呢？可以用到运动动画，所以路径动画是微调物体运动的一种方式。

2.在属性面板里面往下拖，找到专有属性里的运动———默认的是线性，点开这个小尖角里面有很多选项1.首先回到1帧。

3.需要的效果是：开始发射的时候速度快一些，然后匀速的消失掉的运动过程，所以我们在下拉菜单中选择——缓出选好之后预览一下可以看出，开始的时候快一些然后慢慢的就消失掉了。和刚开始的匀速运行不一样了。

4.如果你对电脑安排的不满意，还可以选择自定义运动曲线，然后点编辑。运动编辑器会出现这样一条弧线，表示这物体运动的速度。刚才觉得缓出的距离太慢了，那就可以把它延长一点，让它进短一点，弧度大一点，然后点击确认。预览一下会发现效果比前面强很多。

5.观察编辑器。如图火箭第1帧和第2帧，原来默认的是一个中轴线的位置，现在我觉得效果不够，就把我的缓出调长了，然后前面那一段快速的调短了，而且往上调了，那么它就更加明显了，然后点确认，这就是一个运动过程的调整。6.需要强调的是：一个运动动画的过程，如果一个动画里面有三个关键帧怎么办？如图，先在时间轴任意位置插一个关键帧，

7.把帧插在这，调整火箭的位置。8.调整一下路径的弧度。

现在有三个关键帧，就会有2段动画：1-20，20-30第1帧上是调整过的自定义曲线运动——缓出，作用效果包含1-19帧的过程；第20帧仍然默认的是线性，并没有受到第1帧的影响。所以，20帧到30帧，又恢复了线性运动。9.帧的专有属性中调整第20帧运动方式。

我们来总结一下今天这堂课的知识点，我们今天这堂课讲的是运动动画。第一：，运动动画是关键帧动画和路径动画的一个扩展。他是对他的运动方式和运动速度起到一个微调的作用。第二：我们在调整路径动画的时候，只有在关键帧上才能起作用，在关键帧上来调整运动动画。第三：运动动画只在前后两个关键帧之间起作用。

谢谢观看！主讲人：彭珂珂