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

前言

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

動畫屬性之自訂屬性

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

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

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

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

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

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 來使用這三個屬性

gsap.registerPlugin({
  name: 'myCustomProperty',
  init(target, value) {
    gsap.to(target, {
      x: value.x,
      backgroundColor: value.backgroundColor,
      rotate: value.rotate,
      duration: value.duration
    })
  }
})

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


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

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

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

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

前言

動畫屬性之自訂屬性

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

動畫屬性之自訂屬性

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

(17)前端好好玩用 GSAP 做一個特效 - ScrollTrigger

(16)前端好好玩用 GSAP 做一個特效 - 註冊 Plugins

(15)前端好好玩用 GSAP 做一個特效 - Plugins

(14)前端好好玩用 GSAP 做一個特效 - 跑馬燈

分享這篇文章

留言