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