UIImage'ı kopyalayan bir UIBezierPath Animate'i

Question

Çörek gibi görünen ve onu oynatmak istediğim bir görüntü var, böylece çörek çemberi tamamlanmamış gibi görünüyor (vuruş kapalı değil). Tanımlamak zor ama 100'e giden bir hızölçeri hayal edin ve 50'yi sürün. UIImage'ı oluşturduğum UIGraphicsBeginImageContextWithOptions içinde bir yol ve [yol addClip] yardımıyla maskelemeyi yaptım.

Şimdi sorum şu olabilir veya yolu nasıl canlandırabilirim. Ben bir CABasicAnimation ve 2 yolu (startAngle ve endAngle ilk ve aynı yolun endAngle istenen açı) yol yolu ile anahtar yolu olarak "yol" ile çalıştı ancak çalışma değil. Her şey olur

;)

Answer 1

Ben CAShapeLayer kurma ve şekil katmanı simit şekli işlemek izin öneririm ... UIBezierPath kullanılarak CABasicAnimation kullanılarak

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

animasyon. Çörek şeklinizi kalın bir çizgiyle bir arkın CGPathı olarak oluşturmalısınız.

CAShapeLayer, strokeStart ve strokeEnd özelliklerine sahiptir. Her ikisi de 0.0 ile 1.0 arasındadır. Varsayılan olarak, strokeStart 0.0'dır (başlangıçta başlar) ve strokeEnd 1.0'dır (tüm yolu çiz). Bu özellikler canlandırılabilir.

Eğer strokeEnd'i .75 ile 1.0 arasında değiştirirseniz, yolunuz yalnızca 3/4'ü ile başlayacak ve yolun son 1/4'ünü çizerek harekete geçecektir.

"Saat silme" geçişi oluşturmak için bir görüntüde bir maske olarak şekil katmanı kullanıldığını gösteren gitHub üzerinde bir projem var. Bunun için çizgilerin çizgi genişliğini o kadar büyük yapacağım ki şekil bir çörek şekli çizmek yerine çerçeve dikdörtgenini tamamen doldurur. Durumunda, çizgi kalınlığını daha az yaparsınız, böylece çöreğinizi çizer.

Core Animation demo on Github

iş yerinde şekil katmanı animasyonu görmek için app "Maske Animasyon" butonuna tıklayın.