Motion 效果基本项目

上一篇介绍了Motion Graphic制作的基本流程,接下来要分析一下几个常用的动态效果。

Motion Graphic 是带入时间轴概念的设计,把每一个画面依照时间安排串接起来,时间加上画面的变化,就是Motion Graphic的基本概念,(当然再加上如声音等其他元素会更加丰富!)。拜动画软件的发展,透过参数的调整就能建立流畅为完整的动画;而时间轴上的画面或元素的操作,基本上可以整理成这几种方式:

  • 透明度
  • 位移
  • 形变
  • 颜色
  • 光影、与环境的关系 (3D常见)

透明度
透明度最常看到的淡入、淡出,就是利用这个参数的调整,有时候再加上色彩、位移、形变效果,也能建立更有趣的特效。
备注:通常软件与CSS语法中,操控透明效果的是「不透明度 Opacity」,当Opacity数值为0时,即为完全透明。

位移 Position
除了单一物体/元件位置的变化,移动也会对画面其他物体产生相互影响,就算只有单一物体的移动,当有另一个视觉上分辨为物体的存在,有时候会产生被吸引或排斥的相互影响的感受。
另外,位移除了从一点到另一点外,有时候会依照所需要效果不同,会再多出去一点再往回到正确的点,产生回弹拉回的效果,让移动能更加自然有趣。

形变 (形状变化)
透过软件的计算能让几何图形之间互相「你变成我、我变成你」,若以After Effect的基础做法为例,会利用点对点的对应,举例来说希望让正方形形变成为五角星形时,五角星形最少须由10个点组成,当要从正方形形变过去时,除了必要的四个点之外,其他的点就可以收拢在线上,让要变成五角星时,可以做点对点的对应,即可制作出形变的效果。
另外,放大缩小或许可以归类於此,透过大小变化让同一形状有不同的感受。这边也可以使用与位移多出去一点点的效果类似,从有到无可以先放大再执行缩小效果,或是相反从无到有——0%到105%再到100%,产生回弹的效果,也会让动态有不同的感觉。

光影、与环境的关系(3D常见)
三维世界的Z轴创造体积、呈现空间感,所建立的画面视觉又会有不同感受。如同真实世界,光影也会是3D的重要元素。而除了光与影相对的位置变化外,光的强弱、角度、色彩等,也会与物体材质一同影响物体呈现的色彩;除了物体与光源变化外,也可以操作观者的画面视角,这边通常会用「摄影机」来形容,由视角的变化转换与空间的利用,用简单的变化也能创造出有趣的效果。


除此之外,速率的变化也很重要,是平均的变化、由快到慢、由慢到快,甚至也可以先快到慢最後再加速,速率正是时间操控上重要的元素,创造出属於这个动态最合适的速度感。

以上是几个常见的动态效果,透过这些项目的参数设定与时间安排,就能制作出属於自己的Motion Graphic作品,当然这边还要与画面设计一同进行规划,才能让画面的动态更加自然唷!


<<:  CSS animation

>>:  [拯救上班族的 Chrome 扩充套件] Chrome Extention 的讯息传接球

Day16 用python写UI-聊聊Binding events

绑定事件就是可以回传在执行时的动作位置,虽然说有很多的不同事件可以使用,但是要注意,当滑鼠与键盘同时...

[Day14] 团队系统设计 - 重塑 Planning 会议

本篇文章来介绍「规画系统」(Planning System) 中的:Planning 会议。我相信熟...

自动化 End-End 测试 Nightwatch.js 之踩雷笔记:上传档案

上传本机端的档案其实很简单,只是单纯的 setValue() 就好了。 browser.setVal...

失控玩家 又名 脱稿玩家 free guy

失控玩家在线看 烂番茄指数 81%,观众指数 95%,《脱稿玩家》叫好又叫座成为 2021 今年好莱...

【Day ?(31)】测试环境无法登入

现在测试环境无法登入罗~ 该如何是好呢? 无法登入 先前可以使用测试环境与测试帐号登入,如Day3的...