cocoscreator中tween详细用法

本文介绍了Cocos2d-JS中的Tween库,包括如何对属性进行绝对值和相对值计算,使用贝塞尔曲线,支持对象的任意属性缓动,变速easing,自定义进度函数,以及各种操作如并行、延迟、重复和暂停等。
摘要由CSDN通过智能技术生成

基本方法:
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
// 对所有属性自定义 progress
cc.tween().to(1, { scale: 2, rotation: 90 }, {
    progress: (start, end, current, ratio) => {
        return start + (end - start) * ratio;
    }
})
// 对单个属性自定义 progress
cc.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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值