creator tween复杂用法

ゞ浴缸里的玫瑰 2022-12-30 08:25 360阅读 0赞

整理一下tween 复杂用法

tween 动画默认是顺序执行的，所以不用考虑顺序问题

1：并行动画（同时执行）

//角色移动动画
        roleMove(node) {
            return new Promise((res, rej) => {
                cc.tween(node)
                    .parallel(
                        cc.tween()
                            .delay(0.8)
                            .call(() => { res()})
                        ,
                        cc.tween()
                            .to(1, { position: cc.v2(0, 0) })
                            .call(() => {
                                node.removeFromParent();
                                node.destroy();
                            })
                    )
                    .start()
            })
        },

在parallel 执行多个动画 用 逗号隔开，官方说明 好像可以用  结构数组的方法带入 ...arr 还是直接带入数组 需要自己测试

2：重复执行

cc.tween(this.qipanNode)
                .repeatForever(
                    cc.tween().by(1.5, { position: cc.v2(0, 10) }, { easing: 'easeInOut' })
                        .by(1.5, { position: cc.v2(0, -10) }, { easing: 'easeInOut' })
                )
                .start()

3：同时修改多个属性（这个相对简单）

cc.tween(node)
                .to(0.5,{opacity:255,scale:2})
                .call(()=>{
                    
                    
                })
                .start()

4：停止 继续 tween（暂时写的简单的旋转暂停）

if (type) {
                cc.tween(this.iconSprite.node)
                    .repeatForever(
                        cc.tween().by(3, { angle: -180 })
                            .by(6, { angle: -360 })
                    )
                    .start()
            } else {
                this.iconSprite.node.stopAllActions();
            }

5：使用 easing （弹动）

this.labelNode.setScale(0.2)
            this.labelNode.active = true;
            cc.tween(this.labelNode)
                .to(0.5,{scale:1}, { easing: 'elasticOut'})
                .delay(0.8)
                .start()

6：持续旋转

cc.tween(this.fzNode1)
                .repeatForever(
                    cc.tween().by(3, { angle: -180 })
                        .by(6, { angle: -360 })
                )
                .start()
            cc.tween(this.fzNode2)
                .repeatForever(
                    cc.tween().by(3, { angle: 180 })
                        .by(6, { angle: 360 })
                )
                .start()

7：翻转动画（foreach实现多个节点同时翻转）

arr.forEach(node=>{
    //翻转时禁止点击
                node.getComponent(cc.Button).interactable = false;
                let icon = node.getChildByName('icon');
                let back = node.getChildByName('back');
                back.active = true;
                icon.active = true;
                cc.tween(node)
                    .to(0.2,{scaleX:0.01})
                    .call(()=>{
      /*这里我直接复制的代码 根据当前显示
                            面来隐藏背面
    */
                        if(this.skillsPageType == 1){
                            back.opacity = 0;
                            back.active = false;
                            icon.opacity = 255;
                        }
                        if(this.skillsPageType == 2){
                            icon.opacity = 0;
                            icon.active = false;
                            back.opacity = 255;
                        }
                    })
                    .to(0.2,{scaleX:1})
                    .call(()=>{
                        //翻转结束 可以点击
                        this.isSwitchIng = false;
                        node.getComponent(cc.Button).interactable = true;
                    })
                    .start()
            })

8：简单盖章效果

//this.spriteNode 需要盖下的节点
     //this.bgNode 整体
    
    this.spriteNode.opacity = 0;
                this.spriteNode.active = true;
                this.spriteNode.setScale(5);
                cc.tween(this.spriteNode)
                    .to(0.3, { scale: 1, opacity: 255 }, { easing: 'easeInOut' })
                    .call(() => {
                        cc.tween(this.bgNode)
                            .to(0.1, { scale: 0.95 })
                            .to(0.1, { scale: 1 }, { easing: 'bounceInOut' })
    
                            .start();
                    })
                    .start();

9：单个节点的倒计时（独立倒计时）

同节点内多个倒计时 如果关闭一个会导致全部关闭 所以利用tween来实现针对节点的独立倒计时

landPlanting(node, item) {
          
            let text = node.getChildByName('text');
            text.active = true;
            node.matureCountDown = item.matureCountDown;
            text.getComponent(cc.Label).string = `${node.matureCountDown}`;
    
            if (item.matureCountDown > 0) {
                node.stopAllActions();
                cc.tween(node)
                    .repeatForever(
                        cc.tween().delay(1)
                            .call(() => {
                                if (node.matureCountDown <= 0) {
                                    this.harvestNode(node)
                                }
                                node.matureCountDown--;
                                text.getComponent(cc.Label).string = `${node.matureCountDown}`;
                            })
                    )
                    .start()
                
            } else {
                this.harvestNode(node)
            }
        },

harvestNode中写的就是 stopAllActions 和初始化的方法

以后碰到复杂动画补齐语法。