造轮子 之 数字滚动显示

Creator 3.x
#1

游戏中 金额变换时数字滚动更新显示
提供 测试过的代码 有需要的可以参考

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();
      }

    }
    }

#2

mark 一下。希望有更简单的demo 。楼主你连个图都舍不得贴一个吗

#3

这要是带个动图效果直接拉满