动画曲线解析

今天我们来聊一聊动画曲线，做动效不但要遵循物理规律还要结合人们的视觉体验，想让动效更自然更符合实际，对于动画曲线的学习是必不可少的，希望此篇文章能帮助到你~

首先动画曲线有什么作用？在哪里可以调节呢？

动画曲线可以现实对象运动的仿真效果，比如加速运动、减速运动、匀速运动、自由落体等等；在图表编辑器中为某个属性添加动画时，可以在速度图表中查看和调整动画曲线，从而影响对象的变化速率，使其更真实。

正式学习动画曲线之前我们先说一个小知识。

关键帧

时间轴上的关键帧会有一些不同的形状，关键帧图标形态取决于关键帧之间的时间间隔的插值方法。当图标的一半为深灰色时，颜色较深的一半表示这一侧附近没有关键帧，或者其插值由应用于前一关键帧的定格插值所取代。

我们一起来看下有几种图标类型。

让我们来一一解释，先看最简单的四个。

圆形：

自动贝塞尔曲线（对两侧速度不同的关键帧进行柔和的连接）下面动图可以看出两者的不同对比。

正方形:

定格（硬性变化）在文字变换动画中常用。

凹三角和凸三角都是停止关键帧，可以通过右键点击切换保持关键帧来调整。

凹三角是曲线关键帧转换为停止关键帧后的状态；凸三角是普通线性关键帧转换为停止关键帧后的状态。

了解了关键帧之后我们来看看速度曲线与值曲线

最后我们来学习下动画曲线，动画曲线可以分为：线性动画，缓入动画，缓出动画，缓入缓出动画，我们逐一来举例说明。

线性动画（linear）

动画从开始到结束一直是同样的速度运动，也就是匀速直线运动，看起来不是很自然，例如现实生活中的传送带就是匀速直线运动。

缓入动画(ease-in) 

加速运动，动画的速度先慢后快，动画曲线先是陡峭再平缓，例如现实生活中汽车启动，但是缓入动画会在速度最快的时候停止，会很突然，有点像被磁铁吸住的感觉。

缓出动画（ease-out）

减速运动，与缓入动画正好相反，缓出动画的速度先快后慢，例如现实生活中汽车慢慢停止。

缓入缓出动画(ease-in-out )

速度由慢变快再变慢，例如现实生活中的汽车启动加速到停止。但是默认的F9对于实际效果来讲并不够，还需要我们把对比调节的更强，如下图我们可以看到调整前后的不同节奏感。

总结一下，单纯的线性动画与缓入动画和缓出动画并不太符合正常的运动规律；当缓入缓出动画相互结合时才会更符合正常的运动规律，但是时间上的掌握也是需要慢慢琢磨的，希望此篇文章可以给你带来一些启发。

作者：凌旬

https://www.zcool.com.cn/article/ZMTIyNDc5Ng==.html

本文经过作者授权黑马家族发布，未经许可禁止转载