您的位置：首页 > 移动开发 > IOS开发

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

2016-10-14 00:00 771 查看

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

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

-(void)begigFlashAnimation{

//缩放+透明度动画

self.flashView.transform=CGAffineTransformMakeScale(0.1,0.1);

[UIViewanimateWithDuration:3animations:^{

self.flashView.transform=CGAffineTransformMakeScale(1,1);

self.flashView.alpha=1.0;

[UIViewbeginAnimations:@"flash"context:nil];

[UIViewsetAnimationDuration:2];

[UIViewsetAnimationCurve:UIViewAnimationCurveLinear];

self.flashView.alpha=0;

[UIViewcommitAnimations];

}];

}

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

-(CAAnimationGroup*)groups{

if(!_groups){

//缩放动画

CABasicAnimation*scaleAnim=[CABasicAnimationanimation];

scaleAnim.keyPath=@"transform.scale";

scaleAnim.fromValue=@0.1;

scaleAnim.toValue=@1;

scaleAnim.duration=2;

//透明度动画

CABasicAnimation*opacityAnim=[CABasicAnimationanimationWithKeyPath:@"opacity"];

opacityAnim.fromValue=@1;

opacityAnim.toValue=@0.1;

opacityAnim.duration=2;

//创建动画组

_groups=[CAAnimationGroupanimation];

_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=[XXMarkTwinkleViewmarkViewWithTitle:@"韩式波波头"showInRight:YES];

//宽度不用传,内部自适应了,如果对字体没有太大要求,高度其实也可以在内部固定

self.markView.frame=CGRectMake(230,320,0,30);

//设置文字颜色

self.markView.textColor=[UIColorredColor];

[self.viewaddSubview:self.markView];

也可以这么用

//快读创建一个呼吸灯view

XXTwinkleView*twinkleView=[[XXTwinkleViewalloc]initWithColor:[UIColorredColor]edgeColor:[UIColorwhiteColor]circleWidth:8edgeWidth:2];

//根据呼吸灯view创建标签

XXMarkTwinkleView*markView1=[[XXMarkTwinkleViewalloc]initWithTwinkleView:self.twinkleViewshowInRight:NO];

//设置标题

markView1.title=@"波波头";

//宽度自适应不需要传宽度

markView1.frame=CGRectMake(120,360,0,30);

[self.viewaddSubview:markView1];

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

-(void)layoutSubviews{

[superlayoutSubviews];

//下移一半

CGRecttmpBounds=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);

//计算宽度

CGFloatwidth=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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航