(6)前端好好玩用 GSAP 做一個特效 - 自訂屬性

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
前一章節認識了動畫屬性中的 CSS 屬性，接著這一篇將會認識動畫屬性中的自訂屬性。

前言

前一章節認識了動畫屬性中的 CSS 屬性，接著這一篇將會認識動畫屬性中的自訂屬性。

動畫屬性之自訂屬性

自訂屬性是在指我們可以在動畫屬性中使用我們自己定義的屬性，並且在動畫中使用。

那麼首先先讓我們看一下基本的範例：

1
gsap.to('.box', { x: 100, backgroundColor: 'red', rotate: 360 , duration: 3 })

那麼我們要如何將它變成自訂屬性呢？這邊我們會使用到 gsap.registerPlugin() 這個方法，這個方法可以讓我們在動畫屬性中使用自訂屬性。

首先我們先定義一個自訂屬性：

1
2
3
4
5
6
gsap.registerPlugin({
  name: 'myCustomProperty',
  init(target, value) {
    console.log(target, value)
  }
})

裡面的 name 屬性是預計我們將會直接在動畫屬性中使用的名稱，而 init 則是當我們在動畫屬性中使用時，會觸發的方法。

接著我們在動畫屬性中使用：

1
gsap.to('.box', { x: 100, backgroundColor: 'red', rotate: 360 , duration: 3, myCustomProperty: 'test' })

你可以看到 Console 輸出了我們的目標元素與自訂屬性的值。

那麼我們就可以利用這個方法來做一些自訂的動畫屬性，舉例將 x、backgroundColor、rotate 這三個屬性做一個組合，讓我們可以在動畫屬性中使用 myCustomProperty 來使用這三個屬性

1
2
3
4
5
6
7
8
9
10
11
gsap.registerPlugin({
  name: 'myCustomProperty',
  init(target, value) {
    gsap.to(target, {
      x: value.x,
      backgroundColor: value.backgroundColor,
      rotate: value.rotate,
      duration: value.duration
    })
  }
})

接著我們在動畫屬性中使用：

1
2
3
4
5
6
7
8
9

gsap.to('.box', {
  myCustomProperty: {
    x: 100,
    backgroundColor: 'red',
    rotate: 360,
    duration: 3
  }
})

基本上很難看出使用自訂屬性的好處，但是當我們要做一些複雜的動畫時，就可以利用自訂屬性來做一些複雜的動畫，因此這邊就不額外花時間介紹了，僅僅只是說明一下如何使用自訂屬性。

那麼這一篇就到這邊結束，我們這一篇見。