文档章节

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

秦无炎
 秦无炎
发布于 2016/10/14 09:52
字数 754
阅读 180
收藏 1

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

呼吸灯效果图

第一种方式使用定时器加 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

本文转载自:

秦无炎
粉丝 4
博文 128
码字总数 6363
作品 0
朝阳
程序员
私信 提问
iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用。(http://www.code4app.com/thread-10375-1-1.html) 使用OpenGLE覆盖阿尔法通道视频动画播放器视图。(http://www.code4app.com/thread-3...

sunnyaigd
2018/07/31
26
0
iOS基于FreeStreamer的仿网易云音乐播放器

前言 前段时间写过一个基于VLCKit实现的网易云音乐播放demo-GKAudioPlayerDemo,以及3篇文章 iOS-VLCKit实现仿网易云音乐播放音乐(一) iOS-VLCKit实现仿网易云音乐播放音乐(二) iOS-VLCK...

QuintGao
2018/05/11
0
0
iOS中使用schema协议调用APP和使用iframe打开APP的例子

在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核...

BearCatYN
2015/06/12
2.6K
1
iOS中的CADisplayLink定时器

iOS中的CADisplayLink定时器 说到定时器,在iOS中最常用的为NSTimer类,其实CADisplayLink类在某些场景下使用,要比NSTimer类更加适合。首先CADisplayLink也是一种定时器,并且其和屏幕的刷新...

珲少
2018/07/05
230
0
iOS自定义弹出视图、收音机APP、图片涂鸦、加载刷新、文件缓存等源码

iOS精选源码 一款优秀的 聆听夜空FM 源码(http://www.code4app.com/thread-14546-1-1.html) zhPopupController 简单快捷弹出自定义视图(http://www.code4app.com/thread-14861-1-1.html) WHS......

sunnyaigd
2018/06/04
26
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac 下 brew 使用国内的镜像源

## 阿里云## 阿里云 # 替换brew.gitcd "$(brew --repo)"git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git# 替换homebrew-core.gitcd "$(brew --repo)/Library/......

子枫Eric
22分钟前
3
0
Java 格林威治时间字符串转本地Date对象

//import org.apache.commons.lang.StringUtils; /** * * 功能描述: 格林威治时间字符串转本地时间Date * * @param: [strDate] * @return: java.ut...

SummerGao
23分钟前
5
0
二叉搜索树的第 K 个节点

利用二叉查找树中序遍历有序的特点。 private TreeNode ret;private int cnt = 0;public TreeNode KthNode(TreeNode pRoot, int k) { inOrder(pRoot, k); return ret;}...

Garphy
34分钟前
4
0
调用约定

对于常见的指令集,在指令层面没有所谓的“函数”概念,只有“子程序”概念。子程序是存储在“主程序”之外的一段指令。子程序通过call指令调用,通过ret指令返回。子程序可以使用内存、堆栈...

tommwq
今天
3
0
设计类题目

1. 订单 和 退货单之间有什么关系? 答:退货单是 用 用户提交退货 和 订单生成的 或者 订单和退货单都是一张单子,用一个状态标识 2. 在这种由源头单生成的流程中,第二张单子是怎样生成的?...

杨凯123
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部