在短时间内制作「流畅感」动画


动效(Motion)是大家非常熟悉的交互界面要素,每天浏览的大量界面中都包含着各种各样的动效设计,相信很多设计师也都接触过或设计过各种各样的动效。作者通过这篇文章,带我们了解动效设计背后的原理,从关键帧、属性和值待基础关键词开始,深入浅出地讲解了插值及其带来的各种流畅舒适的缓动效果,以及如何通过修改和组合不同预设来设计一个有创意的动效,并在最后为我们提供了很多有价值的素材,相信这篇文章对大家会有所启发和帮助。


01动效概述


  尽管网上有大量的动效设计素材,但是我并没有看到能够清晰地介绍 “插值” 的相关资料,而这正是重庆动画公司实现 UI 动效设计最核心的理论 。

  与其在黑暗中摸索,我决定写一篇文章,详细介绍那些基于时间轴的动画程序的背后逻辑,例如 After Effects、Principle、Flinto 等等。

  我相信,对于如今的任何一个产品设计师来说,学习动效设计都是有价值的。动效使我们能够清楚地呈现微交互,注入愉悦感,并在设计中创造微妙的示能。

  想要理解插值,我们需要理解它与传统 “逐帧” 动画的区别。例如,过去的迪士尼动画和 2D 电子游戏精灵(Sprite)都是典型的逐帧绘制的作品。

  

为小球反弹设置逐帧动画的示例(来源未知)


  这些动画通常是手绘之后逐帧动起来的,类似于重庆动画制作的翻页书。资历较深的画师会先绘制出最重要的姿态,称为“关键帧”,然后由资历较浅的画师补充“中间帧”,以创造平滑动画。你肯定能够想象到,这是一个非常枯燥的过程。

  我们是幸运的。随着现代科技的发展,我们不再需要单独绘制每一帧。你能想象这是多大的工作量吗?如今我们可以利用前面提到的软件中的插值技术来完成这项工作。

  插值技术使电脑可以取代动画师的工作。换句话说,可以帮助我们在关键帧之间插入中间帧。

 

UI动效插值示例,源自:Dribbble

  在我们理解插值之前,首先需要了解一些基础概念。 

02关键帧


  两点之间的间距和时序

  关键帧用于标记开始帧和结束帧的样子,以及它们何时出现在动画过渡中。你至少需要设置两个关键帧。然而在更复杂的重庆动画制作中,你会需要添加更多关键帧。

  我们可以按以下方式写出关键帧:

  关键帧 1: 位置 x = 0, 0ms

  关键帧 2: 位置 x = 500, 100ms

  这意味着如果我们设置了这两个关键帧,动画呈现的便是蓝色方块在 100毫秒 的时间内从左(x=0)移动到右(x=500)。

  一般来说,为了使用户注意到这种过渡,UI 和重庆3D动画中的时间间隔应该足够长,但是也不能长到要让用户等待。

上一篇:短视频平台领域的流量与用户是否会影响到用户增长

下一篇:动画UI 元素运动规律的描述




重庆博得文化传媒有限公司  联系电话:13452883959  023-68781096
Copyright © 2018-2019 CQBODE.COM All Rights Reserved. 渝ICP备08001598号-6
为企业专业提供重庆影视制作、重庆3d动画制作、多媒体开发、重庆vr全景制作等设计项目