Sparkle-Effekt iOS

Question

Ich möchte funkel Effekt über ein Bild wie im Video gezeigt Sparkle Effect die einzige Möglichkeit, wie ich es tun animieren jedes Partikel separat mit Core-Animation, aber das wäre ineffizient sowie zeitaufwändig. Gibt es eine andere Möglichkeit, das gleiche zu tun?

Answer 1

Hier ist eine Lösung aus dem Kochbuch von Erica Susan. Sehen Sie, das funktioniert für Sie.

Sie können Ihren Schnittstellen visuelles Interesse verleihen, indem Sie Emitter zusammen mit Benutzerberührungen verwenden. Die folgende Klasse zeigt, wie Sie einer Berührung über die gesamte Lebensdauer hinweg folgen können, indem Sie dem Bildschirm, den der Benutzer berührt, ein wenig Glanz verleihen.

Die Klasse beginnt, sobald der Benutzer den Bildschirm berührt und eine Emitterschicht und eine einzelne Emitterzelle erstellt. Die Zelle definiert die Partikel - ihre Farbe, ihre Geburtenrate, ihre Lebensdauer, Geschwindigkeit und so weiter.

Wenn die Berührung des Benutzers fortschreitet, aktualisiert diese Klasse den Standort des Senders und entfernt den Sender, sobald die Berührung vom Bildschirm entfernt wurde. Obwohl dieses Beispiel für Single-Touch-Interaktion geschrieben wurde, können Sie den Code problemlos aktualisieren, um ein Array von Emittern (anstelle einer einzelnen Instanz) für Multi-Touch-Interaktionen hinzuzufügen.

Emitter können problemlos zu Ihren Projekten hinzugefügt und effizient ausgeführt werden. Während zu viel Animation nie eine gute Designidee ist, kann ein wenig Glanz, der vernünftig verwendet wird, Leben und Bewegung hinzufügen.

@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 

Vergessen Sie nicht, eine PNG-Datei namens spark.png zu schaffen, um die Animation zu erstellen.

Answer 2

Bitte überprüfen Sie diese Lösung.

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

CIwarpKernel Kets verziehen Sie ein Bild entsprechend Referenzpunkten. Das ist genau das, was Sie tun wollen, um Bild-Morphing zu haben.