ios - キラキラ効果 iOS

Question

ビデオSparkle Effectに示されているように、画像にスパークル エフェクトを作成したいのですが、 コア アニメーションを使用して各パーティクルを個別にアニメーション化することを考えられる唯一の方法ですが、それは非効率的で時間がかかります。同じことができる他の方法はありますか？

Answer 1

これは、エリカ・スーザンの料理本からの解決策です。これがあなたのために働くのを見てください。

ユーザーのタッチと並行してエミッターを使用することで、インターフェイスに視覚的な関心を追加できます。次のクラスは、ユーザーが画面上でタッチした場所に少し輝きを加えて、その存続期間にわたってタッチを追跡する方法を示しています。

クラスは、ユーザーが画面に触れるとすぐに開始され、エミッター レイヤーと単一のエミッター セルが作成されます。セルは、粒子 (色、発生率、寿命、速度など) を定義します。

ユーザーのタッチが進行するにつれて、このクラスはエミッターの位置を更新し、タッチが画面から削除されるとエミッターを削除します。この例はシングル タッチ インタラクション用に記述されていますが、マルチタッチ インタラクション用に (単一のインスタンスではなく) エミッタの配列を追加するようにコードを簡単に更新できます。

エミッターはプロジェクトに簡単に追加でき、効率的に実行できます。アニメーションが多すぎるのは良いデザイン アイデアではありませんが、慎重に使用することで、生命力と動きを加えることができます。

@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

アニメーションを作成するために、spark.png という名前の png ファイルを作成することを忘れないでください。

Answer 2

この解決策を確認してください。

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

CIwarpKernel 参照点に従って画像をゆがめます。これはまさに、イメージのモーフィングを行うためにやりたいことです。