【 Cocos Creator 】cocos2d-js基本动作(cc.moveTo等。。。。runAction)

var ActionLayer = cc.Layer.extend({
    ctor: function () {
        this._super();

        var size = cc.winSize;

        var sprite = new cc.Sprite(res.HelloWorld_png);
        sprite.x = size.width / 2;
        sprite.y = size.height / 2;
        this.addChild(sprite);

        //动画时间
        var duration = 1;

        //相对于当前坐标移动point(x, y)
        var moveby = cc.moveBy(duration, cc.p( - size.width / 2, - size.height / 2));
        // sprite.runAction(moveby);

        //从当前坐标移动到point(x, y)
        var moveto = cc.moveTo(duration, cc.p(size.width / 2, size.height / 2));
        // sprite.runAction(moveto);

        //根据节点原本大小缩放
        //x 为横向拉伸倍数, y为纵向拉伸倍数
        var scaleTo = cc.scaleTo(duration, 2, 2);
        // sprite.runAction(scaleTo);

        //根据节点当前大小缩放
        var scaleBy = cc.scaleBy(duration, 0.5, 0.5);
        // sprite.runAction(scaleBy);

        //淡入淡出效果
        //第二个参数为透明度,透明区间(0, 1)
        var fadeTo = cc.fadeTo(duration, 0.5);
        // sprite.runAction(fadeTo);

        //淡出效果
        var fadeOut = cc.fadeOut(duration);
        // sprite.runAction(fadeOut);

        //淡入效果
        var fadeIn = cc.fadeIn(duration);
        // sprite.runAction(fadeIn);

        //闪烁效果
        //第二个参数为duration时间内闪烁次数
        var blink = cc.blink(duration, 5);
        // sprite.runAction(blink);

        //改变色调效果
        var tintTo = cc.tintTo(duration, 255, 127.5, 0);
        // sprite.runAction(tintTo);

        //旋转效果
        //x 绕x轴旋转的角度
        //y 绕y轴旋转的角度

        //假设当前节点的角度为(30,30),节点想要运动到(60,60),则可以设置:
        //var rotateTo = cc.rotateTo(duration, 60, 60);
        //或设置:
        //var rotateBy = cc.rotateBy(duration, 30, 30);


        //相对于节点初始角度(0,0)的旋转
        var rotateTo = cc.rotateTo(duration, 30, 30);
        // sprite.runAction(rotateTo);

        //相对于节点当前角度的旋转
        var rotateBy = cc.rotateBy(duration, -30, -30);
        // sprite.runAction(rotateBy);

        //倾斜效果
        //x 绕x轴倾斜的角度
        //y 绕y轴倾斜的角度

        //相对于节点当前角度的倾斜
        var skewBy = cc.skewBy(duration, 60, 60);
        // sprite.runAction(skewBy);

        //相对于节点初始角度的倾斜
        var skewTo = cc.skewTo(duration, 0, 0);
        // sprite.runAction(skewTo);


        //跳跃移动效果
        //参数意义: (时间duration,目标坐标point(x, y), 每次跳跃高度height, 跳跃次数count)

        //以当前节点坐标为原点,移动目标坐标距离
        var jumpBy = cc.jumpBy(duration, cc.p(size.width / 2 , size.height / 2), 50, 10);
        // sprite.runAction(jumpBy);

        //以坐标原点为原点,移动到目标坐标
        var jumpTo = cc.jumpTo(duration, cc.p(size.width / 2, size.height / 2), 50, 10);
        // sprite.runAction(jumpTo);

        //贝塞尔曲线
        //参数:(时间duration, 坐标数组Array)
        var pointArray = [cc.p(size.width, size.height),
                        cc.p(size.width, 0),
                        cc.p(0, 0),
                        cc.p(0, size.height),
                        cc.p(size.width / 2, size.height/ 2)];

        //不会回到原点
        //谁知道它怎么跑的...
        var bezierTo = cc.bezierTo(duration, pointArray);
        // sprite.runAction(bezierTo);

        //会回到节点开始运动时的位置
        var bezierBy = cc.bezierBy(duration, pointArray);
        // sprite.runAction(bezierBy);

        //
        //组合动作//
        //
        //顺序执行当前添加的所有动作
        var sequence = cc.sequence(moveby, moveto, scaleTo, scaleBy, fadeTo, fadeOut, fadeIn, blink, tintTo,
                        rotateTo, rotateBy, skewBy, skewTo, jumpBy, jumpTo, bezierTo, bezierBy);
        // sprite.runAction(sequence);

        //重复执行
        //action,执行次数
        var repeat = cc.repeat(sequence, 3);
        // sprite.runAction(repeat);

        //无限重复
        var repeatForever = cc.repeatForever(sequence);
        // sprite.runAction(repeatForever);
        // //反向执行一次
        // var reverseTime = cc.reverseTime(sequence);
        // sprite.runAction(reverseTime);
        //spawn 同时执行
        var spawn = cc.spawn(moveby, scaleTo, blink, tintTo);
        // sprite.runAction(spawn);

        //反向执行
        //反向执行只支持基本动作中的By方法,
        // 即:moveBy,scaleBy,rotateBy,jumpBy,skewBy,bezierBy及这几种方法的组合方法,还有fadeIn/fadeOut,blink
        //不支持To方法,包括fadeTo,tintTo
        //若使用To方法,则浏览器可能会报错:"Uncaught TypeError: Cannot read property 'x' of undefined"
        // var reverse = bezierBy.reverse();
        // var sequence3 = cc.sequence(bezierBy, reverse);
        // sprite.runAction(sequence3);

        var sequence1 = cc.sequence(jumpBy, scaleBy, bezierBy, tintTo);
        var reverse2 = sequence1.reverse();
        var delayTime = cc.delayTime(duration);
        var sequence2 = cc.sequence(sequence1, delayTime, reverse2);
        sprite.runAction(sequence2);




        return true;
    }
});

 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值