創作內容

13 GP

【教學】距離場教學 十四章 - 動畫時間

作者:is樂小呈│2021-08-01 17:02:05│巴幣:26│人氣:90
標準化空間,大小為 10、距離場上色

動畫時間軸
上一章學到了讓動畫更流暢的方法,我們還差最後一步 - 讓動畫的播出更戲劇化 !

目前為止,所有動畫都在同一時間用相同的速度播出,在動畫的表現上少了層次感,所以我們可以讓不同的距離場有播放時機的差異,讓動畫只在指定的範圍內完成播放。


建立一個函數可以根據輸入時間判斷自身的動畫進度。


至於判斷的方法也很簡單,小於動畫起點時回傳 0 大於終點回傳 1,在這之間則是回傳時間軸的進度。


讓我們畫出兩組動畫進行對照,對照組正常播放,操作組的播放時間在 0.5 到 0.8 之間。



成功,最後我們只需要重新整理一次算式,使用 saturate 就能夠有效的控制數值範圍了。


演出範例
有了時間軸的功能,現在可以將它套用在距離場動畫上了,教學這裡就先帶各位雕第一個完整的演出動畫,首先為了防止混亂,我們將範例的計算獨立成一個距離場函數。



依樣從簡單的圓環開始,他的播放時間軸在 0 ~ 0.6 之間,使用旋轉放大入場。



接著我們給他添加旋轉的演出效果。



再來添加一個扇形,使用和外環相同的時間,這次透過動畫修改旋轉角度和扇型弧度,快進超出。




還不錯,然後替內側加上隨著時間旋轉的輪齒,使用寬度變大出場,時機比主環晚一點。




內側有了,接加來是外側。添加一個繞著主環震盪移動的半環,使用兩個頻率不同的震盪波來讓移動不那麼單調,出場則使用和主環一樣的放大和角度變大。




最後,讓我們在環上添加最晚出現的氣泡,使用 easeoutBack 出場,為了避免被其他距離場穿過我們得額外回傳一個圓距離場形作為過濾。


在圖形上添加三顆泡泡,把泡泡和過濾分別合併。


最後,先使用剃除將重疊的部分過濾,在將泡泡添加進去。



距離場的動畫就教學到這邊,剛開始盡量以圓形和扇形為主會比較好發揮,請各位自由創作吧 :D

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5225464
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:SDF|Shader

留言共 2 篇留言

is樂小呈
說實話,酷是很酷但實際畫起來超反人類的[e18]

08-01 17:29

⊰⊱大報社⊰⊱
數學家的動畫

08-02 12:30

is樂小呈
嘿嘿 [e16]08-02 12:51
is樂小呈
畫超久ㄉ08-02 12:51
我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:【教學】距離場教學 十三... 後一篇:【教學】距離場教學 十五...

追蹤私訊切換新版閱覽

作品資料夾

cs3884235紳士們(變態)
一份特大雞排-小光+特製牛奶套餐,內有大歐派+美尻+裸足,喜歡的紳士們歡迎近來觀賞▼ω▼看更多我要大聲說昨天19:59


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

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