雷达动画效果

作者: 哈哈大p孩 | 来源:发表于2016-06-07 17:26 被阅读189次

    项目中有用到关于雷达扩散的那种动画效果,研究了下,在这里分享一下。
    直接上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

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

    相关文章

      网友评论

      本文标题:雷达动画效果

      本文链接:https://www.haomeiwen.com/subject/albddttx.html