Sparkle effect iOS

Question

I want to create sparkle effect over an image as shown in the video Sparkle Effect the only way I could think of doing it animating each particle separately using core animation, but that would be inefficient as well as time consuming. Is there any other way I can do the same?

Answer 1

Here is a solution from Erica Susan's cook book. See this works for you.

You can add visual interest to your interfaces by using emitters in tandem with user touches. The following class demonstrates how to follow a touch over its lifetime, adding a little sparkle to wherever the user touches on-screen.

The class begins as soon as the user touches the screen, creating an emitter layer and a single emitter cell. The cell defines the particles — their color, their birth rate, their lifetime, velocity, and so forth.

As the user's touch progresses, this class updates the emitter's location, removing the emitter once the touch is removed from the screen. Although this example is written for single touch interaction, you can easily update the code to add an array of emitters (rather than a single instance) for multi-touch interaction.

Emitters are easily added to your projects and efficient to run. While too much animation is never a good design idea, a little sparkle used judiciously can add life and movement.

@interface SparkleTouchView : UIView {
    CAEmitterLayer *emitter;
}

@end

@implementation SparkleTouchView

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    float multiplier = 0.25f;

    CGPoint pt = [[touches anyObject] locationInView:self];

    //Create the emitter layer
    emitter = [CAEmitterLayer layer];
    emitter.emitterPosition = pt;
    emitter.emitterMode = kCAEmitterLayerOutline;
    emitter.emitterShape = kCAEmitterLayerCircle;
    emitter.renderMode = kCAEmitterLayerAdditive;
    emitter.emitterSize = CGSizeMake(100 * multiplier, 0);

    //Create the emitter cell
    CAEmitterCell* particle = [CAEmitterCell emitterCell];
    particle.emissionLongitude = M_PI;
    particle.birthRate = multiplier * 1000.0;
    particle.lifetime = multiplier;
    particle.lifetimeRange = multiplier * 0.35;
    particle.velocity = 180;
    particle.velocityRange = 130;
    particle.emissionRange = 1.1;
    particle.scaleSpeed = 1.0; // was 0.3
    particle.color = [[COOKBOOK_PURPLE_COLOR colorWithAlphaComponent:0.5f] CGColor];
    particle.contents = (__bridge id)([UIImage imageNamed:@"spark.png"].CGImage);
    particle.name = @"particle";

    emitter.emitterCells = [NSArray arrayWithObject:particle];
    [self.layer addSublayer:emitter];
}

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    CGPoint pt = [[touches anyObject] locationInView:self];

    // Disable implicit animations
    [CATransaction begin];
    [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
    emitter.emitterPosition = pt;    
    [CATransaction commit];    
}

 - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [emitter removeFromSuperlayer];
    emitter = nil;
 }

- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [self touchesEnded:touches withEvent:event];
}

@end

Don't forget to create a png file named spark.png in order to create the animation.