iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 4

Motion 效果基本項目

上一篇介紹了Motion Graphic製作的基本流程,接下來要分析一下幾個常用的動態效果。

Motion Graphic 是帶入時間軸概念的設計,把每一個畫面依照時間安排串接起來,時間加上畫面的變化,就是Motion Graphic的基本概念,(當然再加上如聲音等其他元素會更加豐富!)。拜動畫軟體的發展,透過參數的調整就能建立流暢為完整的動畫;而時間軸上的畫面或元素的操作,基本上可以整理成這幾種方式:

  • 透明度
  • 位移
  • 形變
  • 顏色
  • 光影、與環境的關係 (3D常見)

透明度
透明度最常看到的淡入、淡出,就是利用這個參數的調整,有時候再加上色彩、位移、形變效果,也能建立更有趣的特效。
備註:通常軟體與CSS語法中,操控透明效果的是「不透明度 Opacity」,當Opacity數值為0時,即為完全透明。

位移 Position
除了單一物體/元件位置的變化,移動也會對畫面其他物體產生相互影響,就算只有單一物體的移動,當有另一個視覺上分辨為物體的存在,有時候會產生被吸引或排斥的相互影響的感受。
另外,位移除了從一點到另一點外,有時候會依照所需要效果不同,會再多出去一點再往回到正確的點,產生回彈拉回的效果,讓移動能更加自然有趣。

形變 (形狀變化)
透過軟體的計算能讓幾何圖形之間互相「你變成我、我變成你」,若以After Effect的基礎做法為例,會利用點對點的對應,舉例來說希望讓正方形形變成為五角星形時,五角星形最少須由10個點組成,當要從正方形形變過去時,除了必要的四個點之外,其他的點就可以收攏在線上,讓要變成五角星時,可以做點對點的對應,即可製作出形變的效果。
另外,放大縮小或許可以歸類於此,透過大小變化讓同一形狀有不同的感受。這邊也可以使用與位移多出去一點點的效果類似,從有到無可以先放大再執行縮小效果,或是相反從無到有——0%到105%再到100%,產生回彈的效果,也會讓動態有不同的感覺。

光影、與環境的關係(3D常見)
三維世界的Z軸創造體積、呈現空間感,所建立的畫面視覺又會有不同感受。如同真實世界,光影也會是3D的重要元素。而除了光與影相對的位置變化外,光的強弱、角度、色彩等,也會與物體材質一同影響物體呈現的色彩;除了物體與光源變化外,也可以操作觀者的畫面視角,這邊通常會用「攝影機」來形容,由視角的變化轉換與空間的利用,用簡單的變化也能創造出有趣的效果。


除此之外,速率的變化也很重要,是平均的變化、由快到慢、由慢到快,甚至也可以先快到慢最後再加速,速率正是時間操控上重要的元素,創造出屬於這個動態最合適的速度感。

以上是幾個常見的動態效果,透過這些項目的參數設定與時間安排,就能製作出屬於自己的Motion Graphic作品,當然這邊還要與畫面設計一同進行規劃,才能讓畫面的動態更加自然唷!


上一篇
Motion Graphic 製作的基本流程
下一篇
CSS就可以!animation 與他的好夥伴 @keyframes
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言