Actions

最新推荐文章于 2014-06-03 10:09:31 发布

润砾成珠

最新推荐文章于 2014-06-03 10:09:31 发布

阅读量549

点赞数

分类专栏： cocos2d-x-html5

本文链接：https://blog.csdn.net/u011569805/article/details/24312841

版权

cocos2d-x-html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了Cocos2d-x中各种动作效果的使用方法，包括移动、缩放、旋转等基本动作，以及跳动、贝塞尔曲线运动、猫穆尔罗姆曲线等高级动作。此外还介绍了如何通过序列、同时执行等方式组合多个动作，实现更复杂的效果。

摘要由CSDN通过智能技术生成

1.移动Action

2s内移动到指定点x,y;1s移动(80,80); cc.Sequence.create先移动然后再移回来

var actionTo = cc.MoveTo.create(2, cc.p(x,y))

var actionBy = cc.MoveBy.create(1,cc.p()80,80)

var actionTo = cc.MoveTo.create(2, cc.p(s.width - 40, s.height - 40));

        var actionBy = cc.MoveBy.create(1, cc.p(80, 80));
        var actionByBack = actionBy.reverse();

        this._tamara.runAction(actionTo);
        this._grossini.runAction(cc.Sequence.create(actionBy, actionByBack));
        this._kathia.runAction(cc.MoveTo.create(1, cc.p(40, 40)));

2.放大缩小Action

 var actionTo = cc.ScaleTo.create(2, 0.5);
        var actionBy = cc.ScaleBy.create(2, 2);
        var actionBy2 = cc.ScaleBy.create(2, 0.25, 4.5);

        this._tamara.runAction(actionTo);
        this._kathia.runAction(cc.Sequence.create(actionBy2, cc.DelayTime.create(0.25), actionBy2.reverse()));
        this._grossini.runAction(cc.Sequence.create(actionBy, cc.DelayTime.create(0.25), actionBy.reverse()));

3. 旋转Action,根据角度

 var actionTo = cc.RotateTo.create(2, 45);
        var actionTo2 = cc.RotateTo.create(2, -45);
        var actionTo0 = cc.RotateTo.create(2, 0);
        this._tamara.runAction(cc.Sequence.create(actionTo, cc.DelayTime.create(0.25), actionTo0));

        var actionBy = cc.RotateBy.create(2, 360);
        var actionByBack = actionBy.reverse();
        this._grossini.runAction(cc.Sequence.create(actionBy, cc.DelayTime.create(0.25), actionByBack));

        this._kathia.runAction(cc.Sequence.create(actionTo2, cc.DelayTime.create(0.25), actionTo0.clone()));

4.旋转Action,根据x,y,里外

var actionTo = cc.RotateTo.create(2, 37.2, -37.2);
        var actionToBack = cc.RotateTo.create(2, 0, 0);
        var actionBy = cc.RotateBy.create(2, 0, -90);
        var actionBy2 = cc.RotateBy.create(2, 45.0, 45.0);

        var delay = cc.DelayTime.create(0.25);

        this._tamara.runAction(cc.Sequence.create(actionTo, delay, actionToBack));
        this._grossini.runAction(cc.Sequence.create(actionBy, delay.clone(), actionBy.reverse()));

        this._kathia.runAction(cc.Sequence.create(actionBy2, delay.clone(), actionBy2.reverse()));

5. 斜Action，里外（有放大的感觉）

 var actionTo = cc.SkewTo.create(2, 37.2, -37.2);
        var actionToBack = cc.SkewTo.create(2, 0, 0);
        var actionBy = cc.SkewBy.create(2, 0, -90);
        var actionBy2 = cc.SkewBy.create(2, 45.0, 45.0);

        var delay = cc.DelayTime.create(0.25);

        this._tamara.runAction(cc.Sequence.create(actionTo, delay, actionToBack));
        this._grossini.runAction(cc.Sequence.create(actionBy, delay.clone(), actionBy.reverse()));

        this._kathia.runAction(cc.Sequence.create(actionBy2, delay.clone(), actionBy2.reverse()));

