iOS 给按钮加上形似阳光的动画

先上效果图（因为自己作图麻烦，图示用的他人的，这位博主也写了这个效果，用的是 swift）和demo 地址

效果图

废话不多说，先拆分动画：
1.按钮图标放大缩小：这一步用的是关键帧动画，主要代码如下

CAKeyframeAnimation * scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.duration = 1;
scaleAnimation.values = @[@0.6, @1, @0.8, @1];
[self.foregroundLayer.mask addAnimation:scaleAnimation forKey:@"transform.scale"];

2.从按钮的中心扩出一个圆环来：这一步用的是基础动画：代码如下

CABasicAnimation * diffuseAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
diffuseAnimation.duration = 0.5;
CGSize size = self.bounds.size;
UIBezierPath  *fromPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(size.width/ 2, size.height / 2) radius:size.width / 4 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
UIBezierPath  *toPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(size.width/ 2, size.height / 2) radius:size.width / 2 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
diffuseAnimation.fromValue = (__bridge id _Nullable)(fromPath.CGPath);
diffuseAnimation.toValue = (__bridge id _Nullable)(toPath.CGPath); diffuseAnimation.delegate = self;
[self.circleLayer addAnimation:diffuseAnimation forKey:@"path"];

3.扩圆动画结束后按钮周围的原点效果:这一步相对比较难，首先要算好各个小圆点的位置，我用到了正余弦函数，然后根据圆的半径算出了相对于圆心的位置，后来给这些小圆点加了缩放，给他的父级 layer 加了放大，旋转动画（这可能还有别的思路，大家可以多多思考）。

 if (self.backgroundLayer) {
        [self.backgroundLayer removeFromSuperlayer];
    }
    self.backgroundLayer = [CALayer layer];
    self.backgroundLayer.frame = self.bounds;
    for (int i = 0; i < self.shapeAry.count; i ++) {
        
        CAShapeLayer * shape = self.shapeAry[i];
        
        // 计算各个点相对于中心点的角度（相对于 x 轴和 y 轴的角度）
        CGFloat angle = M_PI * 2 / self.shapeAry.count * i;
        // 圆环半径
        CGFloat  banjing  = self.bounds.size.width / 2;
        // 各个点相对于中心点的偏移量 根据正余弦函数计算
        CGFloat shapeX = banjing * cos(angle);
        CGFloat shapeY = banjing * sin(angle);
        // 设置圆环的大小
        CGFloat shapeW = i % 2 == 0 ? 10.f : 6.f;
        CGFloat shapeH = i % 2 == 0 ? 10.f : 6.f;
    
        // 设置 frame
        shape.frame = CGRectMake(shapeX + banjing - shapeW / 2, shapeY + banjing - shapeH / 2, shapeW, shapeH);
        // 设置填充色
        shape.fillColor = [UIColor colorWithRed:(arc4random() % 255)/ 255.0 green:(arc4random() % 255)/ 255.0 blue:(arc4random() % 255)/ 255.0 alpha:1].CGColor;
        
        [self.backgroundLayer addSublayer:shape];
        
        // 点变小
        CABasicAnimation * basicAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        basicAnimation.duration = 0.5;
        basicAnimation.fromValue = (__bridge id _Nullable)[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, shapeW, shapeH)].CGPath;
        basicAnimation.toValue = (__bridge id _Nullable)[UIBezierPath bezierPathWithOvalInRect:CGRectMake(shapeW / 2, shapeH / 2, 0, 0)].CGPath;
        [shape addAnimation:basicAnimation forKey:@"path"];

        // 旋转
        CABasicAnimation * rote = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        rote.duration = 0.5;
        rote.fromValue = [NSNumber numberWithFloat:0];
        rote.toValue = [NSNumber numberWithFloat:1];
        [self.backgroundLayer addAnimation:rote forKey:@"transform.rotation.z"];
        
        // 放大
        CAKeyframeAnimation * scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
        scaleAnimation.duration = 0.5;
        scaleAnimation.values = @[@0.8, @1.4];
        scaleAnimation.fillMode = kCAFillModeForwards;
        scaleAnimation.removedOnCompletion = NO;
        [self.backgroundLayer addAnimation:scaleAnimation forKey:@"transform.scale"];
    }
    [self.layer addSublayer:self.backgroundLayer];

最后：
1、大家不喜勿喷，喜欢的可以 star
2、参考链接