赞助商
立即赞助

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

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

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

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

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

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

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

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

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

物理学是基础

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

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

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

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

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

让动画生动起来

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

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

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

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

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

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

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

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

动画的编排

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

  1. 轮会旋转

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

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

△ 摩托车的车轮转

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. 添加背

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

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

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

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

△ 最终效果

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

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

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

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

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

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

相关文章

在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
大家在使用Lottie输出矢量渐变图形的时候,应该有遇到过设计的渐变效果无法正常显示的问题。无论你设计的效果是什么样的,导...
Lottie
对如今的 UX 设计师来说,会点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传 ...
AE动效
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE
作为2019年第一个爆款刷屏 H5 项目,「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面,也包含了不少有意思的动效...
UI动效
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相...
UI动效