ETH官方钱包

創作內容

30 GP

【Spine2D】動畫的基本法則教學 ── Slow in slow out

作者:Yuar│2022-08-08 12:13:06│巴幣:166│人氣:1340

近期剛好有同學在動態方面遇到瓶頸,趁這個機會寫點教學混個更新:D
畢竟這些中文資料比較少一點,多寫一點有需要的人就更容易找到答案了。

Spine的基礎操作教學跟影片有很多,我想大部分的人照著網路上的方法都能順利的做出作品。
但看到作品的品質不夠理想時,很多人可能會認為是軟體哪邊操作錯或是有什麼小技巧沒學到的,一查發現沒相關資料就放棄。
也可能有些人知道是動作上的問題,但是又沒有一個學習檢查的方向便裹足不前。
希望寫這些內容可以幫助到有需要的人:D

這些內容跟軟體的操作可能比較沒有關係,算是2D、3D都通用的法則。
相關資料搜尋「animation 12 principles」就可以找到囉!


------

那麼首先,我們就試著移動一顆球吧。
今天就算是你剛下載Spine或不管其他什麼軟體,相信做到這邊都沒什麼問題。
起手跟終點各打個關鍵幀就完事了,非常普通的動作。

綠球從頭到尾都保持著同樣的速度沒有變化,每一秒鐘移動的距離都相同。
這種動作我們會說他是比較「線性」的動作,開圖表起來看就是這樣一條完美的直線。


一般來說,我們會認為這種線性的動作看起來很不自然。
畢竟在現實生活裡,我們幾乎沒有任何東西是用這種方式在進行運動。
舉例來說,我們都知道車子的速度從靜止加速到100公里需要一段時間,不管馬力再怎麼強大都不可能一瞬間從0跳到100。
如果辦的到的話,你就會看到紅燈轉綠燈的瞬間所有人都像被打到一樣彈出去了XD

用說的可能不是很明白,我們先來看這個例子


綠球從空中掉落撞到地板後彈起,經過彈跳後落在地面。
這個過程的速率從頭到尾都是固定的,感覺就有股說不上來的不協調感。
看不太出來?沒關係,我們先繼續往下,等一下再來比較看看。


為了讓他看起來更自然一點,我們請到了藍色球球
跟綠色球球不一樣,藍色球球使用了貝茲曲線來調整了速度。


優雅的籃色球球起跑時速度較慢,隨著時間經過後達到最高速,快到終點時又減速下來緩緩地靠近終點。
我們這邊放個比較圖來看看

這邊就很明顯能看出藍綠球兩者的差距。
我們沒有目的性的只是單純左右移動可能看不出來藍色球有什麼特別的,
因此我們就來看一下籃球他在自由落體時的表現吧!


如何呢?看起來是不是覺得藍球比綠球更有彈性一點
看不太明白?那我們再把它們擺一起看看

這樣比較下來,帶有速度變化的籃球是不是比呆版的綠球更自然一些?

初學者:懂了!我現在就把綠球全部都加上漸快漸慢!

...
..
.

初學者:不對阿,怎麼看起來跟你講的不一樣!

綠球添加了漸快漸慢之後看起來是比之前柔順一點了,但為甚麼還是沒有重量感呢?
原因很簡單,什麼時候要漸快什麼時候要漸慢是有一定邏輯的,並不是隨便添加就會有好效果。


我們把畫面放慢來看,藍球在碰到地面的瞬間以前都是維持著加速的狀態,相反的綠球在接近地面時就突然開始減速了。
在空中自由落體的時候有可能突然自動減速下來嗎?在沒有任何額外的外力影響下,任何東西都是不會突然改變速度的。
唯一有可能的是地面突然有一陣風剛好往上吹給了那顆球一個往上的力,不然空中突然進行減速是很不合邏輯的。

因此,我們調整他的曲線到大概這個樣子


讓他在達到最低處,也就是接觸到地面前都維持著持續加速的狀態,看起來就會比較符合現實,重量感也會跟著被表現出來。

那麼,我們就將所有落地前的曲線都調成上面的樣子。
這時看起來就差不多了,但好像還有點微妙的差別耶?
為了看清楚問題在哪邊,我們再放更慢來檢查一下。
要檢查動作有沒有問題的時候,放慢動作來看會是個很好的檢查方式。
從這邊可以看到,藍球在接觸到地面後便迅速回彈,相反的綠球在撞擊到地面後卻好像被黏住一樣緩慢地進行加速。

什麼情況下物體會加速?那便是有額外的力量在推動物體的時候。
如果你想要在空中往上方加速,那就必須要有一個比重力還要強的力道把物體往上推動。

球在撞擊到地面後,地面確實會給他一個反作用力讓他向上彈起,
不過這個作用力在球離開地面的瞬間就已經消失了,在那之後因為沒有其他外力因素球只會受重力影響不斷的減速直到速度歸零。
但這邊透過慢動作可以看到球體在離開地面之後還有一個從慢速加速的動作,照我們上面的說法來看這是非常不合理的。


因此我們把綠球撞擊地面之後的移動曲線從灰色的漸快漸慢調整成藍色的漸慢,
讓他從離開地面的瞬間便受重力影響開始減速,看起來就會自然許多了!


應用以上的概念後,綠球也終於進化成能獨當一面的玩具球了,可喜可賀!


不管是簡單的小物件還是複雜的人體或動物等內容,速度的變化很直接的就會影響到動作看起來的樣子

左側為線性,右側則是有速度變化的版本。

如果你的作品也有這種卡頓卡頓的感覺,很有可能就是沒有做好 Slow in slow out 帶來的影響喔!

今天的文章就到講到這邊,有什麼問題都可以私信或直接加我 Discord : yuar0708
雖然不知道下篇文會拖到什麼時候但還是下次篇文再見

掰掰(*'▽')ノ

引用網址:http://www.jamesdambrosio.com/TrackBack.php?sn=5529381
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:動圖|教學|Spine

留言共 5 篇留言

NA-23
優質教學文 推推

08-08 12:37

Yuar
謝謝[e7]08-09 10:01
小妖是貓
這個自學真的未必會知道到底不自然在什麼地方,一直錯下去
還附上那麼多圖例,一流教學啊~~~
雖然我是知道速度不會固定,但卻不了解怎樣調節最好,現在清楚多了(?)??*

08-08 13:06

Yuar
知道每個操作背後的理由是很重要的!
有學到東西就好(*′ω`*)08-09 10:03
拉米OxO
辛苦了!!!好強好優秀

08-08 19:14

Yuar
[e12]08-09 10:03
zda
辛苦了,推

08-08 19:46

Yuar
zda大平時管L2D群也辛苦了[e19]08-09 10:04
只是木天蓼
今天才看到大大有新文了!!!!!讚嘆大大(((o(*?▽?*)o)))

08-18 00:23

Yuar
(*'▽')08-19 16:58
我要留言提醒:您尚未登入,請先登入再留言

30喜歡★a860705d 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【2D動態】こみみちゃん... 後一篇:【Spine2D】關節處...


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情? 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】