测试button点击的粒子爆炸效果

  • 作者:王颖博
  • 最后编辑:2016年08月19日
  • 标签: iOS

测试button点击的粒子爆炸效果

说些废话

这阵子老是在网上看到有比较炫酷的各种动画效果,比如点赞动画效果,撕裂效果,闪烁效果等等。近来无事,实现了其中的一种:粒子爆炸效果。其实要用的一个重要的属性,是CALayer的

1
CAEmitterLayer
属性。

  • 先加一个按钮:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
      - (void)viewDidLoad 
      {
          [super viewDidLoad];
            
          UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 220, 20, 20)];
          [btn addTarget:self action:@selector(boom:) forControlEvents:UIControlEventTouchUpInside];
          btn.backgroundColor = [UIColor blackColor];
          btn.layer.cornerRadius = btn.frame.size.width / 2;
          [self.view addSubview:btn];
      }
    
  • 在按钮的点击方法里,设置粒子的爆炸效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
      - (void)boom:(UIButton *)btn
      {
        
            
          CAEmitterLayer *emitter = [CAEmitterLayer layer];
            
          [emitter setEmitterSize:CGSizeMake(CGRectGetWidth(btn.frame), CGRectGetHeight(btn.frame))];
          emitter.emitterPosition = CGPointMake(btn.frame.size.width /2.0, btn.frame.size.height / 2.0);
          emitter.emitterShape = kCAEmitterLayerCircle;
          emitter.emitterMode = kCAEmitterLayerOutline;
          [btn.layer addSublayer:emitter];
            
          CAEmitterCell *cell = [[CAEmitterCell alloc] init];
          [cell setName:@"zanShape"];
            
          cell.contents = (__bridge id _Nullable)([self createImageWithColor:[UIColor blackColor]].CGImage);
          cell.birthRate = 0;
          cell.lifetime = 0.4;
          cell.alphaSpeed = -2;
            
          cell.velocity = 20;
          cell.velocityRange = 20;
          emitter.emitterCells = @[cell];
            
          CABasicAnimation *effectLayerAnimation=[CABasicAnimation animationWithKeyPath:@"emitterCells.zanShape.birthRate"];
          [effectLayerAnimation setFromValue:[NSNumber numberWithFloat:1500]];
          [effectLayerAnimation setToValue:[NSNumber numberWithFloat:0]];
          [effectLayerAnimation setDuration:0.0f];
          [effectLayerAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
          [emitter addAnimation:effectLayerAnimation forKey:@"ZanCount"];
      }
    
  • 可以提出出来作为扩展类别的有两个方法.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    
      /**
       *  根据颜色返回一张图片
       */
      -(UIImage*) createImageWithColor:(UIColor*) color
      {
          CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
          UIGraphicsBeginImageContext(rect.size);
          CGContextRef context = UIGraphicsGetCurrentContext();
          CGContextSetFillColorWithColor(context, [color CGColor]);
          CGContextFillRect(context, rect);
          UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
            
          return [self circleImage:theImage];;
      }
        
      /**
       *  返回一张圆形图片
       */
      -(UIImage*) circleImage:(UIImage*) image{
          UIGraphicsBeginImageContext(image.size);
          CGContextRef context = UIGraphicsGetCurrentContext();
          CGContextSetLineWidth(context, 2);
          CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
          CGRect rect = CGRectMake(0, 0, image.size.width , image.size.height );
          CGContextAddEllipseInRect(context, rect);
          CGContextClip(context);
            
          [image drawInRect:rect];
          CGContextAddEllipseInRect(context, rect);
          CGContextStrokePath(context);
          UIImage *newimg = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
          return newimg;
      }
    
  • 效果图

git图

最后附上DEMO testButtonBoom