免费咨询专线 4000-567-928
你现在位置: 首页 > 行业动态 > 正文 返回 >>

UI动效技巧(AE曲线运动)

发布时间:2021-04-28 16:28:07 阅读次数:538发布人:王世进

这段动画中的主体小球都是沿着一个复杂的曲线型轨迹运动,但动画却处理的很流畅,很有节奏。而为了得到这样一个曲线型的轨迹,我们就需要有多个关键帧来支撑。

关键帧越多,也就意味着,动画越难调顺。理想中的动画应该是这样的,整个过程很流畅,并且得有速度的节奏变化。

然而如果动画曲线调不好,得到的结果就是这样的:

(从拖尾的长短变化也能看出,这个速度的变化很不均匀)问题归根到底,就是动画中间的关键帧比较多,速度曲线不好调。接下来我们由浅入深,看看怎么解决这个问题。


我们先把问题简化,先来看看只有首位两个关键帧的动画:这是只有两个关键帧的情况。

这个时候动画是很容易调顺的。(换句话说,要是两个关键帧的动画都能调的不顺,那也是厉害了)


来看一下曲线编辑器里的动画曲线:


咱们不仅要知其然,还要知其所以然。为什么动画顺畅?因为它的速度曲线是连续的,是一整根连续的变化曲线。同理,多个关键帧的情况下,为什么动画不好调流畅?

就是因为中间的关键帧打断了速度曲线的连续性,导致它不是一整根连续的变化曲线。

知道了这个根本原因,接下来我们看如何去解决这个问题。先看一下做曲线型运动的另一种方法。这次我们不直接做关键帧,先在一个固态层上把需要的运动路径画出来。

接下来将mask的路径,也就是Mask Path属性,复粘贴制到球的“Position(位置)”属性上。


这时候可以看到小球就沿着我们画好的路径运动了。

还没完!这时候我们看一下小球的关键帧,你会发现除了首尾帧是常见的线性关键帧之外,中间的关键帧全都变成了一个很小的圆形关键帧。

尝试一下调动画曲线,你会发现虽然这儿有多个关键帧,但是咱们只需要调节首尾两个关键帧,得到的就是一个很连续的速度曲线,而中间的关键帧会自动吸附在这根曲线上。


这样做出来的动画一定是流畅的。

我们继续拓展一下。

如果一组曲线型运动从头到尾只有一种速度变化的话,太过单调了。我们可能希望它在整个动画过程中,有多段速度变化过程。

比如这段更长的曲线型运动,小球在运动到右边要往回折返的时候,需要有一个减速缓冲的过程。这种速度变化更为丰富的动画如何处理呢?

其实很简单,哪些地方需要有速度变化,我们就将其保留成正常的关键帧类型,其它关键帧还是处理成“漂浮关键帧”。

需要重点注意的是,中间的关键帧速度不要调为0,把点稍微往上拉一点,否则动画中间会有停顿。同时整根曲线的速度变化要尽可能柔和。

新视觉实训做UI设计培训十多年,我们每一位老师也在不断接受和创新UI设计的理念和方法,让每一位UI设计培训学员都能学到知识,找到高薪工作。

济南新视觉数码实训基地

Copyright 1996-2020 | 工商注册号:370000228005192 | 鲁ICP备14010827号
友情链接: 济南新视觉实训基地 | 济南平面设计培训 | 济南影视动画培训 | 济南室内设计学校 | 济南web前端培训 | 济南电商设计培训 | 济南UI培训 |