制作动画有哪些技巧

发布时间:2022-09-02 21:01:29访问人数:作者:张工

界面上的动画效果并不新鲜,在我们的操作系统上,在网站和应用程序上面,我们都能看到它。但我们可能都没有意识到,界面动画能帮助用户了解哪些东西,制作动画又有哪些技巧,对我们的企业网站和应用程序的用户体验的提升又有什么帮助?

首先我们觉得制作动画效果必须要有一定的原则,让用户感觉自然,然后在用户满意之前增加用户的理解,再者就是不要分散用户的注意力。通过这些原则我们就能很好的完成我们的动画,并且给用户带来不一样的感受,下面我们具体来讲下这些原则。

动画持续时间

当元素改变它们的状态或位置时,动画的持续时间应该足够长,让用户有可能注意到变化,但同时动画的持续时间应该足够短,不会引起等待。

许多研究发现,界面动画的最佳速度在200到500毫秒之间,这些数字是基于人类大脑的特殊性质和感知运动的能力。一般来说,小于100ms的动画被认为是瞬时的,根本无法识别。而动画超过1秒就会有延迟的感觉。

对于移动设备,我们也建议将动画的持续时间限制在200-300ms,至于平板电脑,使用时间应该延长30%——大约400-450毫秒。原因很简单:屏幕更大。当物体改变位置时,它们会克服较长的路径。可穿戴设备的续航时间应相应地缩短30%,约150至200毫秒,因为在较小的屏幕上,飞行距离更短。

网页上的动画的处理方式不同,习惯了在浏览器中几乎是即时打开网页的用户也希望在不同的状态之间快速切换。因此,web转换的持续时间应该比移动设备短两倍左右,在150-200ms之间。在其他情况下,用户不可避免地会认为计算机有问题或有互联网连接问题。当在网站上创建装饰性动画或试图吸引用户注意某些元素时,这些规则可以被忽略。在这些情况下,动画可以更长。

需要记住的最重要的指导原则是,不管使用什么平台,动画的持续时间都应该取决于移动的距离和对象的大小。较小的元素或动画应该移动得更快。具有大型和复杂元素的动画在使用较长时间后看起来会更好。

在相同大小的运动物体中,第一个停下来的物体是经过最短距离的物体。与大对象相比,小对象移动得更慢,因为它们会创建更大的偏移量。

线性运动

不受任何物理力影响的物体呈线性运动,换句话说,速度不变。正因为如此,它们看起来非常不自然和人为的人眼。

所有的动画应用程序都使用动画曲线,该曲线显示了同一时间间隔(x轴)内物体(y轴)的位置如何变化。在当前情况下,移动是线性的。物体在同一时间内走相同的距离。

线性运动确实有它的用途,例如,当对象更改颜色或透明度时,可以使用它。但是,一般来说,当对象不改变位置时,将其用于状态。

加速曲线

在这条曲线上,物体的位置开始变化缓慢,速度逐渐增加。这意味着物体以一定的加速度运动。

当物体以全速飞离屏幕时,应使用此曲线。这些可能是接口中的系统通知或卡片。请记住,只有当对象永远离开屏幕并且不能被收回或返回时,才应该使用此方法。

动画曲线有助于表达正确的情绪,在下面的例子中,我们可以看到所有对象的运动持续时间和距离都是一样的,但是即使是曲线上很小的变化也会影响动画的情绪。

减速曲线

这是易进曲线的倒数,物体迅速地跑过一段很长的距离,然后慢慢地减速,直到最后停下来。

当元素出现在屏幕上时,应该使用这种类型的曲线。它在屏幕上全速飞行,然后逐渐减速,直到完全停止。这也可以应用于从屏幕外部出现的卡片或对象。

标准曲线

这条曲线使物体在开始时获得速度,然后慢慢下降到零。这个动作在界面动画中最常用。当你怀疑在动画中使用哪种类型的运动时,使用标准曲线。

根据材料设计准则,非对称曲线是最好的,因为运动看起来更自然和现实。曲线的终点必须比起点更强调,这样加速度的持续时间就比减速的持续时间短。在这种情况下,用户将更多地关注元素的最终移动,从而关注它的新状态。

当对象从屏幕的一个部分移动到另一个部分时,使用Ease-in-out。在这种情况下,动画避免了引人注目和戏剧性的效果。当元素从屏幕上消失,但用户可以随时将其返回到之前的位置时,应该使用相同的移动类型。例如,一个导航抽屉。

总之,界面中的动画应该反映我们从物理世界中了解到的运动——摩擦、加速度等等。模仿现实世界中对象的行为可以创建一个序列,允许用户理解从动画期望什么。

如果动画构建正确,它就不会引人注目,也不会分散用户对目标的注意力。这意味着动画不应该减慢用户的速度或阻止他们执行任务。如果是这样,动画需要软化,甚至删除。永远记住,动画与其说是一门科学,不如说是一门艺术,所以最好是对用户进行试验和测试。

赞+1

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:office@zhubiaotech.com,我们以便及时处理。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ943345387】

上一篇
下一篇
抖音广告推广
新媒体运营推广
网站建设
域名注册

助标网络 版权所有 Copyright © 2018-2024. 未经许可,不可拷贝或镜像  沪ICP备18014743号-1  沪公网安备:31010702004598

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部