iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 29

第二十八章、集合啦! 動畫技術同好會

  • 分享至 

  • xImage
  •  

簡介

在系列文的前幾篇中,我們有提到 動畫 12 法則是如何運作的,不過在科技日新月異下,我們不僅僅是可以在紙上、螢幕上看到動畫,而是能與創作者創作出來的作品有更多的互動。那麼這些互動行為,真的能算是 動畫 嗎?

今天就讓我們來討論看看這個問題吧~

傳統動畫與多媒體差異

最初期,人們在岩壁上繪製一張張的圖片來呈現現實生活中的動態,接著漸漸將這些圖片透過線條、顏色等繪畫技巧串連再一起,而 動畫 這個名詞的明確定義是由加拿大動畫藝術大師 諾曼 ‧ 麥克拉倫(Norman McLaren) 所提出,動畫不僅僅是「會動的畫」,而是要表現「畫面之間的動作」的一種藝術。

可以看得出來隨著時代的演進,動畫創作的媒材已經越來越多元,諸如:偶動畫、馬賽克動畫、皮影戲等讓每一幀畫面串接做出來的動畫。而當時代進入多媒體時代後,我們更可以透過文字、聲音、五感等方式呈現更多元的互動式藝術創作,例如:寶可夢手遊利用的 擴增實境(AR)、各家科技廠商搶攻的市場 虛擬實境(VR),也因為這樣,動畫的定義如今已漸漸被模糊。

網頁動畫與事件操作

網頁動畫可以說是動畫與電腦多媒體科技產物所結合出來的產物,隨著電腦性能高速發展下,我們可以將網頁動畫大致分為幾種:

播放型網頁動畫

即是我們最直觀認知的網頁動畫類型,我們透過各種技術,最後將動畫渲染的我們指定的畫面上,更極端一點,我們直接用非程式製作動畫後引入該多媒體連結,做成一個靜態動畫網頁。

參考網站

互動型網頁動畫

相信大家都知道,在網頁程式設計中,我們可以透過很多種 even 操作來觸發動畫元素,如下面範例網站,我們透過滑鼠點擊某區塊,觸發動畫播放:


參考網站

更甚至可以做成如遊戲般的互動式動畫,例如讓觀眾透過關卡選項來觸發不同結局:

參考網站

網頁遊戲

而在程式設計中,我們也可以透過鍵盤來操作互動元素,且由於他加入了遊戲引擎,讓整個動畫元素有諸如 碰撞 重力 等行為,因此像這樣的網站我們可以歸納為網頁遊戲,最有名的 google 小恐龍:

議題探討

經過上述幾種範例後,不知道大家對於 動畫介面互動遊戲 之前的差異有什麼樣的看法呢?

以播放型網頁動畫為例,若我們可直接引入外部多媒體連結,那麼工程師還有「寫程式做動畫」的必要性嗎?

像這樣的議題,真的是非常玄學的問題,認真探討的起來的話大概就跟畢業論文一樣吧。


不知道大家對於今天的議題有沒有興趣呢?若是有興趣或是新的觀點的話,歡迎隨時來交流一下想法呦~ 感覺是非常有趣的議題呢。


參考資料


上一篇
第二十七章、燃燒吧!Three.js 小宇宙!(伍)
下一篇
終、球不落地,永不放棄
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
heiyuyu
iT邦新手 5 級 ‧ 2023-01-20 16:08:58

我自己很喜歡程式的原因之一是:有事件的發生
我想這就是跟動畫不一樣的參與感,如果都是線性的劇本可能就交給動畫小高手吧/images/emoticon/emoticon13.gif但是如果有多重宇宙就交給學程式的魔法少男少女了/images/emoticon/emoticon07.gif

idea-stu iT邦新手 5 級 ‧ 2023-03-09 20:23:38 檢舉

不同面向的參與感

CathyShen iT邦新手 4 級 ‧ 2023-05-22 18:38:28 檢舉

是呢!我身邊不乏「我比較喜歡事件操作與資料整理」的人~~/images/emoticon/emoticon34.gif

不過好奇想問一下,文章中舉例得 互動式動畫 也是會有滿滿的事件觸法,這個是妳指的「有事件的發生」嗎?

我要留言

立即登入留言