कोरग्राफिक्स एनीमेशन

Question

का उपयोग करके आकार के कोरग्राफिक्स को एनिमेट करने के लिए मैं UIView उपclass में UIBeizerPath (मेरे उदाहरण में एक त्रिकोण) के चित्र को एनिमेट करने का प्रयास कर रहा हूं। हालांकि, संपूर्ण सबव्यू आकार के बजाय एनिमेटिंग है।

क्या मुझे एनीमेशन के साथ कुछ याद आ रही है?

- (void)drawRect:(CGRect)rect { 

    CAShapeLayer *drawLayer = [CAShapeLayer layer]; 

    drawLayer.frame   = CGRectMake(0, 0, 100, 100); 
    drawLayer.strokeColor  = [UIColor greenColor].CGColor; 
    drawLayer.lineWidth  = 4.0; 

    [self.layer addSublayer:drawLayer]; 

    UIBezierPath *path = [UIBezierPath bezierPath]; 

    [path moveToPoint:CGPointMake(0,0)]; 
    [path addLineToPoint:CGPointMake(50,100)]; 
    [path addLineToPoint:CGPointMake(100,0)]; 
    [path closePath]; 

    CGPoint center = [self convertPoint:self.center fromView:nil]; 

    [path applyTransform:CGAffineTransformMakeTranslation(center.x, center.y)]; 

    [[UIColor redColor] set]; 

    [path fill]; 

    [[UIColor blueColor] setStroke]; 

    path.lineWidth = 3.0f; 

    [path stroke]; 

    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 

    pathAnimation.duration  = 4.0f; 
    pathAnimation.path   = path.CGPath; 
    pathAnimation.calculationMode = kCAAnimationLinear; 

    [drawLayer addAnimation:pathAnimation forKey:@"position"]; 
} 

Answer 1

• आप एक CAShapeLayer पैदा कर रहे हैं, लेकिन फिर कुछ भी इसके साथ उपयोगी नहीं कर रही। आइए इसे ठीक करें।

• -drawRect: में परतें और एनिमेशन सेट अप न करें, क्योंकि यह कड़ाई से कोरग्राफिक्स या UIKit API का उपयोग करके ड्राइंग करने का समय है। इसके बजाय, आप CAShapeLayer को त्रिभुज खींचना चाहते हैं - इस तरह आप इसे एनिमेट कर सकते हैं।

• CAKeyframeAnimation.path कुछ पूरी तरह से अलग (उदाहरण के लिए पथ के साथ एक परत को स्थानांतरित करने के लिए) है।

• आपकी एनीमेशन परत के position मान को एनिमेट कर रहा है। कोई आश्चर्य नहीं कि यह परत को ले जाता है! आप इसके बजाय path मान को एनिमेट करना चाहते हैं।

• CAKeyframeAnimation के पीछे विचार यह है कि आप परत की संपत्ति को सेट करने के लिए values की एक सरणी प्रदान करते हैं। कीफ्रेम के बीच के समय के दौरान, यह दो आसन्न कीफ्रेम के बीच अंतरण करेगा। तो आपको इसे कई पथ देने की जरूरत है - प्रत्येक पक्ष के लिए एक।

• मनमाने ढंग से पथों को इंटरपोल करना कठिन है। सीए का पथ इंटरपोलेशन सबसे अच्छा काम करता है जब पथ समान संख्या और तत्वों के प्रकार होते हैं। इसलिए, हम सुनिश्चित करते हैं कि हमारे सभी पथों में एक ही संरचना है, बस एक दूसरे के शीर्ष पर कुछ बिंदुओं के साथ।

• एनीमेशन का रहस्य, और शायद सामान्य रूप से कंप्यूटरों के लिए: यह समझाने में सटीक होना चाहिए कि आप क्या करना चाहते हैं। "मैं प्रत्येक बिंदु के चित्र को एनिमेट करना चाहता हूं, इसलिए यह एनिमेटेड प्रतीत होता है" लगभग पर्याप्त जानकारी नहीं है।

यहाँ एक UIView उपवर्ग है कि मुझे लगता है कि आप जो चाह रहे हैं, या कम से कम पास करता है। एनिमेट करने के लिए, -animate: एक्शन तक एक बटन दबाएं।

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