游戏中 金额变换时数字滚动更新显示
提供 测试过的代码 有需要的可以参考
import { Component, Label, Node, Tween, Vec3, _decorator, tween } from “cc”;
const { ccclass, property } = _decorator;
/**
-
数字滚动显示效果
*/
@ccclass(‘NumberRollComp’)
export class NumberRollComp extends Component {
@property(Label)
private text0: Label;
@property(Label)
private text1: Label;//将要向中心滚动显示的文本
private currentTxt: Label;private center: Vec3 = new Vec3(-2, 3, 0);
private down: Vec3 = new Vec3(-2, -126, 0);
//文字向上滚动结束位置
private up: Vec3 = new Vec3(-2, 126, 0);private currentLoopTime: number;
//数值动画 需要循环的总次数
private totalLoopTime: number;private aniTime: number;
//一个循环周期值
private readonly period: number = 11;
//用于在dict中取值
private currentKey: number;
//刻度值字典
private dict: Map<number, string> = new Map([
[0, “0”],
[1, “1”],
[2, “2”],
[3, “3”],
[4, “4”],
[5, “5”],
[6, “6”],
[7, “7”],
[8, “8”],
[9, “9”],
[10, “.”],
])
protected onLoad(): void {
this.reset();
}/**
-
设置初始文字显示
*/
public reset(): void {this.currentKey = 9;
this.text0.string = this.dict.get(this.currentKey);this.stop();
}
private stop(): void {
Tween.stopAllByTarget(this.text0.node);
Tween.stopAllByTarget(this.text1.node);this.text0.node.setPosition(this.center.x, this.center.y, this.center.z); this.text1.node.setPosition(this.down.x, this.down.y, this.down.z); this.currentTxt = this.text1;
}
/**-
设置动画时长(s)
-
@param val
/
public setTime(val: number): void {
this.aniTime = val;
}
/* -
设置最终显示值
-
@param val 单字符(0,1,2,3)
-
@param playRollAni 是否播放滚动动画
*/
public setValue(val: string, playRollAni: boolean): void {let keyValue: number = val == “.” ? 10 : Number(val);
if (keyValue != this.currentKey) {
this.stop(); if (!playRollAni) { this.currentKey = keyValue; this.currentTxt.string = this.dict.get(this.currentKey); } else { this.currentLoopTime = 0; if (this.currentKey > keyValue) { this.totalLoopTime = this.period - this.currentKey + keyValue; } else { this.totalLoopTime = keyValue - this.currentKey; } this.updateDisplay(); }
}
}
private updateDisplay(): void {this.currentLoopTime++;
this.currentKey++;
this.currentKey %= this.period;this.currentTxt.string = this.dict.get(this.currentKey);
let moveTime: number = this.aniTime / this.totalLoopTime;
let nonCurrentTxt: Label;
if (this.currentTxt == this.text0) {
nonCurrentTxt = this.text1;
}
else {
nonCurrentTxt = this.text0;
}tween(this.currentTxt.node).to(moveTime, { position: this.center }).start();
tween(nonCurrentTxt.node).to(moveTime, { position: this.up }, { onComplete: this.moveUpCompleteHander.bind(this) }).start();
}
/**-
有文本向上移动到了不可见区域
-
@param targetNode
*/
private moveUpCompleteHander(targetNode: Node): void {
this.currentTxt = targetNode.getComponent(Label);
targetNode.setPosition(this.down.x, this.down.y, this.down.z);if (this.currentLoopTime < this.totalLoopTime) {
this.updateDisplay();
}
}
} -