創作內容

12 GP

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

作者:is樂小呈│2021-08-01 16:58:28│巴幣:24│人氣:57
標準化空間,大小為 10、距離場上色

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

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



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



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



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



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



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



或是扇形的弧度也行。



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



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

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



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



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



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

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

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

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

追蹤私訊切換新版閱覽

作品資料夾

dorisgallows喜愛BL的你
新章節更新!【BL × PTSD題材小說】如歌般的呢喃。一首曲子,開啟了情感的流動看更多我要大聲說20分前


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

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