最近项目中用到了打分动画. 在网上找到了很多Demo,最后找到了JTNumberScrollAnimatedView这个类实现的动画效果,和项目中用到的非常贴切,帮我省了不少时间,很感谢JTNumberScrollAnimatedView的提供作者,由于项目中有一些需求变动,因此自己改进了一下,写了一个Demo,方便读者参阅学习,废话不多说,直接上代码.

  1. 添加打分控件

UIFont *textFont = [UIFont systemFontOfSize:40];CGSize textSize = [@"9" sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:textFont,NSFontAttributeName, nil]];//个位十位单独设置,可分别设定各自速度LNNumberScrollAnimatedView *socreTensDigitAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(100, 100, textSize.width, textSize.height)];socreTensDigitAnimation.backgroundColor = [UIColor whiteColor];[self.view addSubview:socreTensDigitAnimation];socreTensDigitAnimation.textColor = [UIColor redColor];socreTensDigitAnimation.font = textFont;socreTensDigitAnimation.density = 7;socreTensDigitAnimation.duration = 1.9;socreTensDigitAnimation.minLength = 1;[socreTensDigitAnimation setValue:@9];[socreTensDigitAnimation sizeToFit];socreTensDigitAnimation.isAscending = YES;socreTensDigitAnimation.durationOffset = 0.1;self.socreTensDigitAnimation = socreTensDigitAnimation;LNNumberScrollAnimatedView *socreDigitAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(100+textSize.width, 100, textSize.width, textSize.height)];socreDigitAnimation.backgroundColor = [UIColor whiteColor];[self.view addSubview:socreDigitAnimation];socreDigitAnimation.textColor = [UIColor redColor];socreDigitAnimation.font = textFont;[socreDigitAnimation setValue:@9];[socreDigitAnimation sizeToFit];socreDigitAnimation.density = 21;socreDigitAnimation.duration = 1.95;socreDigitAnimation.minLength = 1;socreDigitAnimation.isAscending = YES;socreDigitAnimation.durationOffset = 0.1;self.socreDigitAnimation = socreDigitAnimation;//个位十位统一设置,速度一样,可设置结束时间间隔差CGSize scoreTextSize = [@"19" sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:textFont,NSFontAttributeName, nil]];LNNumberScrollAnimatedView *socreAnimation = [[LNNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(socreDigitAnimation.frame)+textSize.width, 100, scoreTextSize.width*1.1, scoreTextSize.height)];socreAnimation.backgroundColor = [UIColor whiteColor];[self.view addSubview:socreAnimation];socreAnimation.textColor = [UIColor blueColor];socreAnimation.font = textFont;[socreAnimation setValue:@19];[socreAnimation sizeToFit];socreAnimation.density = 21;socreAnimation.duration = 1.95;socreAnimation.minLength = 2;socreAnimation.isAscending = NO;socreAnimation.durationOffset = 0.1;self.socreAnimation = socreAnimation;

  

  2. 添加音效

#pragma mark - 播放音效
- (void)playSound
{NSURL *url = [[NSBundle mainBundle] URLForResource:@"number.wav" withExtension:nil];SystemSoundID soundID = 0;AudioServicesCreateSystemSoundID((__bridge CFURLRef)(url), &soundID);AudioServicesPlayAlertSound (soundID);
}

  3. 执行动画

for (int i = 0; i<19; i++) {[self performSelector:@selector(playSound) withObject:nil afterDelay:0.1];}[self.socreTensDigitAnimation setValue:[NSNumber numberWithInt:1]];[self.socreTensDigitAnimation startAnimation];[self.socreDigitAnimation setValue:[NSNumber numberWithInt:9]];[self.socreDigitAnimation startAnimation];[self.socreAnimation startAnimation];

 

  效果如下:

Demo 下载地址:https://github.com/KrystalNa/numberAnimation

转载于:https://www.cnblogs.com/KrystalNa/p/5209889.html