6 skew+rotate+scale

 var actionTo = cc.SkewTo.create(2, 0, 2);
        var rotateTo = cc.RotateTo.create(2, 61.0);
        var actionScaleTo = cc.ScaleTo.create(2, -0.44, 0.47);

        var actionScaleToBack = cc.ScaleTo.create(2, 1.0, 1.0);
        var rotateToBack = cc.RotateTo.create(2, 0);
        var actionToBack = cc.SkewTo.create(2, 0, 0);

        var delay = cc.DelayTime.create(0.25);

        box.runAction(cc.Sequence.create(actionTo, delay, actionToBack));
        box.runAction(cc.Sequence.create(rotateTo, delay.clone(), rotateToBack));
        box.runAction(cc.Sequence.create(actionScaleTo, delay.clone(), actionScaleToBack));

6. Jump Action

2s内4步（以比重50）跳至指定点（300，300）

 var actionTo = cc.JumpTo.create(2, cc.p(300, 300), 50, 4);
        var actionBy = cc.JumpBy.create(2, cc.p(300, 0), 50, 4);
        var actionUp = cc.JumpBy.create(2, cc.p(0, 0), 80, 4);
        var actionByBack = actionBy.reverse();

        var delay = cc.DelayTime.create(0.25);

        this._tamara.runAction(actionTo);
        this._grossini.runAction(cc.Sequence.create(actionBy, delay, actionByBack));
        this._kathia.runAction(cc.RepeatForever.create(
            cc.Sequence.create(actionUp, delay.clone() )
                ) );

7.贝塞尔曲线Action，可以用bezierTo1.clone()复制

step1: 创建3个控制点；Step2: 创建bezier action ; Step3: 创建sequence

var controlPoints = [ cc.p(0, 374),
                                cc.p(300, -374),
                                cc.p(300, 100) ];

var bezierForward = cc.BezierBy.create(2, controlPoints);
        var rep = cc.RepeatForever.create(
            cc.Sequence.create(
                bezierForward, delay, bezierForward.reverse(), delay.clone()
            ));

 var controlPoints2 = [ cc.p(100, s.height / 2),
            cc.p(200, -s.height / 2),
            cc.p(240, 160) ];
        var bezierTo1 = cc.BezierTo.create(2, controlPoints2);

        // // sprite 3
        var controlPoints3 = controlPoints2.slice();

        var bezierTo2 = cc.BezierTo.create(2, controlPoints3);

        this._grossini.runAction(rep);
        this._tamara.runAction(bezierTo1);
        this._kathia.runAction(bezierTo2);

7.基数样条曲线

准备数组，创建 CardinalSplineBy,加入序列

var array = [
            cc.p(0, 0),
            cc.p(winSize.width / 2 - 30, 0),
            cc.p(winSize.width / 2 - 30, winSize.height - 80),
            cc.p(0, winSize.height - 80),
            cc.p(0, 0)
        ];

tension==0 弯曲 tension == 1 直线

 var action1 = cc.CardinalSplineBy.create(2, array, 0);
        var reverse1 = action1.reverse();
        var seq = cc.Sequence.create(action1, delay, reverse1, delay.clone() );

重写draw:function()

 cc.kmGLPushMatrix();
            cc.kmGLTranslatef(50, 50, 0);
            cc._drawingUtil.drawCardinalSpline(this._array, 0, 100);
            cc.kmGLPopMatrix();

            cc.kmGLPushMatrix();
            cc.kmGLTranslatef(winSize.width/2, 50, 0);
            cc._drawingUtil.drawCardinalSpline(this._array, 1, 100);
            cc.kmGLPopMatrix();

8.CatmullRom 插值曲线Action

 var array = [
            cc.p(0, 0),
            cc.p(80, 80),
            cc.p(winSize.width - 80, 80),
            cc.p(winSize.width - 80, winSize.height - 80),
            cc.p(80, winSize.height - 80),
            cc.p(80, 80),
            cc.p(winSize.width / 2, winSize.height / 2)
        ];

        var action1 = cc.CatmullRomBy.create(3, array);
        var reverse1 = action1.reverse();
        var seq1 = cc.Sequence.create(action1, delay, reverse1);

        this._tamara.runAction(seq1);

draw:function(){}

