Wie zu Animieren CoreGraphics Zeichnung der Form Mit CAKeyframeAnimation

• Erstellen Sie eine CAShapeLayer, aber dann doch nicht tun, etwas sinnvolles mit ihm. Wir korrigieren.

• Nicht einrichten, Ebenen und Animationen in -drawRect:, denn das ist, streng gedacht, als Zeit zu tun, zeichnen mit dem CoreGraphics oder UIKit-APIs. Stattdessen soll der CAShapeLayer zeichnen Sie das Dreieck-so kann man ihn animieren.

• CAKeyframeAnimation.Pfad ist dazu gedacht, etwas völlig anderes (z.B. das verschieben eines Layers entlang eines Pfades).

• Ihre animation ist Animation der position Wert der Schicht. Kein Wunder, dass es bewegt sich die Schicht! Sie animieren möchten die path Wert statt.

• Die Idee hinter CAKeyframeAnimation ist, dass Sie es bieten eine Reihe von values um den layer, den Besitz. Während der Zeitdauer zwischen den keyframes, wird es interpolieren zwischen zwei benachbarten keyframes. So müssen Sie es mehrere Wege -- eine für jede Seite.

• Interpolation beliebige Pfade ist schwierig. CA-Pfad-interpolation funktioniert am besten, wenn die Pfade haben die gleiche gleiche Anzahl und Art der Elemente. So stellen wir sicher, dass alle unsere Wege haben die gleiche Struktur, nur mit einige Punkte übereinander.

• Das Geheimnis um die animation, und vielleicht mit Computern im Allgemeinen: Sie muss präzise erklären, was Sie wollen passieren. "Ich will animieren, um die Zeichnung zu jedem einzelnen Punkt, so dass es animiert wird angezeigt" ist nicht annähernd genug Informationen.

Hier ist eine UIView-Unterklasse, die ich denke tut, was Sie für Fragen oder zumindest in der Nähe. Zu animieren, Haken ein-Taste, bis die -animate: Aktion.

SPAnimatedShapeView.h:

#import <UIKit/UIKit.h>

@interface SPAnimatedShapeView : UIView

- (IBAction)animate:(id)sender;

@end

SPAnimatedShapeView.m:

#import "SPAnimatedShapeView.h"
#import <QuartzCore/QuartzCore.h>

@interface SPAnimatedShapeView ()
@property (nonatomic, retain)   CAShapeLayer*   shapeLayer;
@end

@implementation SPAnimatedShapeView

@synthesize shapeLayer = _shapeLayer;

- (void)dealloc
{
    [_shapeLayer release];
    [super dealloc];
}

- (void)layoutSubviews
{
    if (!self.shapeLayer)
    {
        self.shapeLayer = [[[CAShapeLayer alloc] init] autorelease];
        self.shapeLayer.bounds = CGRectMake(0, 0, 100, 100);     //layer is 100x100 in size
        self.shapeLayer.position = self.center;                  //and is centered in the view
        self.shapeLayer.strokeColor = [UIColor blueColor].CGColor;
        self.shapeLayer.fillColor = [UIColor redColor].CGColor;
        self.shapeLayer.lineWidth = 3.f;

        [self.layer addSublayer:self.shapeLayer];
    }
}

- (IBAction)animate:(id)sender
{
    UIBezierPath* path0 = [UIBezierPath bezierPath];
    [path0 moveToPoint:CGPointZero];
    [path0 addLineToPoint:CGPointZero];
    [path0 addLineToPoint:CGPointZero];
    [path0 addLineToPoint:CGPointZero];

    UIBezierPath* path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointZero];
    [path1 addLineToPoint:CGPointMake(50,100)];
    [path1 addLineToPoint:CGPointMake(50,100)];
    [path1 addLineToPoint:CGPointMake(50,100)];

    UIBezierPath* path2 = [UIBezierPath bezierPath];
    [path2 moveToPoint:CGPointZero];
    [path2 addLineToPoint:CGPointMake(50,100)];
    [path2 addLineToPoint:CGPointMake(100,0)];
    [path2 addLineToPoint:CGPointMake(100,0)];

    UIBezierPath* path3 = [UIBezierPath bezierPath];
    [path3 moveToPoint:CGPointZero];
    [path3 addLineToPoint:CGPointMake(50,100)];
    [path3 addLineToPoint:CGPointMake(100,0)];
    [path3 addLineToPoint:CGPointZero];

    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"path"];    
    animation.duration = 4.0f;
    animation.values = [NSArray arrayWithObjects:(id)path0.CGPath, (id)path1.CGPath, (id)path2.CGPath, (id)path3.CGPath, nil];
    [self.shapeLayer addAnimation:animation forKey:nil];
}

@end