关于Tween数字一个一个出现的效果

Creator 3.x
#1

请问一下，下面Ex:
Tween那个属性能做出这个效果，
比如我有一组数字12345，1先出现，接着2再出现，接着3再出现以此类推，请问大大们如何处理?

#2

为啥不用 schedule 来做？

不知道你的一组数字是数组还是就按顺序显示的数字，先当成数组吧，其实就是数组的下标切换。这种情况我偏向于使用 Vec2 或 Vec3 去做缓动。

import {
    tween,
    v2,
} from 'cc';

const numList = [1, 2, 3, 4, 5];
const source = v2(0, 0);
const target = v2(numList.length, 0);
// 持续时间自己设置
const duration = 5;
tween(source)
    .to(duration, target, {
        onUpdate: (obj: Vec2) => {
            const i = Math.floor(obj.x);
            // 根据业务逻辑使用当前显示的数字 numList[i]
            // do something
        },
    })
    .start();

to 的第三个参数 options 还可以顺手做点 easing 之类的。

理解了借助向量去做缓动的话，要显示的一组数字是不是数组都大同小异了。

#3

就按顺序显示的数字

#4

那其实可以更简单一点，直接设置 source 和 target 两个向量的 x 值，然后在 onUpdate 取整一下就可以了。

#5

直接设置 source 和 target 两个向量的 x 值，试不太出来…，请问有范例吗

#6

就上面那个代码片段，比如你是想要显示 1 到 5，那么 source 设为 v2(1, 0)，target 设为 v2(6,0)，那在 onUpdate 里面对 obj.x 取整就行了。因为 Math.floor 是去尾取整，甚至可以把 target 设为 v2(5.999, 0) 避免出现最后一帧 obj.x 为 6。

#7

// 那个我的意思是要怎么放到 this.node 这个节点上
this.node.getComponent(Label).string = String(Math.abs(data)); // data 是要显示随机数字

#8

onUpdate 里面去调用接口更新 Label 啊，把数字传进去。

#9

什么接口Api…