typedef NS_ENUM(NSUInteger, FlashButtonType){
  # 風格定義一個枚舉類型的去表示 分別是代表動畫在里面和外面 (便于理解)
  DDFlashButtonInner = 0,
  DDFlashButtonOuter = 1

};
# 定義的兩個屬性
@property (strong, nonatomic) UIColor *flashColor;
@property (assign, nonatomic) FlashButtonType buttonType;

# 寫這個方法可以對 View 的子視圖上的子控件進行操作, 可以不把子控件都暴露出去
- (void)setText:(NSString *)text withTextColor:(UIColor *)textColor;

- (instancetype) initWithFrame:(CGRect)frame{

  if (self = [super initWithFrame:frame]) {
# 創(chuàng)建手勢 并添加到 View 上
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTap:)];
     [self addGestureRecognizer:tap];
    self.textLabel = [[UILabel alloc] initWithFrame:self.bounds];
    self.textLabel.backgroundColor = [UIColor clearColor];
    [self.textLabel setTextAlignment:NSTextAlignmentCenter];
    [self addSubview:self.textLabel];
    self.backgroundColor = [UIColor cyanColor];
# 給一個默認的風格 不設置就是代表 動畫在里面
    self.buttonType = DDFlashButtonInner;
  }  
  return self;
}

- (void)setText:(NSString *)text withTextColor:(UIColor *)textColor
{
# 就是給 Label 賦外界傳來的值 若有其他的控件可以改一些參數(shù)用此方法
  if (text)
  {
    [self.textLabel setText:text];
  }
  if (textColor)
  {
    [self.textLabel setTextColor:textColor];
  }
}

# 這里就是重寫了ButtonType setter方法,同時判斷一下風格根據(jù)風格選擇是否把超過視圖 View 的部分裁剪掉
- (void)setButtonType:(FlashButtonType)buttonType
{
  _buttonType = buttonType;
    if (buttonType == DDFlashButtonInner)
  {
// 內(nèi)容和子視圖是夾在視圖的邊界內(nèi) ( 只允許 view范圍內(nèi)有子視圖和類容可以顯示 )
    self.clipsToBounds = 1;
  }else
  {// 外面可以顯示
    self.clipsToBounds = 0;
  }
}

- (CAAnimationGroup *)createFlashAnimationWisthScale:(CGFloat)scale
                      duration:(CGFloat)duratiton
{
# 創(chuàng)建按比例收縮變大的動畫
// 指定要在渲染動畫性能時的關鍵路徑 也就是圖形轉換的方式 這里是按收縮比例 這里也可以不用.scale 因為我們初始值設置是根據(jù)CATransform3D
  CABasicAnimation *scaleAnnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 動畫開始點
  // 這個動畫效果初值 就是本身的原始的位置
  scaleAnnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
  // 等價 scaleAnnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
// 動畫結束點
  // 在 x 軸和 y 軸的變化比例
  scaleAnnimation.toValue = [NSValue valueWithCATransform3D:(CATransform3DMakeScale(scale, scale, 1))];

# 創(chuàng)建透明度變換的動畫 
 CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
  alphaAnimation.fromValue = @1;
  alphaAnimation.toValue = @0;

# 創(chuàng)建動畫組把上面兩個動畫加進去 
  CAAnimationGroup *animation = [CAAnimationGroup new];
  animation.animations = @[scaleAnnimation,alphaAnimation];
// 動畫效果 (節(jié)奏, Timing Function的會被用于變化起點和終點之間的插值計算.形象點說是Timing Function決定了動畫運行的節(jié)奏(Pacing),比如是均勻變化(相同時間變化量相同),先快后慢,先慢后快還是先慢再快再慢.)
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

# 返回我們想要的動畫效果組 
  return animation;
}

- (CAShapeLayer *)creatCircleShapWithPostion:(CGPoint)position
                  pathRect:(CGRect)rect
                   radius:(CGFloat)radius
{
  CAShapeLayer *circleShap = [CAShapeLayer layer];

// 從貝塞爾曲線取到形狀
  circleShap.path = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:radius].CGPath;

// 雖然得到了形狀, 但是并沒有得到具體的 frame(bounds) 也就是實際上并沒有范圍 只是可以展現(xiàn)動畫的效果 那么錨點其實就是設置的位置點
  circleShap.position = position;
  if (self.buttonType == DDFlashButtonInner)
  {
# 在這里設置 frame 就是為了滿足我們想要的錨點位置讓動畫效果動起來, 下面也一樣, 可以不設置試試效果就明白了!
   // circleShap.bounds = CGRectMake(0, 0, radius *2, radius *2);
   circleShap.frame = CGRectMake(position.x-radius, position.y-radius, radius*2, radius*2);
    // 線寬
    circleShap.lineWidth = 1;
    // 填充的顏色 不設置默認就給黃色
    circleShap.fillColor = self.flashColor ? self.flashColor.CGColor:[UIColor yellowColor].CGColor;

  }else
  {
     circleShap.frame = self.bounds;
   // 線寬
    circleShap.lineWidth = 5;
    circleShap.fillColor = [UIColor clearColor].CGColor;
  // 邊緣線的顏色 不設置就默認給個紫色
  circleShap.strokeColor = self.flashColor ? self.flashColor.CGColor:[UIColor purpleColor].CGColor;

  }

  // 不透明度 要設置成透明的 不然內(nèi)部風格的時候會畫出來圖案點點
  circleShap.opacity = 0;
  return circleShap;
}

- (void)didTap:(UITapGestureRecognizer *)tapGesture
{
// 獲取點擊點的位置
  CGPoint tapLocation = [tapGesture locationInView:self];
// 定義一個圖層 下面分情況去給予不同形狀  
 CAShapeLayer *circleShape = nil;
// 默認一個變化比例 1 倍
   CGFloat scale = 1.0f;
// 獲取 View 的寬和高
   CGFloat width = self.bounds.size.width, height = self.bounds.size.height;
   if (self.buttonType == DDFlashButtonInner)
  {
# 這里就是在視圖內(nèi)部效果, 就是以點擊的點為圓心 畫一個小圓(這里是半徑為1) 然后讓它動畫起來 (不斷的變大并變透明) 所以放大倍數(shù)只要能到最大的變就行了 不一定非要這樣寫, 你開心就好!
    CGFloat biggerEdge = width > height ? width :height; 
    CGFloat radius = 1
    scale = biggerEdge / radius + 0.5;
# 調(diào)用方法獲得圖層 錨點位置就是點擊的位置
circleShape = [self creatCircleShapWithPostion:CGPointMake(tapLocation.x , tapLocation.y ) pathRect:CGRectMake(0, 0, radius * 2, radius * 2) radius:radius];   
  }else
  {
# 這個是外部動畫效果 設置能放大5.5倍
    scale = 5.5f;
# 錨點位置在 View 的中心 這個圖層和 View 是一樣的形狀范圍
   circleShape = [self creatCircleShapWithPostion:CGPointMake(width /2 , height / 2) pathRect:self.bounds radius:self.layer.cornerRadius];
   }
// view圖層 上添加 有形狀的自定義圖層
  [self.layer addSublayer:circleShape];

# 給自定義圖層添加動畫  
  [circleShape addAnimation:[self createFlashAnimationWisthScale:scale duration:1.0f] forKey:nil];
}