CAEmitterLayer - kCAEmitterLayerCircle，循环路径？

Question

我正在尝试重新创建此效果（请参见下图），但是使用圆形路径，因为我有一个圆形按钮。

这是来源。

https://github.com/uiue/ParticleButton/blob/master/ParticleButton/EmitterView.m

我所做的修改似乎影响了粒子动画的方法，而不是路径。

我没有深入研究过所采用的技术，但我不相信这是可能的？

    fireEmitter = (CAEmitterLayer *)self.layer;
    //fireEmitter.renderMode = kCAEmitterLayerAdditive;
    //fireEmitter.emitterShape = kCAEmitterLayerLine;

   // CGPoint pt = [[touches anyObject] locationInView:self];
    float multiplier = 0.25f;
    fireEmitter.emitterPosition = self.center;
    fireEmitter.emitterMode = kCAEmitterLayerOutline;
    fireEmitter.emitterShape = kCAEmitterLayerCircle;
    fireEmitter.renderMode = kCAEmitterLayerAdditive;
    fireEmitter.emitterSize = CGSizeMake(100 * multiplier, 0);

Answer 1

CustomButton.m

-(void)drawRect:(CGRect)rect
{
    //绘制路径
    CGMutablePathRef path = CGPathCreateMutable();

    CGPathAddRect(path, NULL, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height));

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 3;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
    animation.repeatCount = MAXFLOAT;
//    animation.path = path;
    animation.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath;
    [emitterView.layer addAnimation:animation forKey:@"test"];
}

创建圆形的自定义按钮。

CustomButton *button = [[CustomButton alloc] initWithFrame:CGRectMake(100, 100, 300, 300)];
[self.view addSubview:button];
button.center = self.view.center;
button.layer.cornerRadius = button.frame.size.width/2.f;
button.clipsToBounds = YES;

Answer 2

您只需在那里设置发射器属性（与其位置的动画无关）。您的问题中缺少创建动画并添加到按钮的部分（但在示例项目中存在）。

在drawRect:方法中，动画添加如下：

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();

    CGPathAddRect(path, NULL, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height));

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 3;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
    animation.repeatCount = MAXFLOAT;
    animation.path = path; // That's what defines the path of the animation
    [emitterView.layer addAnimation:animation forKey:@"test"];
}

基本上说，走这条路径（现在是一个带有按钮尺寸的矩形），并沿着这条路径动画emitterView s（粒子）位置3秒钟（并永远重复）。

因此，将animation.path简单地更改为类似的内容可以为发射器定义循环路径：

animation.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath;

（基本上是一个椭圆形的按钮尺寸 - 这可能是你想要的，或者不是 - 但你明白了......）

注意：我并不是说drawRect:是创建和添加动画的最佳位置（它只是基于您提供的示例）。您可以按照自己喜欢的方式创建和添加动画，前提是您的路径与按钮的圆形形状相匹配。