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

最近公司需求作个相似小红书的标签呼吸灯动画,通过一段时间研究使用两种方式实现了该效果… 第一种方式使用定时器加 UIView动画,核心方法以下   -(void)begigFlashAnimation { // 缩放 + 透明度动画 self.flashView.transform = CGAffineTransformMakeScale(0.1, 0.1); [UIView animateWithDuration:3 animations:^{ self.flashView.transform = CGAffineTransformMakeScale(1,1); self.flashView.alpha = 1.0; [UIView beginAnimations:@"flash" context:nil]; [UIView setAnimationDuration:2]; [UIView setAnimationCurve:UIViewAnimationCurveLinear]; self.flashView.alpha = 0; [UIView commitAnimations]; }]; } 第二种方式使用核心动画的动画组,核心方法以下   - (CAAnimationGroup *)groups { if (!_groups) { // 缩放动画 CABasicAnimation * scaleAnim = [CABasicAnimation animation]; scaleAnim.keyPath = @"transform.scale"; scaleAnim.fromValue = @0.1; scaleAnim.toValue = @1; scaleAnim.duration = 2; // 透明度动画 CABasicAnimation *opacityAnim=[CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnim.fromValue= @1; opacityAnim.toValue= @0.1; opacityAnim.duration= 2; // 建立动画组 _groups =[CAAnimationGroup animation]; _groups.animations = @[scaleAnim,opacityAnim]; _groups.removedOnCompletion = NO; _groups.fillMode = kCAFillModeForwards; _groups.duration = 2; _groups.repeatCount = FLT_MAX; } return _groups; } 对比两种方法,第一种方法须要使用定时器,第二个则不须要,不知道这样是否第二个性能性对来讲会好点呢? DEMO:https://github.com/Caiflower/XXTwinkleView 原文地址:http://bbs.520it.com/forum.php?mod=viewthread&tid=2492   ② 以前写了篇关于呼吸灯动画的,有几个朋友问我应用场景,恰好最近有用到,借此来实际应用下,先看看效果图; 看了上面图片相信能想到一些实际的应用场景了吧 这里我已经将此控件简单封装了下, 你能够这么用   // 建立 并设置标题,显示位置 self.markView = [XXMarkTwinkleView markViewWithTitle:@"韩式波波头" showInRight: YES]; // 宽度不用传,内部自适应了,若是对字体没有太大要求,高度其实也能够在内部固定 self.markView.frame = CGRectMake(230, 320, 0, 30); // 设置文字颜色 self.markView.textColor = [UIColor redColor]; [self.view addSubview:self.markView]; 也能够这么用   // 快读建立一个呼吸灯view XXTwinkleView *twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2]; // 根据呼吸灯view建立 标签 XXMarkTwinkleView *markView1 = [[XXMarkTwinkleView alloc]initWithTwinkleView:self.twinkleView showInRight:NO]; // 设置标题 markView1.title = @"波波头"; // 宽度自适应不须要传宽度 markView1.frame = CGRectMake(120, 360, 0, 30); [self.view addSubview:markView1]; 并无啥难点就作了个自适应宽度,只须要设置呼吸灯控件的位置,内部会根据标签显示在左边仍是右边,后台返回呼吸灯控件的位置,咱们根据呼吸灯的位置来建立标签,因此外面设置frame中的x,y应该是呼吸灯控件的中心点,因此这里须要注意的是,如何在内部修改控件的位置,具体方法以下   - (void)layoutSubviews { [super layoutSubviews]; // 下移一半 CGRect tmpBounds = self.bounds; tmpBounds.origin.y -= self.cf_height * 0.5; self.bounds = tmpBounds; // 根据标签显示的位置,布局子控件 if (self.isShowInRight) { self.twinkleView.frame = CGRectMake(-kTwinkleWidth * 0.5, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth); self.tagLable.frame = CGRectMake(self.twinkleView.cf_maxX + kContentMargin, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height); // 设置宽度 self.cf_width = self.tagLable.cf_maxX; }else {   self.tagLable.frame = CGRectMake(0, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height); self.twinkleView.frame = CGRectMake(self.tagLable.cf_maxX + kContentMargin, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth); // 计算宽度 CGFloat width = self.twinkleView.cf_minX + kTwinkleWidth * 0.5; // 修改x值 self.cf_x = self.cf_x - width; // 设置宽度 self.cf_width = width ; } // 设置圆角半径 self.tagLable.layer.cornerRadius = self.cf_height * 0.5; } 具体效果请看 https://github.com/Caiflower/XXTwinkleView   原文地址: http://bbs.520it.com/forum.php?mod=viewthread&tid=2516