cc.kmGLPushMatrix();
            cc.kmGLTranslatef(50, 50, 0);
            cc._drawingUtil.drawCatmullRom(this._array1, 50);
            cc.kmGLPopMatrix();

            cc._drawingUtil.drawCatmullRom(this._array2,50);

9.ActionBlink 一闪一闪，2s内闪5次

  var action2 = cc.Blink.create(2, 5);

        this._tamara.runAction(action1);

10.FadeIn 与 FadeOut

 var action1 = cc.FadeIn.create(1.0);
        var action1Back = action1.reverse();

        var action2 = cc.FadeOut.create(1.0);
        var action2Back = action2.reverse();

        this._tamara.runAction(cc.Sequence.create(action1, delay, action1Back));
        this._kathia.runAction(cc.Sequence.create(action2, delay.clone(), action2Back));

11.ActionTint 变色

 var action1 = cc.TintTo.create(2, 255, 0, 255);
        var action2 = cc.TintBy.create(2, -127, -255, -127);
        var action2Back = action2.reverse();

        this._tamara.runAction(action1);
        this._kathia.runAction(cc.Sequence.create(action2, cc.DelayTime.create(0.25), action2Back));

12 ActionSequence 一系列动作，顺序执行

 var action = cc.Sequence.create(
            cc.MoveBy.create(1.5, cc.p(240, 0)),
            cc.RotateBy.create(1.5, 540)
        );

        this._grossini.runAction(action);

  var action = cc.Sequence.create(
            cc.Place.create(cc.p(200, 200)),
            cc.Show.create(),
            cc.MoveBy.create(1, cc.p(100, 0)),
            cc.CallFunc.create(this.onCallback1, this),
            cc.CallFunc.create(this.onCallback2.bind(this)),
            cc.CallFunc.create(this.onCallback3, this));
        this._grossini.runAction(action);

13.ActionSpawn 同时执行,既跳也旋转

 var action = cc.Spawn.create(
            cc.JumpBy.create(2, cc.p(300, 0), 50, 4),
            cc.RotateBy.create(2, 720));

        this._grossini.runAction(action);

14.反转Action

var jump = cc.JumpBy.create(2, cc.p(300, 0), 50, 4);
        var delay = cc.DelayTime.create(0.25);
        var action = cc.Sequence.create(jump, delay, jump.reverse());

        this._grossini.runAction(action);

15. 延迟后执行动作

 var move = cc.MoveBy.create(1, cc.p(150, 0));
        var action = cc.Sequence.create(move, cc.DelayTime.create(2), move.clone());

16.重复执行动作

(1)

  var a1 = cc.MoveBy.create(1, cc.p(150, 0));
        var action1 = cc.Repeat.create(
            cc.Sequence.create(cc.Place.create(cc.p(60, 60)), a1),
            3);
        var action2 = cc.RepeatForever.create(
            cc.Sequence.create( a1.clone(), a1.reverse(), cc.DelayTime.create(0.25) )
        );

        this._kathia.runAction(action1);
        this._tamara.runAction(action2);

 var action2 = cc.Repeat.create(
            cc.Sequence.create( a1.clone(), a1.reverse(), cc.DelayTime.create(0.25) )
        ,3);

(2)

var action = cc.Sequence.create(
            cc.DelayTime.create(1),
            cc.CallFunc.create(this.repeatForever));    // not passing 'this' since it is not used by the callback func

        this._grossini.runAction(action);

 repeatForever:function (sender) {
        var repeat = cc.RepeatForever.create(cc.RotateBy.create(1, 360));
        sender.runAction(repeat);
    },

(3)

 var act1 = cc.RotateTo.create(0.5, 90);
        var act2 = cc.RotateTo.create(0.5, 0);
        var seq = cc.Sequence.create(act1, act2);
        var rep1 = cc.RepeatForever.create(seq);
        var rep2 = cc.Repeat.create((seq.clone()), 4);

        this._tamara.runAction(rep1);
        this._kathia.runAction(rep2);

(4)jerk

var seq = cc.Sequence.create(
            cc.RotateTo.create(0.5, -20),
            cc.RotateTo.create(0.5, 20));

        var rep1 = cc.Repeat.create(seq, 10);
        var rep2 = cc.RepeatForever.create((seq.clone()));

        this._tamara.runAction(rep1);
        this._kathia.runAction(rep2);

