使用 GSAP 時，可以設定 yoyo:true，讓補間動態到回到原點

這是一段 easeOut 的時間/數值圖

動態感覺為：

問題：加上 yoyo: true 時，時間/數值的曲線是哪種？

選項1： 有點像海浪的形狀

選項2： 平整的山形

答案： 選項2看起來很平整，很棒

重複播放時的動態可能跟希望的不太一樣：

[ Demo ]

gsap.to(box1, {
    duration:3, 
    y:app.screen.height / 2 - 100,
    repeat:-1, // 一直 loop
    yoyo: true, // loop 時倒帶    
    ease:Strong.easeIn
});

好像有個頓點的感覺，是怎麼來的?

將 時間/數值圖 延伸並觀察兩端：

剛剛的答案：

• 將圓圈標起來的部分放大來看：
  會發現一端非常平整，另一端非常銳利
  這也是動態看起來會有明顯頓點的原因

反而是另一種圖，雖然左右是不對稱的，但是上下兩端的形狀是對稱的

gsap 可設定 yoyoEase，讓補間動態在 yoyo 時使用不同的 ease

實作幾種 ease、yoyoEase 比較：

• 左邊：yoyo: true, ease:Strong.easeIn
• 中間：yoyo: true, ease:Strong.easeIn, yoyoEase:Strong.easeOut
• 右邊：yoyo: true, ease:Strong.easeOut, yoyoEase:Strong.easeOut

[ Demo ]

從結果可知：

• 中間 yoyo: true 的時候，repeat 的 ease 是反過來的 easeOut，因此產生頓點的感覺

• 將 yoyoEase 與 ease 相同的 ease type (此例為 Strong.easeOut)，可避免頓點產生

有不用另外設定 yoyoEase 的 ease type 嗎?

如果都用 inOut 時，時間/數值圖會是上下與左右都是對稱的

加上 yoyo:true、repeat: -1，整體的 時間/數值圖 是漂亮的波形

雖然不會有明顯頓點的情形，
但中間那段速度最快，不一定是想表現的動態感

今日心得：

• 此為 GSAP / TweenMax 特性，使用在 HTML/CSS、PixiJS 時皆會發生，
  遇到時再留意即可。
• GSAP 的 ease 與 yoyoEase 可為不同 ease type，可視需求調整。