用cocos creator2.4版本写一个数字滚动效果
时间: 2023-07-28 10:09:58 浏览: 54
好的,以下是示例代码:
1. 创建一个空节点,取名为NumberRoller。
2. 在NumberRoller节点上添加一个Label组件,用于显示数字。
3. 在NumberRoller节点上添加一个脚本组件,取名为NumberRoller.js。
4. 在NumberRoller.js中添加如下代码:
```javascript
cc.Class({
extends: cc.Component,
properties: {
label: cc.Label, // Label组件
duration: 1, // 滚动动画时长
from: 0, // 起始数字
to: 100, // 结束数字
easing: cc.easeCubicActionOut, // 缓动函数
},
onLoad () {
this.label.string = this.from; // 初始化显示数字
},
start () {
this.rollNumber(); // 开始滚动数字
},
rollNumber () {
let diff = this.to - this.from; // 计算数字差值
let time = this.duration * 1000; // 滚动动画时长,单位毫秒
let step = diff / time * 10; // 每10毫秒的数字增量
let count = 0; // 计数器
this.schedule(function() {
this.from += step; // 更新数字
this.label.string = Math.floor(this.from); // 显示数字
count++;
if (count >= time / 10) {
this.label.string = this.to; // 最终显示数字
this.unscheduleAllCallbacks(); // 停止计时器
}
}, 0.01);
},
});
```
5. 在场景中添加一个Canvas节点,并将NumberRoller节点作为其子节点。
6. 运行场景,即可看到数字滚动效果。
注:以上代码中的缓动函数为cc.easeCubicActionOut,可根据需要自行更改。另外,数字滚动的精度可根据实际情况调整。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)