創作內容

16 GP

【教學】距離場教學十一章 - 動畫方法

作者：樂小呈│2021-07-31 16:32:50│巴幣：32│人氣：203

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

添加動畫的方法
目前為止，我們使用距離場繪製的圖形都是靜態的，所以下一步就是要讓距離場動起來。

教學這裡將播放動畫的類型歸類成兩種 - 主動以及被動，主動播放指的就是使用者用直接或間接手段控制動畫的撥放，而被動播放指的是閒置狀態下的自主動作。

被動播放
被動播放主要依靠的是時間相關的變數，使用 _Time 讓形狀持續運動，或是搭配三角函數產生正盪波型。

首先建立一個回傳不同速度的時間函數。

在計算距離場之前將 uv 進行旋轉。

整個形狀都朝同一個方向旋轉太單調了，其實我們可以讓旋轉有不同的層次，只需要在組合距離場時將 uv 以不同速率旋轉。

主動播放
顧名思義，需要由使用者主動控制的動畫，主要會依靠插值 lerp 函數來達成，首先在著色器上添加一項 _Anim 屬性並建立變數，範圍由 0 到 1。

我們將 _Anim 作為 lerp 的權重輸入，讓特定數值在我們的控制下變動，同樣以旋轉為例。

當然我們也可以在組合距離場時，根據層次做出不同動態。

在進行主動播放時可以透過 C# 腳本來控制動畫的持續時間，教學這裡就進行省略了。

讓距離場播放動畫的方法主要就是以上兩種，而我們能做的當然不只有旋轉，實際上你可以用動畫控制任何距離場使用到的參數，下一章教學會帶你們了解各種可以透過動畫達成的效果。

章節題目
請嘗試用任何方法播出類似效果

第十章 - 組合範例

十二章 - 動畫範例

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

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

相關創作

同標籤作品搜尋：SDF|Shader

【教學】距離場教學結語

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

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

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

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

留言共 1 篇留言

千羽：
好酷(・∀・)

08-01 12:41

樂小呈：
之後還有更酷ㄉ[e7]08-01 13:38

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

16 喜歡★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)

god44675566 給喜歡動畫的你：
有許多動畫心得與點評出爐囉~ 可以上我的YT去看看，不知道會不會有你喜歡的呢?看更多我要大聲說昨天17:27