[22- Pixi教學] 按鈕動態- Tween

GreenSock

下面是GSAP官網對這個產品的說明：

Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.

因為GSAP可以使用GPU加速，因此在執行速度效能上會勝過jQuery，也因為它是很單純的去漸變改變某個屬性，所以我們可以很容易的使用在任何我們可操控的屬性上去製作動畫效果，是一個十分強大好用的工具。

要嘗試動畫效果的樣式和程式寫法，官網有提供GSDevTools可供我們使用，可以更容易的編輯我們要的動畫樣式

TweenLite

TweenLite與TweenMax是當我們只有一個Tween時可使用的，例如：把一個物件從左邊移到右邊。

TweenLite.to(".grey", 1, {x: 700, rotation: 360, delay:3, id:"grey"})

而這兩個類別的差異在於TweenMax提供更多的參數和方法可供我們使用

TimelineLite

TimelineLite和TimelineMax則是當我們要做一系列的Tween時可使用的，例如：某按鈕按下去要先放大再縮小再彈回來。

var tl = new TimelineMax({repeat:2, repeatDelay:1});
tl.add( TweenLite.to(element, 1, {scale:0.9}) );
tl.add( TweenLite.to(element, 1, {scale:1.1}) );
tl.add( TweenLite.to(element, 1, {scale:1}) );

而TimelineLite與TimelineMax的差異也是TimelineMax提供更多方法和參數可以使用。

為按鈕加Tween效果

首先我們要在專案裡加入使用gsap
npm install gsap
以及@types/gsap
npm install –save @types/gsap
設定在build的時後要複製TweenLite.min.js及TimelineMax.min.js到libs裡(gulpfile.js)

gulp.task('libs', () => {
    return gulp
        .src([
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/jquery/dist/jquery.min.map',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/systemjs/dist/system-polyfills.js.map',
            'node_modules/systemjs/dist/system.js',
            'node_modules/systemjs/dist/system.js.map',
            'node_modules/pixi.js/dist/pixi.min.js',
            'node_modules/pixi.js/dist/pixi.min.js.map',
            'node_modules/howler/dist/howler.core.min.js',
            'node_modules/gsap/src/minified/TweenLite.min.js',
            'node_modules/gsap/src/minified/TimelineMax.min.js '
        ])
        .pipe(gulp.dest("build/lib"));
});

並在index.js裡加上

  <script src="lib/TweenLite.min.js"></script>
  <script src="lib/TimelineMax.min.js"></script>

接著修改ButtonBase.ts的內容如下：

import Sprite = PIXI.Sprite;
import {Loader} from "../core/Loader";
//add gasp
declare const TweenLite;
declare const TimelineMax;

export class ButtonBase extends Sprite{

    constructor(_id:string, textureID:string, _x:number, _y:number) {
        super();
        this.texture = Loader.resources[_id].textures[textureID];
        this.interactive = true;
        this.buttonMode = true;
        this.x = _x;
        this.y = _y;
        this.anchor.set(0.5);

        //按下效果
        this.on("mousedown", this.mouseDownEffect.bind(this));
        this.on("mouseup", this.mouseUpEffect.bind(this));
        this.on("mouseout", this.mouseOutEffect.bind(this));
        this.on("touchstart", this.mouseDownEffect.bind(this));
        this.on("touchend", this.mouseUpEffect.bind(this));

        this.on("mouseup", this.trigger.bind(this));
        this.on("touchend", this.trigger.bind(this));
    }
    public trigger(){
    }
    private _enable:boolean = true;
    public set enable(v:boolean){
        this.interactive = v;
        this.buttonMode = v;
        this.alpha = v ? 1:0.5;
    }
    //滑鼠按下時會先縮小
    public mouseDownEffect():void{
        let animTweenTimeline = new TimelineMax();
        animTweenTimeline.add(new TweenLite(this, 0.2,
            {
                "scaleX": 0.9,
                "scaleY": 0.9
            }));
        animTweenTimeline.play();
    }
    //滑鼠移開時先放大再縮小
    public mouseUpEffect():void{
        let animTweenTimeline = new TimelineMax();
        animTweenTimeline.add(new TweenLite(this, 0.1,
            {
                "scaleX": 1.1,
                "scaleY": 1.1
            }));
        animTweenTimeline.add(new TweenLite(this, 0.1,
            {
                "scaleX": 1,
                "scaleY": 1
            }));
        animTweenTimeline.play();
    }
    set scaleX(v:number){
        this.scale.x = v;
    }
    set scaleY(v:number){
        this.scale.y = v;
    }
    public mouseOutEffect():void{
        this.scale.set(1,1);
    }
}

今日成果

線上成果展示：http://claire-chang.com/ironman2018/1106/
今日成果下載：ironman20181106

Claire's Blog