基本方法

to:对属性进行绝对值计算,最终的运行结果即是设置的属性值,即改变到某个值

by:对属性进行相对值计算,最终的运行结果是设置的属性值加上开始运行时节点的属性值,即变化值

cc.tween(this.node)    .to(1, { position: cc.v2(100, 100), angle: -90 })    .by(1, { scale: 2 })    .start();

贝塞尔曲线:

     cc.tween(this.node)

    .bezierTo(3, cc.v2(0, cc.winSize.height / 2), cc.v2(300, -cc.winSize.height / 2), cc.v2(300, 100))    .start();

· 支持缓动任意对象的任意属性

let obj = { a: 0 }cc.tween(obj)    .to(1, { a: 100 })    .start();

· 变速 easing

cc.tween(this.node)    .to(1, { scale: 2, position: cc.v2(100, 100), angle: -90 }, cc.easeIn(3.0))    .start();

· 自定义 progress​​​​​​​

// 对所有属性自定义 progresscc.tween().to(1, { scale: 2, rotation: 90 }, {    progress: (start, end, current, ratio) => {        return start + (end - start) * ratio;    }})
// 对单个属性自定义 progresscc.tween().to(1, {    scale: 2,    position: {        value: cc.v3(),        progress: (start, end, current, t) => {            // 注意,传入的属性为 cc.Vec3,所以需要使用 Vec3.lerp 进行插值计算            return start.lerp(end, t, current);        }    }})

· 插入其他的缓动到队列中​​​​​​​​​​​​​​​​​​​​​

let scale = cc.tween().to(1, { scale: 2 });let rotate = cc.tween().to(1, { angle: -90 });let move = cc.tween().to(1, { position: cc.v3(100, 100, 100) });
// 先缩放再旋转cc.tween(this.node).then(scale).then(rotate);// 先缩放再移动cc.tween(this.node).then(scale).then(move);

then 不仅可以插入 tween,还可以插入 action,比如跳跃(jumpTo)等​​​​​​​

let jumpTo = cc.jumpTo(2, cc.v2(300, 300), 50, 4);cc.tween(this.node)    .then(jumpTo)    .start();

· 并行执行缓动​​​​​​​

let t = cc.tween;t(this.node)    // 同时执行两个 cc.tween    .parallel(        t().to(1, { scale: 2 }),        t().to(2, { position: cc.v2(100, 100) })    )    .call(() => {        console.log('All tweens finished.');    })    .start();

· 回调​​​​​​​

cc.tween(this.node)    .to(2, { angle: -90 })    .to(1, { scale: 2 })    // 当前面的动作都执行完毕后才会调用这个回调函数    .call(() => { cc.log('This is a callback'); })    .start();

· 重复执行

repeat:重复指定次数​​​​​​​

cc.tween(this.node)    .by(1, { scale: 1 })    // 对前一个 by 重复执行 10次    .repeat(10)    // 最后 node.scale === 11    .start();

repeatForever:无限重复​​​​​​​

cc.tween(this.node)    .by(1, { scale: 1 })    .repeatForever()    .start();

union: 

repeat/repeatForever 函数只会将前一个 action 作为作用对象,如果希望重复多个 action 话,可是使用 union(将之前所有的 action 整合为一个 action)​​​​​​​

cc.tween(this.node)    .by(2, { angle: -90 })    .by(1, { scale: 2 })    .union()    .repeat(10)    .start();

· 延迟执行​​​​​​​

cc.tween(this.node)    // 延迟 1s    .delay(1)    .to(1, { scale: 2 })    // 再延迟 1s    .delay(1)    .to(1, { scale: 3 })    .start();

· 暂停/恢复/停止

暂停本节点上所有正在运行的动作

this.node.pauseAllActions();

恢复运行本节点上所有暂停的动作

this.node.resumeAllActions();

停止当前 tween

tween.stop();

停止所有指定对象的缓动

cc.Tween.stopAllByTarget(this.node);

停止所有指定标签的缓动cc.Tween.stopAllByTag(100);

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

tween扩展中途暂停、播放速率

cocos 提供的暂停/恢复只能控制节点上所有的动作,所以这里通过对 tween 扩展,实现单个 tween 的控制

tween 在 start 后,会返回的是一个 _finalAction,通过对其属性的读写,可以实现一些想要的功能

下面的代码中扩展了 tween 的暂停、恢复、倍速播放、总时长、已进行时长、跳转到指定时间、根据标签暂停、恢复​​​​​​​

cc.ActionInterval.prototype.step = function (dt) {    if (this.paused) {        return;    }
    if (this._firstTick && !this._goto) {        this._firstTick = false;        this._elapsed = 0;    } else {        this._elapsed += dt;    }
    let t = this._elapsed / (this._duration > 0.0000001192092896 ? this._duration : 0.0000001192092896);    t = (1 > t ? t : 1);    this.update(t > 0 ? t : 0);
    //Compatible with repeat class, Discard after can be deleted (this._repeatMethod)    if (this._repeatMethod && this._timesForRepeat > 1 && this.isDone()) {        if (!this._repeatForever) {            this._timesForRepeat--;        }        this.startWithTarget(this.target);        this.step(this._elapsed - this._duration);    }};
/** * 暂停 * @example tween.pause(); */cc.Tween.prototype.pause = function () {    this._finalAction.paused = true;};
/** * 恢复 * @example tween.resume(); */cc.Tween.prototype.resume = function () {    this._finalAction.paused = false;};
/** * 倍速播放 * @param speed 倍速 * @example tween.speed(2); */cc.Tween.prototype.speed = function (speed) {    this._finalAction._speedMethod = true;    this._finalAction._speed = speed;}
/** * 获取持续时间 * @example let duration = tween.duration(); */cc.Tween.prototype.duration = function () {    return this._finalAction._duration;}
/** * 获取已经进行的时间 * @example let elapsed = tween.elapsed(); */cc.Tween.prototype.elapsed = function () {    return this._finalAction._elapsed;}
/** * 跳转到指定时间 * @param time 时间(秒) * @example tween.goto(2); */cc.Tween.prototype.goto = function (time) {    this._finalAction._goto = true;    this._finalAction._elapsed = time;}
cc.ActionManager.prototype.pauseByTag = function (tag, pause) {    if (tag === cc.Action.TAG_INVALID) {        cc.logID(1002);    }
    let hashTargets = this._hashTargets;    for (let name in hashTargets) {        let element = hashTargets[name];        for (let i = 0, l = element.actions.length; i < l; ++i) {            let action = element.actions[i];            if (action && action.getTag() === tag) {                action.paused = pause;                break;            }        }    }}
/** * 根据标签暂停动作 * @param tag tween的标签 * @example cc.Tween.pauseByTag(100); */cc.Tween.pauseByTag = function (tag) {    cc.director.getActionManager().pauseByTag(tag, true);}
/** * 根据标签恢复动作 * @param tag tween的标签 * @example cc.Tween.resumeByTag(100); */cc.Tween.resumeByTag = function (tag) {    cc.director.getActionManager().pauseByTag(tag, false);}

因为是自己扩展的方法,creator.d.ts 中没有相关声明,可以利用 vs code 来自动添加相关声明

 

 

Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