cocos-animation

Cocos Creator 3.8 Animation System

Task Objectives

• This Skill is used to: master the Cocos Creator animation system to create game animations
• Capabilities include: keyframe animation, skeletal animation, animation state machine, procedural animation
• Trigger conditions: creating character animations, UI animations, scene animations

Overview

Cocos Creator has a built-in general-purpose animation system for implementing keyframe-based animation. In addition to supporting standard position, rotation, scale animations and frame animations, it also supports driving arbitrary component properties and user-defined properties.

Core Concepts

Animation Clip

• A resource containing animation data
• Reusable
• Created through the animation editor

Animation Component

• Attached to a node
• Manages animation states
• Controls animation playback

Animation State

• The state object of an animation clip
• Controls play, pause, stop, switch
• Supports speed change and loop mode settings

Animation Editor

How to Open

• Menu: Window -> Animation Editor
• Shortcut: Ctrl/Cmd + 6

Editing Workflow

1. Select a node
2. Create an animation clip in the animation editor
3. Add property tracks
4. Add keyframes
5. Preview the animation

Keyframe Operations

• Add: select a frame on the timeline, right-click and choose "Add Keyframe"
• Move: drag keyframes
• Copy and paste: supports copying keyframes to other positions
• Curve editing: adjust easing curves

Skeletal Animation

Spine Skeletal Animation

• Use the Spine Skeleton component
• Supports the data format exported by the official Spine tool
• Resource types: .json/.skel

DragonBones Skeletal Animation

• Use the ArmatureDisplay component
• Supports DragonBones tool export
• Resource type: .json

Skeletal Animation Components

Spine Skeleton

import { sp } from 'cc';

const skeleton = this.getComponent(sp.Skeleton);
skeleton.setAnimation(0, 'run', true); // 播放名为 run 的动画

ArmatureDisplay

import { dragonBones } from 'cc';

const armature = this.getComponent(dragonBones.ArmatureDisplay);
armature.playAnimation('run', 0); // 播放动画

Marionette Animation System

Overview

• New in v3.4
• Implements an automated and reusable skeletal animation workflow controlled by a state machine
• Suitable for character animation state management

State Machine Concepts

• State
• Transition
• Condition

Procedural Animation

Overview

• New in v3.8
• Programmatically controls the animation sampling process through different animation nodes
• Suitable for animations that need dynamic adjustment

Common Nodes

• Sample Spine
• Sample DragonBones
• 3D Model Sample

Script Control

Basic Operations

import { Animation } from 'cc';

const anim = this.getComponent(Animation);

// 播放
anim.play('animName');

// 暂停
anim.pause('animName');

// 停止
anim.stop();

// 跨动画混合
anim.setAnimationState('anim1', 0.5);

Animation State Control

const state = anim.getState('animName');
state.speed = 1.5; // 播放速度
state.wrapMode = WrapMode.Loop; // 循环模式
state.weight = 0.5; // 混合权重

Resource Index

Required References

• Animation System
• Marionette Animation System
• Procedural Animation

Notes

Performance Optimization

• Control the number of on-screen animations
• Use animation curves appropriately
• Stop unnecessary animations promptly

Best practices

• Separate character animations and scene animations
• Use prefabs to manage animation states
• Establish good animation naming conventions