Cocos Creator Animation Editor Learning

Animation is a gradual process, how to implement this process in the Cocos creator Animation editor.

First, hierarchical relationship:

1 nodes , 2 animations (Animation), 3 animated clips (Animation clip), 4 property Tracks , 5 animated frames

A. animation (Animation) is a component on a node.

B. An animated clip (Animation clip) is an animated declaration of data that is mounted on an animation (Animation) as a property setting.

C. Animated clips (Animation clip) can add multiple property tracks to control different properties.

D. Create multiple animation frames (blue dots) on one property track, set different property values on those animation frames, and implement the process of gradient from frame A to frame B (that is, animation).

Second Simple animated example

An animation that implements a "throw stack":

A. Add a throw animation on the stack node.

B. Animation needs are relatively simple, only a stack of throwing process chip_toss. (Note: An animation can have multiple process combinations to achieve more complex effects.)

C. The throwing process is the change of position, adding an attribute track for controlling position movement: position. (Note: A process can have multiple property changes, such as the process of moving can also increase the transparency of the change)

D. Set 4 keyframes on this property track, set the coordinate value of each keyframe, and modify the line between two frames to the desired trajectory. (First frame: point coordinates, second frame: Throw point coordinates, third and fourth frames are the coordinates near the throw point (to achieve the chip collision stop process))

Third, other

Property:

Include basic properties and custom properties
Basic properties: The basic properties of the node, including the position position, rotation rotation, scaled scale, anchor anchor, size, color, transparency opacity, tilt skew, group of nodes.
Custom properties: Add a different custom attribute depending on the component on the node where the animation is located, such as a text component on the node, and the custom attribute cc will be added. Label.string, CC. Label.fontsize, CC. Label.enabled.

Sequence Frame animations:
A commonly used sequence frame animation is to add a sprite component to a node, and then there will be CC in the custom attribute. Sprite.spriteframe property, and then adds a frame picture on the Spriteframe property track to implement frame animation.

Time Curve:

Used to control the speed of changes between two frames, such as a gradual transparent process, by modifying the time curve can be achieved by the first slowly transparent, and then quickly transparent process. (Note: Double-click the connection between two frames to open the time Curve interface )

Script Control animations:
1. Simple function control, such as play, pause, resume, stop, set the current time of the animation;
Anim.play (' Test ');
Anim.pause (' Test ');

2. Visual function control
Supports visual editing of frame events in the motion editor, and performs function methods such as the ability to insert a function that switches to the next interface at the last frame of the animation to automatically switch after the animation has finished playing.
The event Editor allows you to edit the functions that need to be triggered, and you can pass in function arguments later (supports boolean,string,number three types of parameters).

Call out the event editor by clicking on the two button.

　　　　

3. Slightly complex function control, get animationstate, modify the parameters therein.

　// ways to get animationstate:    var animstate = anim.getanimationstate (' test '); // modify the playback speed parameter to slow    down the animation Animstate.speed = 0.5;

4. The animation system supports dynamic registration of callback events.

    varAnimation = This. node.getcomponent (CC.    Animation); //RegisterAnimation.on (' Play ', This. Onplay, This); //Cancel RegistrationAnimation.off (' Play ', This. Onplay, This); //to a single CC. Animationstate Registration Callback    varANIM1 = animation.getanimationstate (' anim1 ')); Anim1.on (' Lastframe ', This. Onlastframe, This); //Create Animation Clip dynamically:    varAnimation = This. node.getcomponent (CC.    Animation); //frames This is an array of spriteframe.    varClip = cc. Animationclip.createwithspriteframes (Frames, 17); Clip.name= "Anim_run"; Clip.warpmode=cc.    Warpmode.loop; //Adding frame EventsClip.events.push ({frame:1,//the exact time, in seconds. This indicates that the event will be triggered when the animation is played to 1sFunc: "Frameevent",//callback function nameparams: [1, "Hello"]//Callback Parameters    });    Animation.addclip (clip); Animation.play (' Anim_run ');

Cocos Creator Animation Editor Learning