赞助商
立即赞助

只需要懂点高中物理知识,就能让你做出优秀动画!

UI设计3年前 (2021)更新 流光
3.3K 0 0

化繁简,解决难题的好办法。今天的文章将会教如何拆分一动画,以及如何使得动画符合一般理学规律变得动。

只需要懂点高中物理知识,就能让你做出优秀动画!

作一动效好者,被问到多的一问题就:

我怎样始能学好动效?

每次看到这问题,我都会坚的回答:「从学好理始」,第一问题往往就吓退了一些观望者。但真对动画感趣的人,绝不会止于此,他们会问很多问题,一接一,我就很喜欢这样钻研的人。

,我日程表上都会排上档期,为能有时与这群好学们交流。有时我会在线下约见,或者接在线上沟,我喜欢做这些事。

的努力也许仅能帮助圈的人,但相界上有多人希望得帮助,所以,决定写这篇文章。

物理学是基础

当说,「你应该从物理学开始」,你觉得在胡说也并非没有道理。「物理」经常让想起的是那些在学校死记硬背的方程和公式。

只需要懂点高中物理知识,就能让你做出优秀动画!

在现实中,物理学的运用要远多于考中用的复杂公式。它是解释物体如何移动,如何下落,以及各种然现象的基础理论。

知道什候举起去抓住一个飞过来的球,把球尽量沿着它的运动方向往后推能减少对的冲击力,这些才是真正的「生活物理学」。

这种对真实界的理解就是开始动效设计所需要全部物理知识了。

让动画生动起来

这是 Snehal Pati 画位快递员骑着摩托,带着圣诞帽插画,很可爱,不?

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 个简单快递员送货插画

猜测这个人正在「骑」摩托车,而不是只坐在上面,要不然起码得有一只脚站在地上了。但是还拿不准,怎才能使人更清楚的知道摩托车不是静止的,而是在运动呢?答案是让它动起来。

让我们从最容易想到的细节开始。

把问题进行拆——比次,我们就按「骑」的字面意思来分析。(译者注:骑车时轮子肯定是要动的,所以先把动的车轮拆分来看)

只需要懂点高中物理知识,就能让你做出优秀动画!

一旦进行拆,每一个的组件都可以视为独立的实体,独做动画,然后再进行组装。

动画的编排

通过将这个骑车动画拆为5个部,使得最后的动画变得生动起来。

  1. 轮会旋转

旋转很简单,After Effects 里一「旋转」选项,我们只需间隔几秒加2不同角度的关键帧就行了。然后,我们致估算下摩托车的速度,每秒车轮会转多少圈调整好节奏,符合自然规律就好了。

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 摩托车的车轮转

这个动画看起来很微妙,不是吗?其实我们是基于2个假设:

  • 摩托车跑的很,因此车轮的链条看不见的。
  • 轮表是粗糙,此反射会闪烁。

提示:闪烁可以使用一简单的白色描径+After Effects中的「修剪径」具创建。

这个闪烁已经让插画本身有些动画了,是离自然真实效很远,我们接着看下个部分。

  2. 这辆摩托车的底盘会抖动

即使我们假设摩托车是在平稳的水泥路上骑行,因为减震器的原因,一样会有节奏的上,如面这样:

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 摩托车轮子会旋转,车身有起伏

感觉好多了,对吧?但它仍然感觉缺少一些东。

  3. 骑手的身体会有自然的

里的骑手并不是一个穿着紧身的塑料身,他是一个人,应该有人的运动规律。想想当你骑一辆摩托车时生什么,身的各个部位生相对运动。肘部的角度能改变,颈部和头部能移动,背部能伸展和弯曲等等。我们只需要模仿其中一动。

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 摩托车的车轮转动,底盘伏,骑手身动

你注意到这些细节吗?如果有,那恭你已经有了设计师的眼光了,这些细节很微妙但是却很有效果。通过这些细节的增,很明确的将一个全没有生命的画面生起来。

提示:骑手的身体可以一分解,每部分不同的图层,然后可以通过 After Effects 中巧妙的移动旋转这些部分实人的动作。

只需要懂点高中物理知识,就能让你做出优秀动画!

  4. 给人物的饰添加运动

都知道,骑在骑行过程中,带的帽不可能是固定不动的,而是需要一定的摆动效果。

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 摩托车的车轮在转,车身在动,人的身体和帽都在运动

到一步,帽子的动画能有点,看着一步步变的动画,心情有点激动,就大幅度,但其看来也没什么大问题。

示:只需要在短时间把帽子的形状做一个改变,就可实现这样的画。

  5. 添加背

让再回头,车轮在转了,底盘也有起伏了,甚至车和的帽都有了运动。但是仍然没有直观的受车在前进,下来的这一步可能是所有步骤最简的一步了。

要么,我们向前移动整个画面(车手+摩托车)。

又或者,我们上一个城背景,然后把这个背景往后移——这是我们从电脑游戏《马里奥》中到的东西。相对,物中讲过的。

只需要懂点高中物理知识,就能让你做出优秀动画!

△ 最终效果

看,终的画面多么真实自然。

提示:想做出这样个永久循环背景是常容易,需要把这个背景复制份,然后头尾相接可以了。

只需要懂点高中物理知识,就能让你做出优秀动画!

欢迎关注译者微信公众号:「云译设计」

只需要懂点高中物理知识,就能让你做出优秀动画!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷...
UI动效
大家好,我是彩云。在动画落地的过程中,配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享,将会讲到Lottie这...
AE动效
编者按:百日挑战是一个很火的活动,旨在通过坚持每日练习提高自己的设计能力。但在过程中很多人会因为没有计划,或者思维枯...
动效设计
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
编者按:Google 设计团队为了更好地推进 UI 和动效设计,自己开发过不少新的工具,打通 Sketch2AE 是其中之一,如今的 AEUX ...
AE动效
有一个 UI 设计师,用了两个多月时间做了一部 Element 动画宣传片,他到底经历了什么? △ 点击查看宣传动画 项目背景 1. E...
Element
一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归...
动效落地