iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

Phaser 幫我撐個 30 天系列 第 14

Tween [ 2 / 2 ]

》Tween
昨天我們提到的 hover 效果,在 Phaser 上,要怎麼做出 css hover 改變狀態的動畫呢,今天我們就來試試看吧!

》Javascript 內容
使用 pointerover 與 pointerout 來對 alpha 動畫做控制

scene.create = function() {
    .....
    // 設為可互動
    this.man = this.add.sprite(50, 255, 'man', 0).setInteractive()

    // 對於 man 增加 tweens 動畫
    this.man.alphaTween = this.tweens.add({
        targets: this.man,
        alpha: 0.8,
        duration: 200,
        paused: true
    })

    this.man.on('pointerover', () => {
        this.man.alphaTween.restart()
    })

    this.man.on('pointerout', () => {
        this.man.alpha = 1
    })
}

現在有個存在的問題,當滑鼠快速滑進滑出,因為 alphaTween 還沒有執行結束,所以 alpha 還在執行動畫,但 pointerout 老早已經 alpha = 1,這時就會有半透明的問題產生。

this.man.on('pointerout', () => {
    this.man.alphaTween.stop()			// 這時要先把動畫停掉
    this.man.alpha = 1
})

》結論
今天我們學到如何使用 pointerover 與 pointerout,以及動畫結束時,應該先把動畫停掉,再處理後續的事情。


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


上一篇
Tween [ 1 / 2 ]
下一篇
Day 15:Text
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言