cocos-tween

Cocos Creator 3.8 Tweening System

Task Objectives

This Skill is used to: master the Cocos Creator tweening system to implement animations
Capabilities include: tween animations, chained calls, queue control, property changes
Trigger conditions: creating UI animations, transition effects, tween animations

Overview

The tweening system is widely used in game development, and its main purpose is to solve the problem of dynamic animations when offline animations cannot meet the requirements. In Cocos Creator, tweening can be used not only for conventional animation information such as position, rotation, scale, and color, but also supports action behaviors such as delay, queue, and parallel.

Basic Usage

Creating a Tween

import { tween, Node, Vec3 } from 'cc';

const tw = tween(this.node) .to(1, { position: new Vec3(100, 0, 0) }) .start();


### 链式调用
```typescript
tween(this.node)
    .to(0.5, { position: new Vec3(100, 0, 0) })
    .by(0.5, { position: new Vec3(100, 0, 0) })
    .to(0.5, { position: new Vec3(200, 0, 0) })
    .start();

Common Tweens

Position

// 移动到目标位置
tween(node)
    .to(1, { position: new Vec3(100, 0, 0) })
    .start();

// 相对移动
tween(node)
    .by(1, { position: new Vec3(100, 0, 0) })
    .start();

Rotation

tween(node)
    .to(1, { rotation: 360 })
    .start();

Scale

tween(node)
    .to(0.3, { scale: new Vec3(1.2, 1.2, 1) })
    .to(0.3, { scale: new Vec3(1, 1, 1) })
    .start();

Opacity

tween(node)
    .to(0.5, { opacity: 0 })
    .start();

Color

tween(node)
    .to(0.5, { color: new Color(255, 0, 0, 255) })
    .start();

Easing Functions

Built-in Easing

import { tween,.easing } from 'cc';

// 使用内置缓动函数
tween(node)
    .to(1, { position: new Vec3(100, 0, 0) }, { easing: easing.sineInOut })
    .start();

// 常用缓动函数
// - linear
// - sineIn / sineOut / sineInOut
// - quadIn / quadOut / quadInOut
// - cubicIn / cubicOut / cubicInOut
// - elasticIn / elasticOut / elasticInOut
// - bounceIn / bounceOut / bounceInOut
// - backIn / backOut / backInOut

Action Combinations

Parallel Execution

tween(node)
    .parallel(
        tween().to(1, { position: new Vec3(100, 0, 0) }),
        tween().to(1, { scale: new Vec3(0.5, 0.5, 1) })
    )
    .start();

Sequential Execution

tween(node)
    .sequence(
        tween().to(0.5, { position: new Vec3(100, 0, 0) }),
        tween().to(0.5, { scale: new Vec3(0.5, 0.5, 1) })
    )
    .start();

Repeat Execution

// 重复 3 次
tween(node)
    .to(0.5, { position: new Vec3(100, 0, 0) })
    .repeat(3)
    .start();

// 永久循环
tween(node)
    .to(0.5, { position: new Vec3(100, 0, 0) })
    .repeatForever()
    .start();

Delay

tween(node)
    .delay(0.5)
    .to(1, { position: new Vec3(100, 0, 0) })
    .start();

Callback

tween(node)
    .to(1, { position: new Vec3(100, 0, 0) })
    .call(() => {
        console.log('Animation complete!');
    })
    .start();

Tween Instance Methods

Stop

const tw = tween(node).to(1, { position: new Vec3(100, 0, 0) });
tw.start();

// 停止
tw.stop();

Target Setting

const tw = tween(node);
tw.target(new Vec3(200, 0, 0)).to(1, { position: new Vec3(100, 0, 0) });

Practical Examples

UI Popup

tween(this.popupNode)
    .set({ scale: new Vec3(0, 0, 1) })
    .to(0.3, { scale: new Vec3(1.1, 1.1, 1) }, { easing: easing.backOut })
    .to(0.1, { scale: new Vec3(1, 1, 1) })
    .start();

Blinking Effect

tween(this.node)
    .to(0.5, { opacity: 0 })
    .to(0.5, { opacity: 255 })
    .repeatForever()
    .start();

About this skill