动画法则与动画曲线解析(2)

来源:网络   作者:热心网友   发布时间:2021-04-12    浏览次数:140
收藏到:

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


关键帧

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

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

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

圆形:

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

正方形:

定格(硬性变化)在文字变换动画中常用

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

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

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

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


线性动画(linear)

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


缓入动画(ease-in) -加速运动

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


缓出动画(ease-out)-减速运动

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


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

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

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


12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:UI动效

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/9162.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通