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

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

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