Effetto sparkle iOS

Question

Voglio creare un effetto sparkle su un'immagine come mostrato nel video Sparkle Effect l'unico modo in cui potrei pensare di farlo animando ogni particella separatamente utilizzando l'animazione core, ma sarebbe inefficiente e richiederebbe molto tempo. C'è qualche altro modo per fare lo stesso?

Answer 1

Ecco una soluzione dal libro di ricette di Erica Susan. Vedi questo funziona per te.

È possibile aggiungere interesse visivo alle proprie interfacce utilizzando emittenti in tandem con i tocchi utente. La seguente classe dimostra come seguire un tocco nel corso della sua vita, aggiungendo un po 'di brio ovunque l'utente tocchi sullo schermo.

La classe inizia non appena l'utente tocca lo schermo, creando uno strato di emettitore e una cella di emettitore singola. La cellula definisce le particelle - il loro colore, il loro tasso di natalità, la loro durata, velocità e così via.

Mentre il tocco dell'utente progredisce, questa classe aggiorna la posizione dell'emettitore, rimuovendo l'emettitore una volta rimosso il tocco dallo schermo. Sebbene questo esempio sia scritto per l'interazione a tocco singolo, è possibile aggiornare facilmente il codice per aggiungere una serie di emettitori (piuttosto che una singola istanza) per l'interazione multi-touch.

Gli emettitori sono facilmente aggiunti ai progetti ed efficienti da eseguire. Mentre troppa animazione non è mai una buona idea di design, un piccolo scintillio usato con giudizio può aggiungere vita e movimento.

@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 

Non dimenticare di creare un file PNG di nome spark.png al fine di creare l'animazione.

Answer 2

Si prega di controllare questa soluzione.

https://github.com/GabriellaQiong/CIS581-Project2-Image-Morphing

CIwarpKernel kets si deforma un'immagine secondo punti di riferimento. Questo è esattamente ciò che vuoi fare per avere il morphing dell'immagine.