創作內容

10 GP

【教學】距離場教學 十三章 - 動畫緩動

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

緩動動畫
目前為止我們已經能夠播放距離場動畫了,但播放起來種覺得還少什麼 ? 阿,物理慣性 !

由於整個播放的速度都是線性的,導致動畫看起來相當機械而不自然,為了讓動畫看起來更絲滑順暢,我們可以為播放的曲線添加緩動 Easing。

easeOutCubic


緩動有相當多種類型,我們先從 easeOutCubic 開始,這是一種快進放緩的曲線類性。


回到之前的旋轉圓環,將原本線性的動畫進度輸入進去,變成有緩動效果的數值。


兩者花費相同的時間播放玩動畫,左側是添加緩動後的,而右側是原本的線性播放,放在一起對照就能明顯感覺出差異了,整個動畫的質感提升許多。


easeOutBack
接下來使用另一種曲線函數 easeOutBack,效果是快進後會稍微超出範圍在恢復。




同樣對輸入的動畫進度進行修改,這次則是用在距離場縮放上。



當然動畫的緩動也不只侷限於使用一種,可以在不同動畫間添加各自的緩動來增加層次感。



此章節提供了讓動畫更流暢的方法,如果想要嘗試搭配更多種緩動算法可以到 easings.net 找參考。

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

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

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

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

追蹤私訊切換新版閱覽

作品資料夾

qsxxsq7607大家
世界計畫劇情團隊訪談後篇翻譯完成囉~喜歡世界計畫的朋友歡迎來我小屋逛逛喔!ヽ(・ω・)/看更多我要大聲說昨天17:54


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

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