本篇將會說明動畫屬性中的自訂屬性。
gsap.registerPlugin() 動畫屬性之自訂屬性
gsap.registerPlugin()：主要用來註冊 GSAP 插件
gsap.registerPlugin() 主要是用來註冊 GSAP 自已的插件。
註冊 GSAP 的 Draggable plugin，以 gsap.registerPlugin(Draggable) 引用插件。
實作方式可參考：Well in Time – 練習動畫的好選擇 – 按鈕，只留下實作出來的 codepen，這裡就不在多增加篇幅長度。
gsap.registerPlugin() 方法，name 自訂屬性名稱，init(target, value) 傳入目標結點與值
先以 gsap.registerPlugin({}) 內訂出自訂效果的名稱，透過 init(target, value) {} 內的 console.log(target, value) 就可以取得使用 to() 動畫方法在使用自訂名稱的值，這裡先以 '' (空字串) 傳入，取得的結果會是使用的 #box 元素結點與值是空字串。
1 2 3 4 5 6 | gsap.registerPlugin({ name: 'myCustomProperty', init(target, value) { console.log(target, value) } }) |
1 2 3 4 5 6 7 8 9 10 | gsap.to( '#box', { x: 100, backgroundColor: 'red', rotate: 360, duration: 3, myCustomProperty: '' } ) |
在 init(target, value) {} 之中，透過 JS 的運算子 value_1 || value_2，當前 value_1 是空字串時，此時在運算下就會把 value_2 做為預設值，這樣的方式就可以在 .to() 的方法下，透過 myCustomProperty: '' 屬性帶出預設值，傳入的值如果沒有應，就會以預設計為主，但如果有的話就會以傳入的值加上預設計傳出使用。
完整程式碼如下：
1 2 | <div id="box" class="box ml-[16px] mt-[16px] w-[50px] h-[50px] bg-blue-600 rounded-lg"></div> <div id="box2" class="box ml-[16px] mt-[16px] w-[50px] h-[50px] bg-blue-600 rounded-lg"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | gsap.registerPlugin({ name: 'myCustomProperty', init(target, value) { // console.log('target', target // 使用的元素節點 // console.log('value', value) // 傳入的值，不一定是 GSAP 動畫值也可是其他值 gsap.to( target, { // 當傳入的伹下的屬性是空值時，會以 || 後方的值做為預設傳出使用 x: value.x || 100, backgroundColor: value.backgroundColor || 'red', rotate: value.rotate || 360, duration: value.duration || 3, } ) } }) gsap.to( '#box', { myCustomProperty: '', // 傳空字串，會使用的是自訂欺的預設值 } ) gsap.to( '#box2', { myCustomProperty: { backgroundColor: 'black', }, // 傳空物件指定單一個背景色的值，以背景色黑色取代預設值的藍色 } ) |
See the Pen GSAP – registerPlugin 自訂動畫屬性 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
gsap.registerEffect() 動畫屬性之自訂屬性
另外找到以 gsap.registerEffect() 的做法，可讀性會較好。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | gsap.registerEffect({ name: "myCustomProperty", defaults: { x: 100, backgroundColor: 'red', rotate: 360, duration: 3, }, // 在這個 defaults 設置，可通過下方的 config 參數獲取到進行設置 effect: (target, config) => { return gsap.to( target, { // 當 config 傳入的屬性是空值時，以 defaults 訂出的預設傳出使用 x: config.x, backgroundColor: config.backgroundColor, rotate: config.rotate, duration: config.duration } ); } }); // 以 effects 啟用，後方以 . 接 myCustomProperty 的自訂動畫屬性的名稱使用 gsap.effects.myCustomProperty("#box"); gsap.effects.myCustomProperty( "#box2", { backgroundColor: 'black', } ); |
See the Pen GSAP – registerEffect 自訂動畫屬性 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
資料出處：