项目中有用到关于雷达扩散的那种动画效果,研究了下,在这里分享一下。
直接上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如果你也喜欢的话,点个赞吧~
网友评论