cocos creator(11)

1.动作系统

cocos里自带的封装好的系统
延时动作*

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewScript extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';


    start () {
        //动作
        //移动
        let action = cc.moveTo(2,cc.v2(200,200));//（运动时间，运动目标位置）位置也可以直接打坐标
        action = cc.moveBy(2,200,200);//以自己为原点移动输入的距离
        
        //旋转
        action = cc.rotateTo(2,100);

        //缩放
        action = cc.scaleTo(2,2);//一个数整体缩放 两个数xy方向缩放

        //跳跃
        action = cc.jumpBy(2,200,0,100,1);//秒，x，y，高度，跳几次

        //闪烁
        action = cc.blink(3,5);//三秒闪烁五次

        //淡出
        action = cc.fadeOut(3);
        //淡入
        action =cc.fadeIn(3);
        //渐变
        action = cc.fadeTo(3,100);

        //颜色
        action = cc.tintTo(3,100,30,100);//（秒，rgb）

        //执行动作
        this.node.runAction(action);
        //停止动作
        this.node.stopAction(action);//停止某个动作，括号内输入动作值
        this.node.stopAllActions();//停止所有动作

        //设置动作tag值
        action.setTag(1);
        //通过tag值暂停
        this.node.stopActionByTag(1);//通过tag来停止动作
    
        //暂停
        this.node.pauseAllActions();
        //恢复
        this.node.resumeAllActions();
    }

   

2.容器动作

瞬时动作

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewScript extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //动作
        //立刻显示
        let action = cc.show();
        //立刻隐藏
        action =cc.hide();
        //切换显示隐藏
        action = cc.toggleVisibility();

        //反转
        action = cc.flipX(true); //X轴翻转
        action = cc.flipY(true); //Y轴翻转
        
        //回调
        action = cc.callFunc(()=>{

        //执行一系列动作/队列
        let action1 = cc.fadeOut(1);
        let action2 = cc.fadeIn(1);
        //容器动作
        let seq = cc.sequence(action1,action2);
        let seq1 = cc.sequence(action1,action2,cc.callFunc(()=>{ //执行完两个动作后再回调

        }));
        //重复动作
        let repeat = cc.repeat(seq,3);//（重复动作，次数）
        repeat = cc.repeatForever(seq);//一直重复
        
        //并列动作
        let move = cc.moveTo(3,100,100);
        let color = cc.tintTo(3,100,100,20);
        let spawn = cc.spawn(move,color);//move和color并行执行
        
        this.node.runAction(seq);
        });
    
    }

    // update (dt) {}
}

3.动画系统

添加组件—>其他组件—>Animation

双击属性列表里的属性进入对动作速度的修改

添加人物动画
添加人物动画，在属性列表 Add Property中点击cc.Sprite.spriteFrame再把一组图片拉到对应帧 需要循环设置为loop

一般速度调为12帧每秒

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewScript extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //获取动画组件
        let ani = this.getComponent(cc.Animation);    
        
        //播放动画
        ani.play("bird");

        //暂停播放
        ani.pause("bird");

        //恢复播放
        ani.resume("bird");

        //停止播放
        ani.stop("bird");
    }
    
    

    // update (dt) {}
}