創作內容

12 GP

【教學】距離場教學十二章 - 動畫範例

作者：樂小呈│2021-08-01 16:58:28│巴幣：24│人氣：174

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

動畫範例
上一章教學教了兩種播放動畫的方法，在這章中我們將實際製作幾項不同的動態效果。

旋轉動畫
圓環是個很好舉例的形狀，就讓我們從圓環開始吧。

首先回到以前的弧度計算，我們使用他製作一個弧度過濾器。

只需要將他作為遮罩套用在圖形上，就能夠完成讓圓環逐漸出現的動畫。

當然，一個距離場也不被限制只有一種動態，我們可以在出現的時候也添加旋轉動態。

透過動畫改變距離場的位置，可以搭配貝茲曲線做出弧形位移。

參數動畫
修改距離場參數的動畫，上個章節最後有提到我們實際上能夠用動畫控制任何距離場使用到的參數，這裡舉幾個例子，首先是矩形的高度。

或是扇形的弧度也行。

漸變動畫

或是透過組合的漸變函數，來達成不同形狀轉換動畫。

空間操作
透過動畫修改距離場參數就很了不起了嗎 ? 不，我們能夠做到的還更多，動畫當然也可以套用在空間操作上，無論是隔離給特定距離場的操作，抑或是全局有效的效果。

我們以放射平鋪為例，透過動畫改變分割數量。

如果在全局縮放添加動畫的話，可以讓圖形有放大的出場效果。

震盪動畫
也可以使用被動動畫來操控距離場參數，透過簡單的 sin 波達成來回的震盪旋轉，就能有不同的視覺感受。

以上簡單的提供了幾種動畫的範例，請各位運用這些思路自由發揮吧 :D

十一章 - 動畫方法

十三章 - 動畫緩動

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

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

相關創作

同標籤作品搜尋：SDF|Shader

【教學】距離場教學結語

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

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

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

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

留言共 0 篇留言

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

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

Lobster0627 給全體巴友：
大家可以多多來我的YT頻道看看哦(*´∀`)~♥https://www.youtube.com/@lobstersandwich看更多我要大聲說19分前