Monthly Archives: 二月 2025

Hello World

cocos.tween动画,时间线控制汇总

本文主要简绍cc.tween与sequence、delay、parallel、repeat和call的各种搭配、混合使用,实现事件序列的串并行控制
1. 简单串行

1
2
3
4
5
6
7
8
// 示例代码,先执行动作1、再执行动作2、然后执行回调
cc.tween(node)
    .to(time1, { position: newPosition }) // 动作1
    .to(time2, { angle: newAngle }) // 动作2
    .call(() => {
        // console.log('>> cc.tween end')
    })
    .start();

2. 并行parallel、延迟delay

1
2
3
4
5
6
7
8
9
// 示例代码,先同步执行动作1和动作2、然后延迟0.5秒、然后执行动作3
cc.tween(node)
    .parallel(
        cc.tween().to(time1, { position: newPosition1 }),// 动作1
        cc.tween().to(time2, { angle: newAngle }),// 动作2
    )
    .delay(0.5)
    .to(time2, { position: newPosition2 }) // 动作3
    .start();

3. 并行parallel、串行sequence、重复repeat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 示例代码 串并行混排、重复
cc.tween(node)
    .repeat(3,  // 让整个 sequence 重复 3 次
        cc.tween().sequence( //先执行第一个parallel,然后等待0.5秒、然后执行第二个parallel
            cc.tween().parallel( //先动作1与动作2串行
                cc.tween().to(1, { position: cc.v2(200, 200) }),  // 动作1
                cc.tween().to(1, { angle: 180 }) //动作2
            ),
            cc.tween().delay(0.5),
            cc.tween().parallel( //后动作3与动作4
                cc.tween().to(1, { position: cc.v2(-200, -200) }).to(1, { position: cc.v2(0, -200) }), //动作3,包含两个串行的子动作
                cc.tween().to(1, { color: cc.Color.RED }) //动作4
            )
        ).call(()=>{
               console.log('>> repeat once'); //每次repeat可以单独定义回调
        }),
 
    ).call(()=>{
        console.log('>> repeat end');} //整体完成的回调
    ).start();

——
over
转载请注明出处:http://www.jiangkl.com/2025/02/cocos-tween_timeline

Hello World

cocos.tween动画,移动曲线参数汇总

1. 缓动曲线:

1
2
3
4
5
6
7
8
9
10
11
// 示例代码
cc.tween(node)
    .to(time, { position: newPosition }, { easing: "sineInOut" }) // 先慢后快
    .start();
// 常用 easing 类型
// "sineIn"	开始慢,后面加速
// "sineOut"	开始快,后面减速
// "sineInOut"	先慢-加速-再慢
// "quadIn"	二次方曲线加速
// "quadOut"	二次方曲线减速
// "quadInOut"	二次方曲线平滑过渡

2. 贝塞尔曲线(Bezier Curve):

1
2
3
4
5
6
7
//示例代码
cc.tween(node)
    .bezierTo(time, cc.v2(100, 200), cc.v2(200, 300), cc.v2(300, 100)) // 1秒内按贝塞尔曲线移动
    .start();
// bezierTo(time, control1, control2, endPos)
// control1 和 control2 是控制点,决定曲线形状。
// endPos 是终点,节点沿着曲线到达该点。

3. 分步依次移动,使用 sequence() 组合多个 to():

1
2
3
4
5
6
7
//示例代码
cc.tween(node)
    .sequence(
        cc.tween().to(time1, { position: cc.v2(100, 200) }, { easing: "sineOut" }),
        cc.tween().to(time2, { position: cc.v2(200, 100) }, { easing: "sineIn" })
    )
    .start();

——
over
转载请注明出处:http://www.jiangkl.com/2025/02/cocos_tween_positin_easing