封装iOS动画动画

雷达动画效果

2016-06-07  本文已影响189人  哈哈大p孩

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

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

上一篇 下一篇

猜你喜欢

热点阅读