0

境界線からリングを発する iOS でカスタム ビューを作成しようとしています。Core Graphics を使用して楕円を描画しましたが、楕円を定期的に生成したいと考えています。

CAEmitterLayer と Core Animation の両方を使用してこれを実現しようとしていますが、必要な効果を実現する方法が本当にわかりません。理想的には、楕円が形状の端から約 10 ピクセルの厚さのリングを発し、それが成長して遠ざかるにつれて徐々にフェードアウトするようにしたいと考えています。

私の最初の試みでは、Core Animationを使用して3秒ごとに楕円を成長させたりフェードさせたりしましたが、楕円が静止したままになり、アニメーション化する別のレイヤーが必要な場合に本当に必要なことです。

どんな提案も素晴らしいでしょう。

私のコードは、最初の試行から移動しました。しかし、私が持っているのは次のとおりです。

#import "ThumbView.h"

#import <QuartzCore/QuartzCore.h>

@implementation ThumbView

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {

    [super drawLayer:layer inContext:ctx];

    // Create the emitter layer and make it the same size as the view.
    CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
    emitterLayer.frame = self.frame;

    // Apply some attributes to the emitter.
    emitterLayer.emitterShape = kCAEmitterLayerCircle;
    emitterLayer.renderMode = kCAEmitterLayerOutline;
    emitterLayer.emitterSize = CGSizeMake ( 4, 4 );

    // Create a scale animation that repeats every 3 seconds.
    CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 3.0f;
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.values = @[@1, @1.5f, @1.5f];
    scaleAnimation.keyTimes = @[@0, @0.5, @1];

    // Create a fade animation that repeats every 3 seconds.
    CAKeyframeAnimation *glowAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    glowAnimation.duration = 3.0f;
    glowAnimation.repeatCount = HUGE_VAL;
    glowAnimation.values = @[@1, @0, @0];
    glowAnimation.keyTimes = @[@0, @0.5, @1];

    [emitterLayer addAnimation:scaleAnimation forKey:@"scale"];
    [emitterLayer addAnimation:glowAnimation forKey:@"opacity"];

    if ( !self.pressed ) {
        [layer insertSublayer:emitterLayer above:layer];
    } else {
        [emitterLayer removeFromSuperlayer];
    }

}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

    // Drawing code. Draw an elipse here.
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor ( context, self.thumbColour.CGColor );
    CGContextFillEllipseInRect ( context, rect );

}


@end

だから私がしようとしてきたのは、drawLayer:inContext: デリゲート メソッド内でエミッター レイヤーを作成することです。それにアニメーションを適用します。ビューレイヤーにサブレイヤーとして追加します。

4

1 に答える 1

2

1 つ以上の CAShapeLayer オブジェクトを使用し、シェイプ レイヤーにインストールされている CGPath のスケールをアニメーション化することをお勧めします。

シェイプ レイヤーは、デフォルトでパスの変更をアニメートします。

描画する楕円をストロークする一連のシェイプ レイヤーを作成し、これらのパスのスケール設定を変更して、必要な効果を得ることができるはずです。

于 2013-09-04T14:19:28.083 に答える