起因是因为今天看到b站上有自媒体评测 MIUI12 , 说到了动画流畅度那方面弹幕都说线性动画非线性动画什么的, 其实很早之前 MUI 就是全线采用非线性动画了, 但这个线性与非线性又是什么, 有什么区别呢, 我今天就稍微来讲一下.
其实这个高中就学习过了, 不过因为最近学习了js, 可以更加明确的展示出来了.

什么是线性动画/非线性动画

要理解这个, 首先需要理解一个问题: *什么是动画? *

什么是动画?

根据 维基百科 所叙述的:

动画是指由许多静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。

可以了解到, 动画, 其实就是很多静止的画面利用视觉残留现象做出来的可动的效果, 所以说如果想要模仿动画的效果, 只需要在1s内对一张图片更替一定的量的次数, 人眼就不会看出是否对这张图片进行了更替, 这, 其实就是 .
同时,并不是所有的 都是会更改的, 有些帧完全就是不会变化的, 这就引出了 关键帧 的概念, 我们只需要着重关注于关键更改了图象的 即可, 并不需要关注其他状态的 静止帧 .
本次编程实践也是只针对于关键帧处理的.

什么是非线性动画

Maya 用户指南上有这么一句话:

在 Maya 中,有两种类型的片段:源片段和常规剪辑。Maya 通过将角色的原始动画曲线保存在源片段中,来保留及保存角色原始动画曲线。请勿使用源片段为角色设置动画。但是,您可以使用源片段(称为_常规片段_)的副本或_实例_以非线性方式为角色设置动画。请参见动画片段

__非线性动画的基础是,移动、操纵和混合常规片段,从而为角色生成一系列平滑的动作
_
>

看上去很高级, 说白了其实就是动画的关键帧停留位置(时段), 也就是说, 非线性的关键帧所停留的并不是处于常见规律中的, 他可能是遵循二次函数, 遵循震荡函数, 总之, 其规律一定不是线性规律(一次函数).

什么是线性动画

所以, 线性动画就很容易理解了, 所有关键帧停留位置其实都是处在一条线中的, 其导数永远是常数.

线性动画/非线性动画有什么用

那么, 非线性动画又有着什么样的特殊用途呢?
很简单的, 应用在手机上, 这会让你的动画感觉更有动感, 更加精致, 不会像是线性动画那样, 一板一眼.
比如 IOS 一直都是非线性动画, 给人的感受就非常的丝滑.
而早年间的 Android 动画都是线性动画, 给人的感觉就像是机械一般的精密但刻板.

简单的线性动画(点击图片看动画):

img
img

See the Pen 线性动画 by !输认不永DGL (@xmmmmmovo) on CodePen.

简单的非线性(点击图片看动画):

圆弧非线性

img
img

See the Pen 加速非线性 by !输认不永DGL (@xmmmmmovo) on CodePen.

加减速非线性

先加速再减速, 二次函数

See the Pen 二次非线性 by !输认不永DGL (@xmmmmmovo) on CodePen.

碰撞反弹

img
img

如果在开始时有动画效果,比如弹跳 —— 那么它将在最后显示。
上图中常规弹跳为红色,easeOut 弹跳为蓝色。

  • 常规弹跳 —— 物体在底部弹跳,然后突然跳到顶部。
  • easeOut 变换之后 —— 物体跳到顶部之后,在那里弹跳。

See the Pen 碰撞非线性 by !输认不永DGL (@xmmmmmovo) on CodePen.

总结

如果理论看不懂, 那大概看例子也能领会了, 有些东西, 不知道是不是我语文太差的缘故, 理论实在是难以形容, 但是当实际例子展示出来了之后, 就会发现, 其实这个还是很容易理解/看出来的嘛.