您当前的位置:首页 > 计算机 > 软件应用 > 音像剪辑

ae ui动效_ae制作ui动效教程

时间:01-15来源:作者:点击数:

动画的速度和持续时间

当界面元素改变状态和位置时,动画的持续时间应该能注意到又不用等待为标准。

ae制作ui动效教程

大量的研究发现在界面中最优的时间是200-500ms。

ae制作ui动效教程(1)

动画的持续时间是使得界面流畅的关键

ae制作ui动效教程(2)

设备的大小会影响动画的持续时间

在页面中创建一些装饰性的动画,此时就应该抛弃这些规范,可以做的更长一些。

ae制作ui动效教程(3)

在大小相同的对象中,移动距离最短的物体应该最先停止。小的对象与大的对象相比较,小对象移动速度显得更慢,因为会产生更大的偏移量。

ae制作ui动效教程(4)

动画的持续时间取决于物体的大小和移动的距离

当对象发生碰撞时,根据物理原则,碰撞的能量必须在碰撞对象之间平均分布。而如果在界面中只能看到碰撞体的一部分回弹,往往会显得不够自然。因此,最好避免回弹效果,只在一些特殊情况下才用到它。

ae制作ui动效教程(5)

避免使用弹跳效果,因为它会分散注意力。

物体的运动轨迹应该是清晰锐利的,所以尽量不要使用动态模糊(在AE中做动画效果除外)。即使是在现在最新的设备上也很难重现这些效果,不能把这种动态模糊的动画效果应用到界面中。

ae制作ui动效教程(6)

动画中尽量不要使用动态模糊

列表项的出现应该只允许有一个短暂的延迟。每一个新列表项的出现间隔应该在20-25ms之间。

ae制作ui动效教程(7)

列表项出现的动画应该在20-25ms之间。

缓动

为了让动画看起来不会觉得太过机械,物体的运动应该会同时伴有一些加速度,就像现实世界中的运动一样,不会有绝对匀速的运动形式。

ae制作ui动效教程(8)

缓动的物体会比较线性运动的物体看起来更加自然

线性运动

所有的APP动画都会用到动画曲线。

ae制作ui动效教程(9)

线性曲线

线性动画在什么时候会用到?举个例子,对象仅改变它的颜色和透明度的时候会用到。一般来说,当一个对象不改变它的位置而只是改变状态时,可以尝试用线性动画来改变状态。

缓入或者说加速曲线

ae制作ui动效教程(10)

加速运动曲线

这种曲线一般应用在对象移出界面时,这些可能是系统通知,也可能只是界面中的卡片设计。但是记住,这种动画曲线只是会用在物体移出界面时,而反过来就不适用了。

ae制作ui动效教程(11)

加速曲线应用在物体移出界面时

物体动画的持续时间和位移大小都是相同的,通过改变曲线,可以让物体的运动显得更加真实自然。

ae制作ui动效教程(12)

相同的持续时间和相同的位移变化,但是会有不同的感受

缓出或者说减速曲线

与缓入恰恰相反,物体的运动在开始时位移变化很大,但是后面会越来越小直到最后完全停止。

ae制作ui动效教程(13)

减速曲线

这种类型的运动曲线通常是用在物体进入界面中时——快速进入屏幕然后再慢慢停下来,在不同卡片或对象从屏幕外进入界面时可以应用上。

ae制作ui动效教程(14)

减速曲线在此时会让动画显得更加自然

缓入缓出或者说标准曲线

这种曲线使物体有加速和减速的过程。这种类型的动画在界面中是最常用的,选择标准曲线准没错。

ae制作ui动效教程(15)

标准曲线

用非对称曲线来使得物体运动的更加自然真实。动画的结尾会比动画的开头更加需要去强调,这样的结果是加速时间要小于减速时间。

ae制作ui动效教程(16)

注意观察对称与非对称曲线的区别

缓入缓出动画常被用在界面中对象从一个位置移动到另一个位置时。在这种情况下,动画的目的是为了不让人有过多不必要的关注。

ae制作ui动效教程(17)

卡片的非对称曲线运动

同样的情况还适用于,元素在界面中消失后还能随时显示,抽屉导航就是这样的例子。

ae制作ui动效教程(18)

抽屉导航的收起过程就是应用到了标准曲线

ae制作ui动效教程(19)

侧边栏的动画是配合减速曲线和标准曲线一起来实现的

有一个立方贝塞尔函数常用来描述这种速度曲线。之所以叫立方是因为它是基于2个点来的。第一个点在坐标轴中是(0,0),最后一个点是(1,1)。

描述图上的两个点,这是由贝塞尔函数的四个参数给出的:前两个是第一个点的坐标x和y,后两个是第二个点的坐标x和y。

ae制作ui动效教程(20)

不同类型的动画曲线以及他们不同的参数

动画在界面中的编排

就像芭蕾舞编排一样,主要思想是从一个状态到另一个状态的过渡引导注意力方向。

一般会有2种编排形式——同级动画和从属动画。

同级动画

同级动画意味着所有对象的外观都服从一个特定的规则。

ae制作ui动效教程(21)
ae制作ui动效教程(22)

按对角线出现的表格视图动画

从属动画

从属动画是指有一个核心运动的元素,它吸引所有的注意力,其他元素也都跟随它的运动。这种类型的动画会显得更有秩序感。

ae制作ui动效教程(23)
ae制作ui动效教程(24)

物体的运动如果不成比例,那应该按弧线变化。

当对象按比例改变其大小时,则此时直线运动的形式会更好。由于这种运动形式做起来容易得多,弧线轨迹运动的规律就往往被忽视。

ae制作ui动效教程(25)

等比的物体运动轨迹应该使用直线

曲线轨迹运动也会有两种实现方式:

第一种是开始水平移动,然后以垂直运动结束;第二种是开始垂直移动,然后以水平运动结束。

物体沿曲线移动的路径必须与滚动界面的方向重合。

ae制作ui动效教程(26)

展开/折叠卡片的方向应与界面的轴线重合

如果物体的运动路径彼此相交,它们就应该不能穿过对方。物体应该通过减慢或加速自身的速度为另一个物体的运动留下足够的空间。

ae制作ui动效教程(27)

在运动过程中,物体不应该互相穿透,而是为另一个物体的运动留下空间。

在另一种情况下,移动的物体可以通过抬高于其他物体,而不会以溶解或通过其他物体的形式来移动。

ae制作ui动效教程(28)

物体可以被抬高于其他元素之上来移动。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门