(8)前端好好玩用 GSAP 做一個特效 - 特殊屬性

前言

前面有提到 GSAP 基本上可以替你想得到的 CSS 屬性做動畫效果之外，其實還有一些特殊屬性可以使用，所以這一篇就來講一下 GSAP 的特殊屬性。

特殊屬性

其實前面文章中，就已經有使用到一些特殊屬性

gsap.to('#box', {
  x: 100,
  duration: 1,
  repeat: -1,
  yoyo: true
})

那麼上面有哪些是特殊屬性呢？基本上只要是你沒有在 CSS 中看過的屬性，都可以稱之為特殊屬性，因此上方的範例程式碼中以下都是特殊屬性

• x
• duration
• repeat
• yoyo

那麼特殊屬性其實非常的多，這一篇系列不太可能一一介紹，所以這邊就只介紹一些常用的特殊屬性，如果有需要的話，可以參考 GSAP 官方文件。

但是這邊有一件事情要提一下，x 嚴格來說並不是特殊屬性，因為它其實是 transform: translateX() 的縮寫，所以這邊就不會再介紹了，其中也包含 y、z 都是 transform: translateY()、transform: translateZ() 的縮寫唷。

接著就讓我們稍微認識一下常見屬性 duration、repeat、yoyo 吧！

duration

duration 是動畫執行的持續時間，這個單位是秒，所以假設你設置成一秒的話，代表動畫會在一秒之內完成，而如果你設置成 0.x 秒的話，就代表動畫會在 0.x 秒之內完成。

請注意！這個屬性如果你沒有填寫的話，預設值會是 0.5 秒唷。

gsap.to('#box', {
  x: 100,
  repeat: -1,
  yoyo: true
})

repeat

repeat 簡單來講就是說明這個動畫要重複幾次的意思，假使你設置為 -1 代表著這個動畫會無限重複，如果你設置為 0 就不會重複，但如果你設置為 5，就代表著這個動畫會重複 6 次。

gsap.to('#box', {
  x: 100,
  duration: 1,
  repeat: 5,
})

這時候你可能會好奇

「為什麼是重複 6 次呢？」

這是因為動畫起始第一次也會被列入計算，因此總合才會是 6 次。

yoyo

yoyo 這個屬性非常有趣，它主要是用來控制動畫是否要往返的，如果你設置為 true，代表著動畫會往返，如果你設置為 false，代表著動畫不會往返，什麼是往回呢？簡單來講就是當動畫執行完畢後會回到初始狀態而不會保留在最後狀態。

這邊先來看 yoyo 設置為 false 的情況：

gsap.to('#box', {
  x: 100,
  duration: 1,
  repeat: -1,
  yoyo: false
})

你可以看到當動畫執行完畢後，會直接消失從終點消失，並重新從起始點重新開始。

但若是設置為 true 的話？

gsap.to('#box', {
  x: 100,
  duration: 1,
  repeat: -1,
  yoyo: true
})

你會發現當動畫執行完畢後，會回頭跑回起始點，並重新從起始點重新開始，整體動畫就會有一種流暢感。

當然還有其他特殊屬性，但特殊屬性實在太多，所以這一篇就先介紹到這邊，我們下一篇再聊。