雷达动画效果

项目中有用到关于雷达扩散的那种动画效果,研究了下,在这里分享一下。
直接上demo源码。

//定义两个属性
@property (nonatomic, strong) CALayer *layer_1;
@property (nonatomic, strong) CALayer *layer_2;
//分别进行懒加载
- (CALayer *)layer_1{
    if (!_layer_1) {
        _layer_1 = [CALayer layer];
//        _layer_1.delegate = self;
    }
    return _layer_1;
}

- (CALayer *)layer_2{
    if (!_layer_2) {
        _layer_2 = [CALayer layer];
//        _layer_2.delegate = self;
    }
    return _layer_2;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    //你的view的中心位置,在这里我自定义个MyView,作为视图的中心位置
    UIView *MyView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2, self.view.frame.size.height / 2, 2, 2)];
    MyView.backgroundColor = [UIColor redColor];
    [self.view addSubview:MyView];
    
    
    self.layer_1.bounds = MyView.bounds;
    self.layer_1.position = MyView.center;
    self.layer_1.cornerRadius = MyView.frame.size.width / 2;
    self.layer_1.backgroundColor = [UIColor colorWithRed:35 / 255.0 green:112 / 255.0 blue:192 / 255.0 alpha:1.0].CGColor;
    [self.view.layer addSublayer:self.layer_1];
    
    //透明度的添加,从深到浅
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = [NSNumber numberWithFloat:0.7];
    opacityAnimation.toValue = [NSNumber numberWithFloat:0.01];
    
    //x,y轴一起延伸缩放
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:0.5];
    scaleAnimation.toValue = [NSNumber numberWithFloat:self.view.frame.size.width / 2];
    scaleAnimation.duration = 3.0f;
    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    //设置两个动画,用个动画组
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 3.0f;
    animationGroup.fillMode = kCAFillModeBackwards;
    animationGroup.autoreverses = NO;   //是否重播,原动画的倒播
    animationGroup.repeatCount = NSNotFound;//HUGE_VALF;     //HUGE_VALF,源自math.h
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.delegate = self;
    animationGroup.removedOnCompletion = NO;
    //将动画效果添加进动画组里
    [animationGroup setAnimations:[NSArray arrayWithObjects:opacityAnimation, scaleAnimation, nil]];
    
    [self.layer_1 addAnimation:animationGroup forKey:nil];
    
    self.layer_2.bounds = MyView.bounds;
    self.layer_2.position = MyView.center;
   self.layer_2.cornerRadius = MyView.frame.size.width/2.0;
    self.layer_2.backgroundColor = [UIColor colorWithRed:35 / 255.0 green:112 / 255.0 blue:192 / 255.0 alpha:1.0].CGColor;
    [self.view.layer insertSublayer:self.layer_2 below:self.layer_1];
    
    animationGroup.beginTime = CACurrentMediaTime() + 1.5;
    animationGroup.fillMode = kCAFillModeBackwards;
    animationGroup.removedOnCompletion = NO;
    [self.layer_2 addAnimation:animationGroup forKey:nil];
}

当然了,还有代理方法

- (void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"动画开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"动画停止了");
}

效果图如下:

ddtu.gif

如果你也喜欢的话,点个赞吧~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,118评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,271评论 4 61
  • 如果你知道了一个人的好,一个人得坏,可是还是爱他,还是想和他在一起,可能就是爱情吧。
    呢喃91阅读 193评论 0 0
  • 思维成了妥协者维护现状的方式和剥削者所做的政治方式,就成另一个花生镇而已,吉安主义者们构成的世界,每个人似乎都做自...
    cyansaber阅读 371评论 0 0
  • 快四个月了。一直以来只有这件事是能坚持下来的,呵呵呵。所以以后所有的事要坚持下来,别半途而废了。减肥,看书都得坚持...
    简书2468阅读 214评论 0 0