16.回调函数，传递this的方式

 // Testing different ways to pass "this"
        var action = cc.Sequence.create(
            cc.MoveBy.create(2, cc.p(200, 0)),
            cc.CallFunc.create(this.onCallback1.bind(this))  // 'this' is bound to the callback function using "bind"
        );

        var action2 = cc.Sequence.create(
            cc.ScaleBy.create(2, 2),
            cc.FadeOut.create(2),
            cc.CallFunc.create(this.onCallback2, this)      // 'this' is passed as 2nd argument.
        );

        var action3 = cc.Sequence.create(
            cc.RotateBy.create(3, 360),
            cc.FadeOut.create(2),
            cc.CallFunc.create(this.onCallback3, this, "Hi!")  // If you want to pass a optional value, like "Hi!", then you should pass 'this' too
        );

 onCallback3:function (nodeExecutingAction, value) {
        var s = director.getWinSize();
        var label = cc.LabelTTF.create("callback 3 called:" + value, "Marker Felt", 16);
        label.x = s.width / 4 * 3;
		label.y = s.height / 2;
        this.addChild(label);
        this.control3 = true;
    },

17. 回调函数，执行完后移除自己

 var action = cc.Sequence.create(cc.MoveBy.create(2.0, cc.p(200, 0)),
            cc.CallFunc.create(this.removeFromParentAndCleanup, this._grossini, true));

        this._grossini.runAction(action);

removeFromParentAndCleanup:function (nodeExecutingAction, data) {
        nodeExecutingAction.removeFromParent(data);
    },

18.组合 reverse

var move1 = cc.MoveBy.create(1, cc.p(250, 0));
        var move2 = cc.MoveBy.create(1, cc.p(0, 50));
        var seq = cc.Sequence.create(move1, move2, move1.reverse());
        var action = cc.Sequence.create(seq, seq.reverse());

        this._grossini.runAction(action);

19. 组合reverse，隐藏

var move1 = cc.MoveBy.create(3, cc.p(250, 0));
        var move2 = cc.MoveBy.create(3, cc.p(0, 50));
        var tog1 = cc.ToggleVisibility.create();
        var tog2 = cc.ToggleVisibility.create();
        var seq = cc.Sequence.create(move1, tog1, move2, tog2, move1.reverse());
        var action = cc.Repeat.create(
            cc.Sequence.create(seq, seq.reverse()), 3
        );

 var move_tamara = cc.MoveBy.create(1, cc.p(100, 0));
        var move_tamara2 = cc.MoveBy.create(1, cc.p(50, 0));
        var hide = cc.Hide.create();
        var seq_tamara = cc.Sequence.create(move_tamara, hide, move_tamara2);
        var seq_back = seq_tamara.reverse();
        this._tamara.runAction(cc.Sequence.create(seq_tamara, seq_back));

20. cc.Follow.create action 指定范围区域内跟随目标

 this._grossini.x = -(s.width / 2);
		this._grossini.y = s.height / 2;
        var move = cc.MoveBy.create(2, cc.p(s.width * 3, 0));
        var move_back = move.reverse();
        var seq = cc.Sequence.create(move, move_back);
        var rep = cc.RepeatForever.create(seq);

        this._grossini.runAction(rep);

        this.runAction(cc.Follow.create(this._grossini, cc.rect(0, 0, s.width * 2 - 100, s.height)));

21 指定目标Action，在另一个目标运行action, 仿照动作；可以clone()复制

 var jump1 = cc.JumpBy.create(2, cc.p(0, 0), 100, 3);
        var jump2 = jump1.clone();
        var rot1 = cc.RotateBy.create(1, 360);
        var rot2 = rot1.clone();

        var t1 = cc.TargetedAction.create(this._kathia, jump2);
        var t2 = cc.TargetedAction.create(this._kathia, rot2);

        var seq = cc.Sequence.create(jump1, t1, rot1, t2);
        var always = cc.RepeatForever.create(seq);

        this._tamara.runAction(always);

