動態設定 Animation
BRICKS TOOLS avatar
作者:BRICKS TOOLS
一週前已更新

Animation 主要是用來設定元件動態的方法,可以針對元件的透明度、XY位置、XY和整體的縮放以及XY和整體的旋轉進行動態的設定。和 Standby 的進場動態不同的是,Animation 可以經由各種元件的事件觸發,而 Standby 僅能於 Canvas 畫布進場時觸發。


*Compose Type Sequence 各別搭配 spring, timeing, decay 做 x 軸的來回動態效果

Animation Type

新增 Animation 並於元件中指定的方法

  • 步驟 1 [新增一組 Animation]

    點擊左方 Animation 旁的 [ + ] 一增一組動態

    根據需求選擇新增動態的類型,以下說明 Type 及 Compose Type 的差別

Type: 動態的類型

timing

根據設定的值依照 Easing 模式決定動態效果,由時間和變數線性變化的動態類型。適用於需要精準控制動態時間及延遲時間效果的動態,其中 Easing 提供了30種的效果 (詳細可參考此連結),基本適用於大部分的情況。

spring

基礎的單次彈跳物理模型,模擬現實世界彈簧的運作,可輕鬆實作流暢且自然舒適的動畫。適用於需要根據與目標的差值計算出如真實彈簧般的動態效果。

decay

以一個初始速度開始並且按一定的衰減比逐漸減慢直至停止的動態類型。可適用於無固定的目標數值,僅以速度及衰減比來演算出動態效果。

Compose Type: 決定不同的動態效果間如何串接的類型

*以下兩種類型下皆需搭配多組 timing, spring, decay 實現序列的動態或是同步播放的動態

sequence

依照順序執行一個動態組中的動畫,等待一個完成後才會再執行下一個。如果播放中的動態被中止時,後面的動態即不會繼續執行。

parallel

同時播放一個動態組中的全部動畫。默認情況下,如果有任何一組動態停止,其餘的也會被停止。

  • 步驟 2 [設定動態的內容]

    在決定設定 Type 單一動態 ( timing, spring, decay ) 或是 Compose Type 序列或同步平行動態後,各別的動態需指定需要進行動態變動的變數,在 BRICKS 中稱為 行為模式 Transformation Methods 設定。設定好以下變數後記得按下下方的 [ save ] 儲存你的設定。

    行為模式 Transformation Methods:

動態循環模式

類型

說明

Run Type

清單

  • once : 僅執行一次的動態模式

  • loop :循環播放的動態模式

Property:

模式

解說

示意動圖

opacity

設定元件透明度的變動動態,對應數值為 0~1

translate X

設定元件 X 軸的相對變動動態,對應數值為 0~N

translate Y

設定元件 Y 軸的相對變動動態,對應數值為 0~N

scale

設定元件大小縮放的變動動態,對應數值為 0~N

scale X

設定元件寬度大小縮放的變動動態,對應數值為 0~N

scale Y

設定元件高度大小縮放的變動動態,對應數值為 0~N

rotate

設定元件整體旋轉的變動動態,對應數值為 0~360

rotate X

設定元件X軸旋轉的變動動態,對應數值為 0~360

rotate Y

設定元件Y軸旋轉的變動動態,對應數值為 0~360

timing 的變數設定說明:

toValue

數值

依照指定變動的屬性設定對應的數值,如果 XY 的話是以元件座標為中心設定相對的距離,而 opacity 的話即為 0~1 。

duration

數值-毫秒

動態的持續秒數,1000為1 秒。

easing

清單

設定動態的演出方式,詳細效果可參考 easings.net

delay

數值-毫秒

設定動態演出的延遲毫秒數

spring 的變數設定說明:

*設定變數時,friction 和 tension 為一組, speed 和 bounciness 為一組,無法同時啟用,請選擇其中一組進行設定方能正常運作。

toValue

數值

依照指定變動的屬性設定對應的數值,如果 scale 的話是就是比例大小,從0.1 到 N 倍大,而 rotate 的話即為角度 0~360 。

friction

數值

*需和 tension 一起使用

設定彈簧的摩擦力,摩擦力越大則演出的動態越沒彈力,預設為7,摩擦力10時,張力在100以下都無彈性。

tension

數值

*需和 friction 一起使用

設定彈簧的張力,張力越大則越有彈性,預設為40。在摩擦力為5時,張力40仍可保持些微彈性。

speed

數值

*需和 bounciness 一起使用

設定對應屬性的變動的速度,越大則變動速度越快。預設為12

bounciness

數值

*需和 speed 一起使用

設定彈力的大小,數值越大則彈性越大。預設為8

decay 的變數說明:

velocity

數值 0-1

設定數值的初始速度,數值越靠近1時速度越快。

deceleration

數值 0.9-0.999

設定速度的衰减比例,預設為0.997,越靠近1則速度的衰减速度越慢。

  • 步驟 3 [在元件上指定動畫]

    在元件右方的屬性欄中尋找 Animation 的欄位,點擊下拉選單選擇你剛剛設定的動態。

  • 恭喜你學會動態設定的基本概念!


若需要任何幫助,歡迎點擊右下角的對話圖示詢問,我們會盡快回覆您的問題

是否回答了您的問題?