cocos creator缓动系统

官方文档：在 Cocos Creator 中使用缓动系统（cc.tween）

首先看一下效果

在这里插入图片描述

cocos中制作动效需要用到缓动系统，使用cc.tween并传入一个节点使其动起来。
举例：

cc.tween(this.picNode)
    .to(1, { scale: 2 })
    .start();

传入的this.picNode就是需要动起来的节点
.to后面跟着的第一个数字为运动时长，单位为秒。
时间后的大括号里包含节点的一些属性，当使用to时，则是“到达目标属性”；而当使用by时，则是“相对当前属性”。
to和by的区别可以在moveBtn的示例中看出来。
注意不要掉了.start()，没有会直接不执行。
完整代码

其中picNode绑定的就是右侧的cocos 图标节点。
xxBtn就是该按钮的绑定事件，还是比较好理解的，在此就不过多解释。

const { ccclass, property } = cc._decorator;

@ccclass
export default class TweenScene extends cc.Component {
    @property(cc.Node)
    picNode: cc.Node = null;

    protected onLoad(): void {
        this._resetPosition();
    }

    private scaleBtn() {
        this.picNode.stopAllActions();
        this._resetPosition();
        cc.tween(this.picNode)
            .to(1, { scale: 2 })
            .start();
    }

    private moveBtn() {
        this.picNode.stopAllActions();
        this._resetPosition();
        cc.tween(this.picNode)
            .to(1, { position: cc.v2(300, 0) })
            .by(1, { position: cc.v2(0, 50) })
            .start();
    }

    private rotateBtn() {
        this.picNode.stopAllActions();
        this._resetPosition();
        cc.tween(this.picNode)
            .to(1, { angle: 180 })
            .start();
    }

    private _resetPosition() {
        this.picNode.scale = 1;
        this.picNode.setPosition(200, 0);
        this.picNode.angle = 0
    }

    private backBtn() {
        cc.director.loadScene("HelloScene")
    }
}

要注意，cc.tween是异步的，即执行动画的同时，也会接着执行下面的代码，当有些代码需要在动画执行完毕后再执行时，需要用上.call()。
例如：
在call()中传入一个函数，在执行完上面的动画后执行函数的内容。

这里需要注意this的指向~箭头函数不影响this指向，建议使用。

    private scaleBtn() {
        this.picNode.stopAllActions();
        this._resetPosition();
        cc.tween(this.picNode)
            .to(1, { scale: 2 })
            .call(() => {
                this.picNode.scale = 0.5;
            })
            .start();
    }