iOS开发指南iOS-CoreAnimationiOS 开发

iOS中雷达波扩散Layer层动画的实现

2016-10-17  本文已影响1162人  来自南方的熊

这是我在CSDN写的网址:
http://blog.csdn.net/cool_bear_xx/article/details/45194807

iOS中雷达波扩散动画的实现,该动画是一个基于layer层的动画
之前做的一个效果图如下图所示:

以前.png

现在对之前的做一定的修改,在另一个地方使用,
看代码,我解释一下有的地方,meHeardView是自定义的TableViewheardView,上面添加了头像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
上一篇下一篇

猜你喜欢

热点阅读