FGUI+TS如何实现数字翻滚

FGUI+TS如何实现数字翻滚

实现效果如下：

实现步骤：

1. fgui制作组件和特效

   1. fgui制作组件，设置一条竖向数字包含1-9或者小数点符号等，可见区域为一个数字大小，最好可见区域紧贴数字，这样滚动的时候滚动区域范围不会太大

      

   2. fgui制作动效，设置一个起始帧以及一个结束帧，起始帧改变位置x为0，y为0；结束帧改变位置x为0，y为你后一个数字或符号的位置，在之间设置缓动函数，达到连贯的效果

      

   3. 制作一个列表，将这个组件放进去，调整位置

2. 代码控制

   1. 制作一个记录y轴位置的map，将你所有的数字和符号位置放进去
   2. 初始化开始值，针对更变值进行动效播放，实现效果~9527.1314数字翻动的效果

   // 记录每个位置
   setNumPositionMap() {
           let cellHeight = 75
           for (let index = 0; index <= 9; index++) {
               this.numPositionMap.set(index, -(index * cellHeight))
           }
           this.numPositionMap.set('symbol', -(10 * cellHeight))
           this.numPositionMap.set('point', -(11 * cellHeight))
       }
   
   // 更新列表为当前显示值
   updateNumList(pre: string){
           this.numList.removeChildrenToPool()
           for (let index = 0; index < pre.length; index++) {
               let preNum = pre[index]
               let com = this.numList.addItemFromPool().asCom
               if (preNum == ".")  {
                   com.getChild("n0").setPosition(0, this.numPositionMap.get("point"))
               }else if (preNum == "~") {
                   com.getChild("n0").setPosition(0, this.numPositionMap.get("symbol"))
               } else {
                   com.getChild("n0").setPosition(0, this.numPositionMap.get(Number.parseInt(preNum)))
               }
           }
       }
   
   // 播放动效
   playAnim(pre: string, cur: string){
           for (let index = this.numList.numItems - 1; index >= 0; index--) {
               let listItem = this.numList.getChildAt(index)
               let preNum = pre[index]
               let curNum = cur[index]
               
               if (preNum != "." && preNum != "~") {
                   let trans = listItem.asCom.getTransition("t0")
                   trans.setValue("start", 0, this.numPositionMap.get(Number.parseInt(preNum)))
                   trans.setValue("end", 0, this.numPositionMap.get(Number.parseInt(curNum)))
                   trans.play(function() {
                       if (index == 1) {
                           this.updateNumList(cur)
                       }
                   }.bind(this))
               }
           }
           
       }