》Tween
今天要講簡單的 Tween 效果，可以配合使用者點擊或滑鼠 hover 時，去執行動畫。

》Javascript 內容

scene.create = function() {
    // 把 man 物件的 origin 設在中間正下方，並設為可互動
    this.man = this.add.sprite(50, 310, 'man', 0).setOrigin(0.5, 1).setInteractive()

    // 對於 man 增加 tweens 動畫
    this.man.scaleTween = this.tweens.add({
        targets: this.man,
        scaleX: 1.2,
        scaleY: 1.2,
        duration: 1000
    })
}

上面一開始載入完時，就會自動執行動畫，所以可以多添加 paused: true

this.man.scaleTween = this.tweens.add({
    targets: this.man,
    scaleX: 1.2,
    scaleY: 1.2,
    duration: 1000,
    paused: true
})

我們可以點擊 man，增加互動，並啟動動畫

this.man.on('pointerdown', () => {
    this.man.scaleTween.restart()
})

tween 動畫，可以再添加 yoyo: true，來看看效果如何

this.man.scaleTween = this.tweens.add({
     targets: this.man,
     scaleX: 1.2,
     scaleY: 1.2,
     duration: 1000,
     paused: true,
     yoyo: true
})

》結論
今天我們學到了簡單的 tween 效果，大家可以試試看，如果 hover 變更物件的透明動畫，該怎麼做呢？

今天就先到這裡，我們明天見。