सर्कल सेगमेंट के स्ट्रोक का एनीमेशन पूर्ण स्ट्रोक

Question

में समाप्त होता है मैं एक सर्कल के सेगमेंट की उपस्थिति को एनिमेट करने की कोशिश कर रहा हूं। इसे संग्रहीत करने के लिए मैं एक CABasicAnimations का उपयोग करता हूं जो शांत ठीक काम करता है।

एनीमेशन शीर्ष पर शुरू होता है और पूरे सर्कल के एक तिहाई तक अच्छी तरह से शांत हो जाता है। लेकिन जब एनीमेशन खत्म हो जाता है, सर्कल पूरी तरह से तुरंत खींचा जा रहा है।

मैं इसे कैसे रोक सकता हूं?

- (void)drawRect:(CGRect)rect 
{ 
    int radius = 100; 
    int strokeWidth = 10; 
    CGColorRef color = [UIColor redColor].CGColor; 
    int timeInSeconds = 5; 

    CGFloat startAngle = 0; 
    CGFloat endAngle = 0.33; 

    CAShapeLayer *circle = [CAShapeLayer layer]; 

    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath; 

    circle.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius); 

    circle.fillColor = [UIColor clearColor].CGColor; 
    circle.strokeColor = color; 
    circle.lineWidth = strokeWidth; 

    [self.layer addSublayer:circle]; 

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = timeInSeconds; 
    drawAnimation.repeatCount   = 1.0; 
    drawAnimation.removedOnCompletion = NO; 

    drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:endAngle]; 

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 
} 

Answer 1

जब आप एक परत को एक एनीमेशन लागू होते हैं, कोर एनिमेशन परत एक कॉपी बन जाती और प्रतिलिपि के गुणों एनिमेट:

यहाँ मेरी कस्टम UIView के स्रोत कोड है। मूल परत को मॉडल परत कहा जाता है और प्रति को प्रस्तुति परत कहा जाता है। एक एनीमेशन मॉडल परत के गुणों को कभी नहीं बदलता है।

आपने removedOnCompletion को NO पर सेट करके इसे ठीक करने का प्रयास किया। इस काम को करने के लिए आपको एनीमेशन के fillMode को भी सेट करना होगा, लेकिन यह वास्तव में किसी संपत्ति को एनिमेट करने का सही तरीका नहीं है।

सही तरीका है कि आप अपनी मॉडल परत पर संपत्ति को बदल दें, फिर एनीमेशन लागू करें।

// Change the model layer's property first. 
circle.strokeEnd = endAngle; 

// Then apply the animation. 
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
drawAnimation.duration   = timeInSeconds; 
drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle]; 
drawAnimation.toValue = [NSNumber numberWithFloat:endAngle]; 
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

यह WWDC 2011 से Core Animation Essentials video से समझाया गया है। मैं अत्यधिक इसे देखने की सलाह देते हैं।