Animate un UIBezierPath che ritaglia una UIImage

Question

Ho un'immagine che sembra una ciambella e voglio animarla in modo che sembri che il cerchio della ciambella non sia completato (il tratto non è chiuso). È difficile da descrivere, ma immagina un tachimetro che va a 100 e guidi 50. Ho fatto il mascheramento con l'aiuto di un percorso e di [percorso addClip] all'interno di UIGraphicsBeginImageContextWithOptions dove eseguo il rendering anche di UIImage.

La mia domanda ora è possibile o come posso animare il percorso. Ho provato con un CABasicAnimation e 2 percorsi (il primo percorso dove startAngle e endAngle sono gli stessi e il secondo percorso era endAngle è l'angolo desiderato) con "path" come keyPath ma non funziona.

Tutto ciò aiuta;)

Answer 1

ho animare UIBezierPath utilizzando CABasicAnimation utilizzando ...

UIBezierPath *bezierPath = [self bezierPath]; 

CAShapeLayer *bezierLayer = [[CAShapeLayer alloc] init]; 

bezierLayer.path = bezierPath.CGPath; 
bezierLayer.strokeColor = [UIColor redColor].CGColor; 
bezierLayer.fillColor = [UIColor clearColor].CGColor; 
bezierLayer.lineWidth = 5.0; 
bezierLayer.strokeStart = 0.0; 
bezierLayer.strokeEnd = 1.0; 
[self.view.layer addSublayer:bezierLayer]; 

if (animate) 
{ 
    CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    animateStrokeEnd.duration = 1.0; 
    animateStrokeEnd.fromValue = @0.0f; 
    animateStrokeEnd.toValue = @1.0f; 
    [bezierLayer addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"]; 
} 

Answer 2

Vorrei suggerire la creazione di un CAShapeLayer, e lasciando che il livello di forma rendere la vostra forma di ciambella. Dovresti essere in grado di rendere la tua forma a ciambella come un CGPath di un arco con una linea spessa.

CAShapeLayer ha proprietà strokeStart e strokeEnd. Entrambi vanno da 0.0 a 1.0. Per impostazione predefinita, strokeStart è 0.0 (inizio all'inizio) e strokeEnd è 1.0 (traccia l'intero percorso). Queste proprietà sono animabili.

Se si modifica il trattoEnd da 0,75 a 1,0, il percorso inizierà con solo 3/4 di esso disegnato e animerà il disegno dell'ultimo 1/4 del tracciato.

Ho un progetto su gitHub che illustra l'utilizzo di un livello di forma come maschera su un'immagine per creare una transizione di "cancellazione dell'orologio". Per fare ciò, creo la larghezza della linea sul mio arco così grande che la forma riempie completamente il rettangolo del telaio invece di disegnare una forma a ciambella. Nel tuo caso, ridurrai lo spessore della linea in modo da attirare la tua ciambella.

Core Animation demo on Github

Fare clic sul pulsante "Mask Animation" in app per visualizzare l'animazione livello di forma al lavoro.