iOS动画开发----打分 数字滚动刷新动画相关推荐

  1. Swift 动画 —— 数字滚动UILabel动画

    新建一个Swift工程.要做到数字滚动的动画,可能很多人都会想到用UIView的animate方法,但是UIView的animate方法只会做关于UIView的Frame,alpha,color,tr ...

  2. android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果

    有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...

  3. Android RecyclerView实现类似于老虎机抽奖,数字滚动等动画效果

    1.RecyclerViewLoopScrollAnimation项目介绍 RecyclerViewLoopScrollAnimation 适用于Android RecyclerView的循环滚动动画 ...

  4. android 文字fly动画,超好看的下拉刷新动画Android代码实现

    最近看到了好多高端.大气.上档次的动画效果,如果给你的项目中加上这些动画,相信你的app一定很优秀,今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画. 首先我们看一下效果如何: 怎么样 ...

  5. vue 数字动画递增_数字滚动动画效果 vue组件化

    主要思路是利用css属性writing-mode:vertical-lr:通过设定最大字符长度,补零,去循环,然后添加style translate和transition来完成想要的效果: 子组件根据 ...

  6. 初级开发者福音:手把手教你实现数字滚动效果~

    文章目录 一.前言 二.背景知识 三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件 一.前言 前端数字滚动显示的场景很多, ...

  7. 数字滚动_告别单调!让PPT数字滚动起来。

    大家好,我是三石. 在PPT的制作过程中,数字是不可缺少的元素.如何设计制作,才能使简单的数字变得有活力. 废话不多说看效果~ 其实制作方式很简单,跟着我的步骤你也能做出来.制作步骤: 1.首先要制作 ...

  8. 数字滚动组件(react)

    基于react实现一个数字滚动组件(vue也一样,逻辑相同) 直接上代码 1.number-roll.tsx interface NumberRollProps {value: number; } c ...

  9. qt同时两个动画执行_Qt实现数字滚动动画效果

    自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...

最新文章

  1. 为什么vue.js一眼看上去很美?
  2. 笔记本电脑性价比排行2019_办公笔记本电脑排名2019 五款适合办公的笔记本电脑推荐...
  3. L2正则没有想象那么好?可能是“权重尺度偏移”惹的祸
  4. ubuntu 下review board一遍安装成功
  5. android 更改edittext内容,Android如何实时更改edittext的内容
  6. 软件系统命名简称大全
  7. mysql 储存特殊符号表情报错
  8. Equations of Mathematical Magic题解
  9. JD最新青龙面板+诺兰方舟星链计划对接傻妞芝士等机器人网页短信搭建教程+拉库教程+资产一对一推送教程
  10. lol8月21号服务器维护,8月21日lol维护公告最新 8.21lol维护到几点
  11. 以太坊 2.0 中的验证者经济模型,Part-1
  12. Java心理健康测试系统
  13. java数组列表_java – 如何显示数组列表中的所有元素?
  14. OpenGL PBO渲染视频数据 [转]
  15. Las Vegas Sands Purchase May Tell More About Macau
  16. 子女通过TeamViewer远程帮助父母解决手机使用问题
  17. 为什么大厂一边裁员,一边招聘?
  18. Tomcat 自定义启动startup.bat文件
  19. 如何修复mp4a编码音频
  20. BET测试常见问题及解答(一)

热门文章

  1. LVS+keepalived 实现高可用与负载均衡实施方案
  2. 程序员杂记:兴趣井”与“机遇缝”
  3. 后台服务器经典面试题
  4. Xilinx 推出 reVISION,继续拓展机器学习市场
  5. Android Studio一直build、一直refreshing、一直buiding gradle project into的终极解决办法...
  6. AppCan用cookie实现记住密码功能 [APP]
  7. 一些关于反汇编与逆向方面的博文分享
  8. 各种SmartPhone上的跨平台开源框架的总结
  9. Base64编码原理与实现
  10. 一个c语言构造函数调用的问题(有趣)