iOS使用[核心动画]和[定时器]两种方式实现【呼吸灯动画】(仿蘑菇街价格标签)...

本文主要是介绍iOS使用[核心动画]和[定时器]两种方式实现【呼吸灯动画】(仿蘑菇街价格标签)...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近公司需求做个类似小红书的标签呼吸灯动画,经过一段时间研究使用两种方式实现了该效果…

呼吸灯效果图

第一种方式使用定时器加 UIView动画,核心方法如下

 
  1. -(void)begigFlashAnimation {
  2. // 缩放 + 透明度动画
  3. self.flashView.transform = CGAffineTransformMakeScale(0.1, 0.1);
  4. [UIView animateWithDuration:3 animations:^{
  5. self.flashView.transform = CGAffineTransformMakeScale(1,1);
  6. self.flashView.alpha = 1.0;
  7. [UIView beginAnimations:@"flash" context:nil];
  8. [UIView setAnimationDuration:2];
  9. [UIView setAnimationCurve:UIViewAnimationCurveLinear];
  10. self.flashView.alpha = 0;
  11. [UIView commitAnimations];
  12. }];
  13. }

第二种方式使用核心动画的动画组,核心方法如下

 
  1. - (CAAnimationGroup *)groups {
  2. if (!_groups) {
  3. // 缩放动画
  4. CABasicAnimation * scaleAnim = [CABasicAnimation animation];
  5. scaleAnim.keyPath = @"transform.scale";
  6. scaleAnim.fromValue = @0.1;
  7. scaleAnim.toValue = @1;
  8. scaleAnim.duration = 2;
  9. // 透明度动画
  10. CABasicAnimation *opacityAnim=[CABasicAnimation animationWithKeyPath:@"opacity"];
  11. opacityAnim.fromValue= @1;
  12. opacityAnim.toValue= @0.1;
  13. opacityAnim.duration= 2;
  14. // 创建动画组
  15. _groups =[CAAnimationGroup animation];
  16. _groups.animations = @[scaleAnim,opacityAnim];
  17. _groups.removedOnCompletion = NO;
  18. _groups.fillMode = kCAFillModeForwards;
  19. _groups.duration = 2;
  20. _groups.repeatCount = FLT_MAX;
  21. }
  22. return _groups;
  23. }

对比两种方法,第一种方法需要使用定时器,第二个则不需要,不知道这样是否第二个性能性对来说会好点呢?

DEMO:https://github.com/Caiflower/XXTwinkleView

原文地址:http://bbs.520it.com/forum.php?mod=viewthread&tid=2492

 

之前写了篇关于呼吸灯动画的,有几个朋友问我应用场景,刚好最近有用到,借此来实际应用下,先看看效果图;

看了上面图片相信能想到一些实际的应用场景了吧
这里我已经将此控件简单封装了下,

你可以这么用

 
  1. // 创建 并设置标题,显示位置
  2. self.markView = [XXMarkTwinkleView markViewWithTitle:@"韩式波波头" showInRight: YES];
  3. // 宽度不用传,内部自适应了,如果对字体没有太大要求,高度其实也可以在内部固定
  4. self.markView.frame = CGRectMake(230, 320, 0, 30);
  5. // 设置文字颜色
  6. self.markView.textColor = [UIColor redColor];
  7. [self.view addSubview:self.markView];

也可以这么用

 
  1. // 快读创建一个呼吸灯view
  2. XXTwinkleView *twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
  3. // 根据呼吸灯view创建 标签
  4. XXMarkTwinkleView *markView1 = [[XXMarkTwinkleView alloc]initWithTwinkleView:self.twinkleView showInRight:NO];
  5. // 设置标题
  6. markView1.title = @"波波头";
  7. // 宽度自适应不需要传宽度
  8. markView1.frame = CGRectMake(120, 360, 0, 30);
  9. [self.view addSubview:markView1];

并没有啥难点就做了个自适应宽度,只需要设置呼吸灯控件的位置,内部会根据标签显示在左边还是右边,后台返回呼吸灯控件的位置,我们根据呼吸灯的位置来创建标签,所以外面设置frame中的x,y应该是呼吸灯控件的中心点,所以这里需要注意的是,如何在内部修改控件的位置,具体方法如下

 
  1. - (void)layoutSubviews {
  2. [super layoutSubviews];
  3. // 下移一半
  4. CGRect tmpBounds = self.bounds;
  5. tmpBounds.origin.y -= self.cf_height * 0.5;
  6. self.bounds = tmpBounds;
  7. // 根据标签显示的位置,布局子控件
  8. if (self.isShowInRight) {
  9. self.twinkleView.frame = CGRectMake(-kTwinkleWidth * 0.5, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
  10. self.tagLable.frame = CGRectMake(self.twinkleView.cf_maxX + kContentMargin, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
  11. // 设置宽度
  12. self.cf_width = self.tagLable.cf_maxX;
  13. }else {
  14.  
  15. self.tagLable.frame = CGRectMake(0, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
  16. self.twinkleView.frame = CGRectMake(self.tagLable.cf_maxX + kContentMargin, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
  17. // 计算宽度
  18. CGFloat width = self.twinkleView.cf_minX + kTwinkleWidth * 0.5;
  19. // 修改x值
  20. self.cf_x = self.cf_x - width;
  21. // 设置宽度
  22. self.cf_width = width ;
  23. }
  24. // 设置圆角半径
  25. self.tagLable.layer.cornerRadius = self.cf_height * 0.5;
  26. }

具体效果请看 https://github.com/Caiflower/XXTwinkleView

 

原文地址: http://bbs.520it.com/forum.php?mod=viewthread&tid=2516

转载于:https://my.oschina.net/u/2345393/blog/758307

这篇关于iOS使用[核心动画]和[定时器]两种方式实现【呼吸灯动画】(仿蘑菇街价格标签)...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

shell脚本批量导出redis key-value方式

《shell脚本批量导出rediskey-value方式》为避免keys全量扫描导致Redis卡顿,可先通过dump.rdb备份文件在本地恢复,再使用scan命令渐进导出key-value,通过CN... 目录1 背景2 详细步骤2.1 本地docker启动Redis2.2 shell批量导出脚本3 附录总

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中,分布

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的

Oracle查询表结构建表语句索引等方式

《Oracle查询表结构建表语句索引等方式》使用USER_TAB_COLUMNS查询表结构可避免系统隐藏字段(如LISTUSER的CLOB与VARCHAR2同名字段),这些字段可能为dbms_lob.... 目录oracle查询表结构建表语句索引1.用“USER_TAB_COLUMNS”查询表结构2.用“a

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

深度解析Spring Security 中的 SecurityFilterChain核心功能

《深度解析SpringSecurity中的SecurityFilterChain核心功能》SecurityFilterChain通过组件化配置、类型安全路径匹配、多链协同三大特性,重构了Spri... 目录Spring Security 中的SecurityFilterChain深度解析一、Security

Python安装Pandas库的两种方法

《Python安装Pandas库的两种方法》本文介绍了三种安装PythonPandas库的方法,通过cmd命令行安装并解决版本冲突,手动下载whl文件安装,更换国内镜像源加速下载,最后建议用pipli... 目录方法一:cmd命令行执行pip install pandas方法二:找到pandas下载库,然后

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.