Cocos creator 动作系统

news2024/11/22 14:44:19

动作系统简介

是用于控制物体运动的一套系统，完全依赖代码进行实现，动态调节节点的移动。

移动

cc.moveTo 移动到某个坐标（x,y）

        //1秒时间内，移动到0,0
        let action1 = cc.moveTo(1,0,0)
        this.node.runAction(action1)

cc.moveBy 在原坐标的基础上加上（x,y）

        //1秒内，相对位置移动500,500
        let action = cc.moveBy(1,500,500)
        this.node.runAction(action)

旋转

cc.rotateTo 旋转到某个角度

        //1秒内，顺时针旋转45度
        let action = cc.rotateTo(1,45)
        this.node.runAction(action)

cc.rotateBy 相对于当前，旋转某个角度
顺时针旋转为正数

缩放

scaleTo缩放到指定比例
scaleBy缩放一定的比例

        //缩放到一定比例
        //1秒内，宽高缩放0.5倍
        let action = cc.scaleTo(1,0.5,0.5)
        this.node.runAction(action)

跳跃

jumpTo跳跃到指定位置
jumpBy

        //1秒内，原地跳跃1次，高度100
        let action = cc.jumpBy(1,0,0,100,1)
        this.node.runAction(action)

偏斜

skewTo 偏斜到某个角度
skewBy 相对当前偏斜一定角度

        //1秒内，x方向偏斜10度，y不变
        let action = cc.skewTo(1,10,0)
        this.node.runAction(action)

在这里插入图片描述

贝塞尔移动

贝塞尔3个点，组成一个数组
bezierTo
bezierBy

        let height = 1920
        let bezier = [cc.v2(0, height / 2), cc.v2(300, -height / 2), cc.v2(300, 100)];
        let action = cc.bezierTo(2, bezier);
        this.node.runAction(action)

闪烁

基于透明度的闪烁（0-255），blinks闪烁次数
blink(duration: number, blinks: number)

        //2秒内，闪烁10次
        let action = cc.blink(2,10)
        this.node.runAction(action)

透明度，渐隐，渐显

fadeTo(duration: number, opacity: number) 透明度动态调节
fadeIn 渐显
fadeOut 渐隐

        //1秒内，透明度变为125
        let action1 = cc.fadeTo(1,125)
        this.node.runAction(action1)

        //1秒内，逐渐显示，0变成255
        let action2 = cc.fadeIn(1)
        this.node.runAction(action2)

        //1秒内，逐渐消失
        let action3 = cc.fadeOut(1)
        this.node.runAction(action3)

变色

tintTo(duration: number, red: number, green: number, blue: number)

        //1秒内，变成红色
        let action = cc.tintTo(1,255,0,0)
        this.node.runAction(action)

在这里插入图片描述

以上是一定时间执行的动作ActionInterval

以下是瞬发执行的动作ActionInstant

显示/隐藏

cc.show() 显示
cc.hide() 隐藏
cc.toggleVisibility() 显示隐藏状态切换

翻转

flipX(flip: boolean) 水平方向翻转，flip是否翻转
flipY 竖直方向翻转

            this.moveX = this.x2 - this.x1
            //人物的转向
            if (this.moveX < -10) {
                this.player.node.runAction(cc.flipX(true))
            } else if (this.moveX > 10) {
                this.player.node.runAction(cc.flipX(false))
            }

定位

place(pos: Vec2|number, y?: number) 瞬移到某个位置

动作控制

runAction 执行动作
stopAction 停止动作
stopAllAction 停止所有动作
action.setTag(tag: number) 设置动作标签
stopActionByTag 停止指定标签的动作
pauseAllActions 暂停所有动作
resumeAllActions 恢复所有动作

动作容器

创建动作序列
var seq = cc.sequence(act1, act2); 如果要在两个action中间加入间隔时间，则使用cc.delayTime产生的ActionInterval对象
重复执行动作
let repeat = cc.repeat(action,times)
let repeat = cc.repeatForver(action)
并列执行多个动作
let spawn = cc.spawn(a1,a2…)

缓动动作

easeIn
easeOut
easeInOut 先快后慢
action.easing(cc.easeIn(3))//设置缓动动作，加速运动
还有更多的ease方法，可以看API文档

Tween对象

Tween代替了原来的Action
使用链式代码创建一个动作序列
支持与Action的混用

        cc.tween(this.node)
            //2秒移动到(500,500)，同时旋转180度，同时增加一个缓动动画
            .to(2, {x: 500, y: 500, angle: 180}, cc.easeInOut(2))
            //以上动作完成后等待2秒
            .delay(2)
            //以上完成后的回调
            .call(() => {
                console.log('回调');
            })
            //1秒内，放大2倍
            .to(1, {scaleX: 2, scaleY: 2})
            //相对动作
            .by(1, {angle: 180})
            .start()