標準化空間,大小為 10、距離場上色動畫時間軸上一章學到了讓動畫更流暢的方法,我們還差最後一步 - 讓動畫的播出更戲劇化 !
目前為止,所有動畫都在同一時間用相同的速度播出,在動畫的表現上少了層次感,所以我們可以讓不同的距離場有播放時機的差異,讓動畫只在指定的範圍內完成播放。
建立一個函數可以根據輸入時間判斷自身的動畫進度。
至於判斷的方法也很簡單,小於動畫起點時回傳 0 大於終點回傳 1,在這之間則是回傳時間軸的進度。
讓我們畫出兩組動畫進行對照,對照組正常播放,操作組的播放時間在 0.5 到 0.8 之間。
成功,最後我們只需要重新整理一次算式,使用 saturate 就能夠有效的控制數值範圍了。
演出範例有了時間軸的功能,現在可以將它套用在距離場動畫上了,教學這裡就先帶各位雕第一個完整的演出動畫,首先為了防止混亂,我們將範例的計算獨立成一個距離場函數。
依樣從簡單的圓環開始,他的播放時間軸在 0 ~ 0.6 之間,使用旋轉放大入場。
接著我們給他添加旋轉的演出效果。
再來添加一個扇形,使用和外環相同的時間,這次透過動畫修改旋轉角度和扇型弧度,快進超出。
還不錯,然後替內側加上隨著時間旋轉的輪齒,使用寬度變大出場,時機比主環晚一點。
內側有了,接加來是外側。添加一個繞著主環震盪移動的半環,使用兩個頻率不同的震盪波來讓移動不那麼單調,出場則使用和主環一樣的放大和角度變大。
最後,讓我們在環上添加最晚出現的氣泡,使用 easeoutBack 出場,為了避免被其他距離場穿過我們得額外回傳一個圓距離場形作為過濾。
在圖形上添加三顆泡泡,把泡泡和過濾分別合併。
最後,先使用剃除將重疊的部分過濾,在將泡泡添加進去。
距離場的動畫就教學到這邊,剛開始盡量以圓形和扇形為主會比較好發揮,請各位自由創作吧 :D