創作內容

13 GP

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

作者：樂小呈│2021-08-01 17:02:05│巴幣：26│人氣：222

標準化空間，大小為 10、距離場上色

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

十三章 - 動畫緩動

十五章 - 修正鋸齒

喜歡 13 收藏引用留言推上首頁檢舉

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

相關創作

同標籤作品搜尋：SDF|Shader

【教學】距離場教學結語

【教學】距離場教學十九章 - 最終範例

【教學】距離場教學十八章 - 分形繪製

【教學】距離場教學十七章 - 進階上色

【教學】距離場教學十六章 - 進階繪圖

留言共 2 篇留言

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

08-01 17:29

⊰⊱求出處學術用⊰⊱：
數學家的動畫

08-02 12:30

樂小呈：
嘿嘿 [e16]08-02 12:51

樂小呈：
畫超久ㄉ08-02 12:51

我要留言提醒：您尚未登入，請先登入再留言

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

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

追蹤私訊切換新版閱覽

作品資料夾

--- 重點文章 --- (0)
└學習、開發資源分享 (8)
└發佈的遊戲 (4)
└學習和教育 (2)
└關於樂小呈 (9)

--- 學習日誌 -- (0)
└綜合學習 (7)
└遊戲和程式 (63)
└數學和圖學 (56)
└網頁和前端 (25)
└技術和美術 (1)

--- 學習筆記 --- (0)
└零碎筆記 (27)
└複雜筆記 (5)

--- 美術相關 --- (0)
└畫圖大雜燴 (24)
└建模大雜燴 (23)

--- 專案相關 --- (1)
└山鴉行動 (150)
└投擲地牢 (23)
└學習專案大雜燴 (97)

--- 教學相關 --- (0)
└距離場數學函數 (22)
└遊戲程式教學 (1)
└著色器的教學 (1)
└分享一些東西 (1)
└我捨不得刪，別看 (8)

--- 其他文章 --- (0)
└近況和閒聊 (60)
└回顧和歷程 (26)
└遊戲和心得 (5)
└寫到一半的 (2)
└蛤 (1)

不知道分哪 (1)

pjfl20180818 給模型少女 AWAKE：
阿就真的學人精阿看更多我要大聲說昨天19:06