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数字翻动的效果
    js 复制代码
    // 记录每个位置
    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))
                }
            }
            
        }
相关推荐
漫游者Nova1 小时前
虚幻引擎Unreal Engine5恐怖游戏设计制作教程,从入门到精通从零开始完整项目开发实战详细讲解中英字幕
ue5·游戏引擎·虚幻·游戏开发完整教程·恐怖游戏开发
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app