iOS中雷达波扩散Layer层动画的实现
2016-10-17 本文已影响1162人
来自南方的熊
这是我在CSDN写的网址:
http://blog.csdn.net/cool_bear_xx/article/details/45194807
iOS中雷达波扩散动画的实现,该动画是一个基于layer
层的动画
之前做的一个效果图如下图所示:
现在对之前的做一定的修改,在另一个地方使用,
看代码,我解释一下有的地方,meHeardView
是自定义的TableView
的heardView
,上面添加了头像Button
,人物名称和等级Label
。这个动画Layer
是把层级关系移动到头像Button的下方,这样不会挡住按钮的显示。config.diyGreenColor
,是我用单例写的自定义的颜色,你可以自己设置其他值。
/*--------------- 扩散动画 ---------------*/
CALayer * spreadLayer;
spreadLayer = [CALayer layer];
CGFloat diameter = 130; //扩散的大小
spreadLayer.bounds = CGRectMake(0,0, diameter, diameter);
spreadLayer.cornerRadius = diameter/2; //设置圆角变为圆形
spreadLayer.position = personImageButton.center;
spreadLayer.backgroundColor = [config.diyGreenColor CGColor];
[meHeardView.layer insertSublayer:spreadLayer below:personImageButton.layer];//把扩散层放到头像按钮下面
CAMediaTimingFunction * defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 3;
animationGroup.repeatCount = INFINITY;//重复无限次
animationGroup.removedOnCompletion = NO;
animationGroup.timingFunction = defaultCurve;
//尺寸比例动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
scaleAnimation.fromValue = @0.7;//开始的大小
scaleAnimation.toValue = @1.0;//最后的大小
scaleAnimation.duration = 3;//动画持续时间
//透明度动画
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = 3;
opacityAnimation.values = @[@0.4, @0.45,@0];//透明度值的设置
opacityAnimation.keyTimes = @[@0, @0.2,@1];//关键帧
opacityAnimation.removedOnCompletion = NO;
animationGroup.animations = @[scaleAnimation, opacityAnimation];//添加到动画组
[spreadLayer addAnimation:animationGroup forKey:@"pulse"];
/*---------------------------------------*/
动画效果截图,这种动画效果就简单实现了,想要多圈雷达波的,自己循环写几个Layer就可以了。
屏幕快照 2016-10-17 下午5.32.39.png屏幕快照 2016-10-17 下午5.32.58.png