先上效果圖（因為自己作圖麻煩，圖示用的他人的性雄，這位博主也寫了這個效果，用的是 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.從按鈕的中心擴出一個圓環(huán)來：這一步用的是基礎動畫：代碼如下
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.擴圓動畫結(jié)束后按鈕周圍的原點效果:這一步相對比較難厂镇，首先要算好各個小圓點的位置纤壁，我用到了正余弦函數(shù)，然后根據(jù)圓的半徑算出了相對于圓心的位置捺信，后來給這些小圓點加了縮放酌媒，給他的父級 layer 加了放大，旋轉(zhuǎn)動畫（這可能還有別的思路迄靠，大家可以多多思考）秒咨。
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;
// 圓環(huán)半徑
CGFloat banjing = self.bounds.size.width / 2;
// 各個點相對于中心點的偏移量 根據(jù)正余弦函數(shù)計算
CGFloat shapeX = banjing * cos(angle);
CGFloat shapeY = banjing * sin(angle);
// 設置圓環(huán)的大小
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"];
// 旋轉(zhuǎn)
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雨席、參考鏈接
