Animation CAShapeLayer

Ich ein Diagramm zeichnen mit diesem code:

CAShapeLayer *curentGraph = [CAShapeLayer new];
CGMutablePathRef linePath = CGPathCreateMutable();
curentGraph.lineWidth = 3.0f;
curentGraph.fillColor = [[UIColor clearColor] CGColor];
curentGraph.strokeColor = [colorGraph CGColor];
for (NSValue *value in arrOfPoints) {
    CGPoint pt = [value CGPointValue];
    CGPathAddLineToPoint(linePath, NULL, pt.x,pt.y);
};
curentGraph.path = linePath;CGPathRelease(linePath);
[self.layer addSublayer:curentGraph];

und es sieht so aus

Animation CAShapeLayer

Aber ich habe ein problem. Ich brauche so animieren Sie die Grafik wie es scheint. Jeder Punkt sollte von position y = 0 zu y = pt.y. Tun, wie Sie in die Grafik auf dieser Seite.

Wie kann ich animiere meine Grafik so?

InformationsquelleAutor Max Sim | 2014-02-14
  1. 7

    Hier ist ein CAShapeLayer Unterklasse, die es einem erlauben, Sie zu animieren, Ihre path implizit (ohne Angabe einer CABasicAnimation):

    Schnittstelle:

    @interface CAShapeLayerAnim : CAShapeLayer
@end

    Umsetzung:

    @implementation CAShapeLayerAnim

- (id<CAAction>)actionForKey:(NSString *)event {
    if ([event isEqualToString:@"path"]) {
        CABasicAnimation *animation = [CABasicAnimation
            animationWithKeyPath:event];
        animation.duration = [CATransaction animationDuration];
        animation.timingFunction = [CATransaction
            animationTimingFunction];
        return animation;
    }
   return [super actionForKey:event];
}

@end
    • Es gibt keine Notwendigkeit, erstellen Sie eine benutzerdefinierte Unterklasse der CAShapeLayer. CAShapeLayer führt bereits die implizite animation der Pfad standardmäßig.
    • überprüfen Sie die "Diskussion" von der path-Eigenschaft in der Dokumentation: "im Gegensatz zu den meisten animierbaren Eigenschaften, Pfad (wie bei allen CGPathRef animierbaren Eigenschaften) nicht unterstützt implizite animation".
    • Das sagte, vielleicht gibt es einen Grund dafür. Ich bin nicht sicher, ich würde Unterklasse nur zum hinzufügen von Unterstützung für implizite Pfad-animation.
    • oops, mein Fehler. Du hast Recht (wie immer), Sorry, Cyrille.
    • Das war meine erste Reaktion, wie gut. Ich sah/es in Erinnerung, als ich ging, um die Dokumentation zu finden, ein Zitat zu verwenden, in meinem Kommentar 😉
    • Es ist nicht immer sinnvoll, Unterklassen, wenn Sie gehen, um es zu tun, auf nur einer Instanz, aber das ist gerade aus meinem Werkzeugkasten Bibliothek.

    InformationsquelleAutor Cyrille
  2. 7

    Den path Eigenschaft auf CAShapeLayer ist animierbar. Dies bedeutet, dass Sie können erstellen Sie einen Pfad, in dem jeder y-Wert ist 0.0 und das animieren von diesem Weg, um die eigentliche Grafik. Stellen Sie nur sicher, dass die Pfade haben die gleiche Anzahl von Punkten. Dies sollte einfach sein, da Sie bereits über die Schleife.

    CGMutablePathRef startPath = CGPathCreateMutable();
for (NSValue *value in arrOfPoints) {
    CGPoint pt = [value CGPointValue];
    CGPathAddLineToPoint(startPath, NULL, pt.x, 0.0);
}

    Dann können Sie animieren, den Weg durch Schöpfung einer CABasicAnimation für die @"path" - Taste.

    CABasicAnimation *pathAppear = [CABasicAnimation animationWithKeyPath:@"path"];
pathAppear.duration = 2.0; //2 seconds
pathAppear.fromValue = (__bridge id)startPath;
pathAppear.toValue   = (__bridge id)linePath;

[yourShapeLayer addAnimation:pathAppear forKey:@"make the path appear"];
    InformationsquelleAutor David Rönnqvist
  3. 2

    Für die animation benötigen Sie strokeStart und strokeEnd Eigenschaften CAShapeLayer.

    Siehe Beispiel CAShapeLayer animation in Ole Begemann blog-post.

    Dokumentation von strokeStart:

    Den Wert dieser Eigenschaft müssen im Bereich 0.0 bis 1.0. Der Standardwert dieser Eigenschaft ist 1.0.

    Kombiniert mit der strokeEnd Eigenschaft, diese Eigenschaft definiert die subregion der Pfad zu streicheln. Der Wert dieser Eigenschaft gibt die relative Punkt entlang des Pfades, an denen Sie beginnen zu streicheln, während die strokeEnd-Eigenschaft definiert den Endpunkt. Ein Wert von " 0,0 " steht am Anfang des Weges, während ein Wert von 1,0 stellt das Ende des Pfades. Werte dazwischen werden Linear interpretiert, die entlang die Länge der Strecke.

    InformationsquelleAutor buh
Schreibe einen Kommentar