Swift UILabel 数字动画效果

2024-06-18 22:08

本文主要是介绍Swift UILabel 数字动画效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


昨天去面试 面试官问我 如何实现 label数字由低到高增长。特地整理了一下 

用的时候 只要调用这个类 即可实现 在多少s内 有 min - max 的方法


///自己写的一个类

class UIZJLAnimationLab: UILabel {

    

    ///计时器比 NSTimer精确

    var timer:CADisplayLink!

    

    ///进程戳 从开始计时到实时的时间戳 后面会与传进来的最长时间对比

    var progress:NSTimeInterval!

    ///最后一次记录时间戳

    var lastupdate:NSTimeInterval!

    ///多长时间完成的参数

    var totalupdate:NSTimeInterval!

    

    ///最开始的计数

    var startValue:Float!

    ///将要结束的参数

    var endValue:Float!

    

    ///想要以Int类型 还是Float类型增长

    var type:ZJLAnimationType!

    

    

    var newText:String{

        get {

            return updateNewinfo()

        }

    }

    

    init(frame: CGRect,type:ZJLAnimationType) {

        super.init(frame: frame)

        self.type = type

    }

    

    func initCadisplayLink() {

        progress = 0

        timer = CADisplayLink(target: self,selector: #selector(UIZJLAnimationLab.timerclick(_:)))

        timer.addToRunLoop(NSRunLoop.currentRunLoop(), forMode: NSDefaultRunLoopMode)

    }

    

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")

    }

    

    func timerclick(sender:CADisplayLink) {

        ///当执行这个方法时候 判断当前时间戳与 lastupdate这个参数的差 直到 将其相加 直到与 totalupdate 相等时 即为消耗了等量时间 此时强行将text职位endvalue

        

        ///记录当前时间戳

        let now:NSTimeInterval = NSDate.timeIntervalSinceReferenceDate()

        ///当前时间 减去 开始事件

        progress = now - lastupdate

        

        if (now - lastupdate) >= totalupdate {

            progress = totalupdate

            stopLoop()

        }

        let text = newText

        self.text = text

    }

    

    func updateNewinfo() -> String {

        ///当前时间/总共所需要时间,来判断应该尽到哪里(肯定不会大于1)

        let timebi:Float = Float(progress)/Float(totalupdate)

        let updateVal = startValue + (timebi * (self.endValue - self.startValue))

        if type == ZJLAnimationType.FLOAT {

            return String(format: "%.2f",updateVal)

        }

        return String(format: "%.0f",updateVal)

    }

    

    func countFrom(start:Float,to:Float,duration:NSTimeInterval) {

        ///将计时器销毁再重新生成

        if timer != nil {

        timer.invalidate()

        timer = nil

        }

        initCadisplayLink()

        

        ///记录时间戳

        lastupdate = NSDate.timeIntervalSinceReferenceDate()

        ///耗时时间戳

        totalupdate = duration


        ///将其赋值

        startValue = start

        endValue = to

    }

    

    ///销毁计时器

    func stopLoop() {

        timer.invalidate()

        timer = nil

    }

}


enum ZJLAnimationType {

    case INT

    case FLOAT

}


这篇关于Swift UILabel 数字动画效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073191

相关文章

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

java字符串数字补齐位数详解

《java字符串数字补齐位数详解》:本文主要介绍java字符串数字补齐位数,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java字符串数字补齐位数一、使用String.format()方法二、Apache Commons Lang库方法三、Java 11+的St

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的。使用python创建生命倒计时图表,珍惜时间

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript