UIView एनीमेशन: एक सर्कल के उदाहरण का उपयोग करके एक मनमाना पथ के साथ आगे बढ़ना

एनीमेशन इंजन

1. पथ का निर्माण आकृतियों (सीधी रेखाओं, वक्रों, वृत्तों आदि) से किया जाता है। इसके लिए, CGPath संरचना और इसके साथ काम करने के लिए सहायक कार्यों का उपयोग किया जाता है। वैसे, इस संरचना का उपयोग परिणामस्वरूप आंकड़ा खींचने के लिए भी किया जा सकता है।
2. एक CAKeyframeAnimation एनीमेशन बनाया गया है जो व्यवहार का वर्णन करता है - अवधि, प्रकार का अनुमान, समय ऑफसेट, आदि। पहले बनाया गया रास्ता भी इस वस्तु से "टकराता" है।
3. CGLayer ऑब्जेक्ट को परिणामी एनीमेशन को निष्पादित करने के लिए कमांड दी गई है।

एक पथ का निर्माण

CGPoint center = CGPointMake(200.0, 200.0); CGFloat radius = 100.0; CGMutablePathRef path = CGPathCreateMutable(); CGPathAddArc(path, NULL, center.x, center.y, radius, M_PI, 0, NO); // CGPathAddArc(path, NULL, center.x, center.y, radius, 0, M_PI, NO); CGPathRelease(path); // 

• CGPathAddArc फ़ंक्शन पथ में एक चाप जोड़ता है और निम्नलिखित मापदंडों को स्वीकार करता है:
  
  1. परस्पर पथ
  2. परिवर्तन मैट्रिक्स
  3. एक्स सर्कल के केंद्र का समन्वय करता है
  4. चक्र के केंद्र का समन्वय
  5. चाप त्रिज्या
  6. एक्स अक्ष से चाप की शुरुआत में, रेडियन में कोण
  7. चाप के अंत तक कोण
  8. दिशा, इस मामले में वामावर्त
  
  
• बनाए गए संसाधन को जारी करने की जिम्मेदारी प्रोग्रामर के पास है। प्रोग्रामर, याद रखें: रिसाव खराब है। एप्लिकेशन मेमोरी का उपभोग करेगा, ऐप्पल अप्रभावी होगा, और उपयोगकर्ता परेशान होगा।

एनिमेशन बनाएं और चलाएं

 CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; pathAnimation.path = path; pathAnimation.duration = 2.0f; [view.layer addAnimation:pathAnimation forKey:nil]; 

सिद्धांत से अभ्यास तक

 @class PathDrawingView; // 1 @interface CMViewController : UIViewController { UIImageView *_image; //2 BOOL _isAnimating; //3 BOOL _drawPath; //4 } @property (retain, nonatomic) PathDrawingView *pathView; //5 @end 

1. हम एक सहायक वर्ग की घोषणा करते हैं जो हमारे पथ के प्रतिपादन के लिए जिम्मेदार होगा। यह डिबगिंग की सुविधा प्रदान करता है।
2. एक साधारण तस्वीर जिसे हम स्थानांतरित करेंगे।
3. फ्लैग प्ले एनीमेशन।
4. पथ खींचने के लिए ध्वज, अगर हम अचानक देखना चाहते हैं कि हमारी तस्वीर कैसे चलेगी।
5. सहायक के यांत्रिकी में कई निर्माण और विलोपन शामिल हैं। हम इसे इस प्रक्रिया को सरल बनाने के लिए एक संपत्ति के रूप में घोषित करते हैं।

 #import <QuartzCore/QuartzCore.h> #import "PathDrawingView.h" static NSString *cAnimationKey = @"pathAnimation"; 

 - (void) viewDidLoad { [super viewDidLoad]; _drawPath = NO; _isAnimating = NO; _image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]]; _image.center = CGPointMake(160, 240); [self.view addSubview:_image]; } 

 - (CGPathRef) pathToPoint:(CGPoint) point { CGPoint imagePos = _image.center; CGFloat xDist = (point.x - imagePos.x); CGFloat yDist = (point.y - imagePos.y); CGFloat radius = sqrt((xDist * xDist) + (yDist * yDist)) / 2; // 1 CGPoint center = CGPointMake(imagePos.x + radius, imagePos.y); //2 CGFloat angle = atan2f(yDist, xDist); // 3 CGAffineTransform transform = CGAffineTransformIdentity; transform = CGAffineTransformTranslate(transform, imagePos.x, imagePos.y); transform = CGAffineTransformRotate(transform, angle); transform = CGAffineTransformTranslate(transform, -imagePos.x, -imagePos.y); //4 CGMutablePathRef path = CGPathCreateMutable(); CGPathAddArc(path, &transform, center.x, center.y, radius, M_PI, 0, YES); //CGPathAddArc(path, &transform, center.x, center.y, radius, 0, M_PI, YES); //5 return path; } 

1. पाइथागोरस प्रमेय द्वारा, हम चित्र और टी। के बीच की दूरी को दो से विभाजित करते हैं और चाप की त्रिज्या प्राप्त करते हैं, जिसकी शुरुआत चित्र में होगी, और अंत - वांछित बिंदु पर।
2. सबसे पहले, हम समन्वय प्रणाली में काम करेंगे, जहां चित्र और T का केंद्र Y अक्ष के साथ गुजरने वाली एक ही रेखा पर है। इस निर्देशांक प्रणाली में, वांछित वृत्त के केंद्र को X अक्ष के साथ त्रिज्या की दूरी से स्थानांतरित किया जाएगा।
3. हम मूल समन्वय प्रणाली में चित्र के केंद्र और टी के बीच कोण को देखते हैं। ऐसा करने के लिए, हम टी से चित्र के केंद्र में पहले से पाए गए वेक्टर का उपयोग करते हैं।
4. "वास्तविक" एक के लिए एक मनमाना समन्वय प्रणाली से संक्रमण के लिए एक रोटेशन मैट्रिक्स बनाएं।
5. एक रास्ता बनाएँ। इस बिंदु पर, हमारे पास सभी आवश्यक डेटा हैं। ध्यान दें कि एक पंक्ति में टिप्पणी की गई है। केवल एक चाप बनाया जाता है - हम चाहते हैं कि चित्र निर्दिष्ट बिंदु पर रुक जाए, और इसके माध्यम से न जाए और वापस आ जाए।

 - (void) followThePath:(CGPathRef) path { CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; pathAnimation.path = path; pathAnimation.removedOnCompletion = NO; // 1 pathAnimation.fillMode = kCAFillModeForwards; //2 pathAnimation.duration = 2.0f; pathAnimation.calculationMode = kCAAnimationPaced; //3 pathAnimation.delegate = self; //4 [_image.layer addAnimation:pathAnimation forKey:cAnimationKey]; //5 } 

1. इंगित करता है कि एनीमेशन पूरा होने के बाद रहना चाहिए। यह आवश्यक है ताकि हम अंतिम मूल्य पढ़ सकें। लेकिन इसकी आवश्यकता क्यों है यह बाद में स्पष्ट होगा।
2. इंगित करता है कि एनीमेशन ऑब्जेक्ट (यानी हम जिस तस्वीर को आगे बढ़ा रहे हैं) उस स्थिति में रहना चाहिए जिसमें एनीमेशन समाप्त हो गया। यदि हटा दिया जाता है, तो तस्वीर उस स्थान पर जाएगी जहां आंदोलन शुरू हुआ था।
3. एनीमेशन के मध्यवर्ती फ्रेम की गणना के लिए विधि सेट करता है। यदि आप चाहते हैं (और हम चाहते हैं!) किसी भी समय एनीमेशन को रोकने के लिए, आपको बस ऐसे दृश्य को निर्दिष्ट करने की आवश्यकता है। अन्यथा, तस्वीर कूद जाएगी, और वर्तमान स्थिति में बिल्कुल नहीं रुकेगी।
4. हम इसके अंत के क्षण को पकड़ने के लिए एक एनीमेशन प्रतिनिधि के रूप में खुद को नामित करते हैं।
5. हम एनीमेशन शुरू करते हैं। इस बार, उसे एक नाम दें।

 - (void) stop { CALayer *pLayer = _image.layer.presentationLayer; // 1 CGPoint currentPos = pLayer.position; [_image.layer removeAnimationForKey:cAnimationKey]; // 2 [_image setCenter:currentPos]; _isAnimating = NO; } 

1. हम प्रस्तुति परत लेते हैं, यह वहां है कि एनीमेशन कताई है और इसमें प्लेबैक के दौरान ऑब्जेक्ट की स्थिति के बारे में अद्यतित जानकारी है - यह कोर ग्राफिक्स ढांचे की एक विशेषता है। यदि ऐसा नहीं किया जाता है, तो चित्र उस जगह पर कूद जाएगा जहां एनीमेशन शुरू हुआ था।
2. हम अपना एनीमेशन निकालते हैं।

 - (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { if (flag) [self stop]; } 

 - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { if (_isAnimating) [self stop]; _isAnimating = YES; UITouch *touch = [touches anyObject]; CGPoint touchPoint = [touch locationInView:self.view]; CGPathRef path = [self pathToPoint:touchPoint]; [self followThePath:path]; if (_drawPath) [self drawPath:path]; CGPathRelease(path); } 

 - (void) drawPath:(CGPathRef) path { [self.pathView removeFromSuperview]; // 1 self.pathView = [[PathDrawingView alloc] init]; // 2 self.pathView.path = path; self.pathView.frame = self.view.frame; [self.view addSubview:self.pathView]; } 

1. हम स्क्रीन से पिछले रास्ते को हटा देते हैं, अन्यथा दलिया होगा
2. पथ खींचने के लिए एक विशेष वस्तु बनाएं। इसका कोड नीचे होगा।

 - (void) viewDidUnload { [_image release]; self.pathView = nil; } 

आवेदन

 #import <UIKit/UIKit.h> @interface PathDrawingView : UIView { CGPathRef _path; } @property (retain, nonatomic) UIColor *strokeColor; @property (retain, nonatomic) UIColor *fillColor; @property (assign, nonatomic) CGPathRef path; @end 

 #import "PathDrawingView.h" #import <QuartzCore/QuartzCore.h> @implementation PathDrawingView @synthesize strokeColor, fillColor; - (CGPathRef) path { return _path; } - (void) setPath:(CGPathRef)path { CGPathRelease(_path); _path = CGPathRetain(path); } - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(ctx, strokeColor.CGColor); CGContextSetFillColorWithColor(ctx, fillColor.CGColor); CGContextAddPath(ctx, _path); CGContextStrokePath(ctx); } - (id) init { if (self = [super init]) { self.fillColor = [UIColor clearColor]; self.strokeColor = [UIColor redColor]; self.backgroundColor = [UIColor clearColor]; } return self; } - (void) dealloc { self.fillColor = nil; self.strokeColor = nil; CGPathRelease(_path); [super dealloc]; } @end