22. 也是会一起执行

 // shake
        var move = cc.MoveBy.create(0.2, cc.p(0,50));
        var move_back = move.reverse();
        var delay = cc.DelayTime.create(0.25);
        var move_seq = cc.Sequence.create( move, move_back );
        var move_rep = cc.RepeatForever.create( move_seq );
        this._grossini.runAction( move_rep );

        // move
        var action = cc.MoveBy.create(2, cc.p(winSize.width - 80, 0));
        var back = action.reverse();
        var seq = cc.Sequence.create(action, back);
        var repeat = cc.RepeatForever.create(seq);
        this._grossini.runAction(repeat);

        // shake
        var move = cc.MoveBy.create(0.05, cc.p(8, 8));
        var move_back = move.reverse();
        var move_seq = cc.Sequence.create(move, move_back);
        var move_rep = cc.RepeatForever.create(move_seq);
        this._grossini.runAction(move_rep);

        // jump
        var action = cc.JumpBy.create(2, cc.p(winSize.width - 80, 0), 90, 5);
        var back = action.reverse();
        var seq = cc.Sequence.create(action, back);
        var repeat = cc.RepeatForever.create(seq);
        this._grossini.runAction(repeat);



        // Bezier
        var controlPoints = [ cc.p(0, winSize.height / 2),
            cc.p(winSize.width - 80, -winSize.height / 2),
            cc.p(winSize.width - 80, 100) ];

        var bezierForward = cc.BezierBy.create(3, controlPoints);
        var repeat = cc.RepeatForever.create(
            cc.Sequence.create(bezierForward, bezierForward.reverse()));
        this._grossini.runAction(repeat);



        // CatmullRom
        var array = [
            cc.p(0, 0),
            cc.p(80, 80),
            cc.p(winSize.width - 80, 80),
            cc.p(winSize.width - 80, winSize.height - 80),
            cc.p(80, winSize.height - 80),
            cc.p(80, 80),
            cc.p(winSize.width / 2, winSize.height / 2)
        ];

        var action1 = cc.CatmullRomBy.create(6, array);
        var reverse1 = action1.reverse();
        var seq1 = cc.Sequence.create(action1, reverse1);
        var repeat = cc.RepeatForever.create(seq1);
        this._grossini.runAction(repeat);

 // CardinalSpline
        var array = [
            cc.p(0, 0),
            cc.p(80, 80),
            cc.p(winSize.width - 80, 80),
            cc.p(winSize.width - 80, winSize.height - 80),
            cc.p(80, winSize.height - 80),
            cc.p(80, 80),
            cc.p(winSize.width / 2, winSize.height / 2)
        ];

        var action1 = cc.CardinalSplineBy.create(6, array, 0.9);
        var reverse1 = action1.reverse();
        var seq1 = cc.Sequence.create(action1, reverse1);
        var repeat = cc.RepeatForever.create(seq1);
        this._grossini.runAction(repeat);

23. pause与resume

 director.getActionManager().pauseAllRunningActions();

 director.getActionManager().resumeTargets(this._pausedTargets);

24. ActionAnimate

Manual animation

var animation = cc.Animation.create();
 for (var i = 1; i < 15; i++) {
            var frameName = "res/Images/grossini_dance_" + ((i < 10) ? ("0" + i) : i) + ".png";
            animation.addSpriteFrameWithFile(frameName);
        }
        animation.setDelayPerUnit(2.8 / 14);
        animation.setRestoreOriginalFrame(true);
  var action = cc.Animate.create(animation);
        this._grossini.runAction(cc.Sequence.create(action, action.reverse()));

  //
        // File animation
        //
        // With 2 loops and reverse
        var animCache = cc.animationCache;

        animCache.addAnimations(s_animations2Plist);
        var animation2 = animCache.getAnimation("dance_1");

        var action2 = cc.Animate.create(animation2);
        this._tamara.runAction(cc.Sequence.create(action2, action2.reverse()));

 // File animation
        //
        // with 4 loops
        var animation3 = animation2.clone();
        animation3.setLoops(4);

        var action3 = cc.Animate.create(animation3);
        this._kathia.runAction(action3);

25 orbitCamera

 var orbit3 = cc.OrbitCamera.create(2, 1, 0, 0, 180, 90, 0);
        var action3 = cc.Sequence.create(
            orbit3,
            orbit3.reverse());