घुमावदार पथ के साथ दृश्य या छवि के आंदोलन को मैं कैसे एनिमेट कर सकता हूं?

Question

मैं एक वाणिज्य आवेदन विकसित कर रहा हूं। जब मैं शॉपिंग कार्ट में कोई आइटम जोड़ता हूं, तो मैं एक प्रभाव बनाना चाहता हूं जहां आइटम की एक छवि घुमावदार पथ का अनुसरण करती है और कार्ट टैब पर समाप्त होती है।

मैं इस तरह के वक्र के साथ एक छवि का एनीमेशन कैसे बना सकता हूं?

Answer 1

आप एक CAKeyframeAnimation का उपयोग कर UIView की केंद्र संपत्ति को एनिमेट कर सकते हैं। CoreAnimation प्रोग्रामिंग मार्गदर्शिका देखें।

Answer 2

निकोलई ने जो कहा, उस पर विस्तार करने के लिए, इसे संभालने का सबसे अच्छा तरीका छवि की गति को एनिमेट करने या बेजियर पथ के साथ देखने के लिए कोर एनीमेशन का उपयोग करना है। यह एक CAKeyframe एनीमेशन का उपयोग कर पूरा किया जाता है। उदाहरण के लिए, मैं बचत इंगित करने के लिए (के रूप में video for this application में देखा जा सकता) एक आइकन में एक दृश्य की एक छवि चेतन करने के लिए निम्नलिखित कोड का उपयोग किया है:

सभी आयात QuartzCore हेडर फाइल के

पहले #import <QuartzCore/QuartzCore.h>

UIImageView *imageViewForAnimation = [[UIImageView alloc] initWithImage:imageToAnimate]; 
imageViewForAnimation.alpha = 1.0f; 
CGRect imageFrame = imageViewForAnimation.frame; 
//Your image frame.origin from where the animation need to get start 
CGPoint viewOrigin = imageViewForAnimation.frame.origin; 
viewOrigin.y = viewOrigin.y + imageFrame.size.height/2.0f; 
viewOrigin.x = viewOrigin.x + imageFrame.size.width/2.0f; 

imageViewForAnimation.frame = imageFrame; 
imageViewForAnimation.layer.position = viewOrigin; 
[self.view addSubview:imageViewForAnimation]; 

// Set up fade out effect 
CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
[fadeOutAnimation setToValue:[NSNumber numberWithFloat:0.3]]; 
fadeOutAnimation.fillMode = kCAFillModeForwards; 
fadeOutAnimation.removedOnCompletion = NO; 

// Set up scaling 
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"]; 
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(40.0f, imageFrame.size.height * (40.0f/imageFrame.size.width))]]; 
resizeAnimation.fillMode = kCAFillModeForwards; 
resizeAnimation.removedOnCompletion = NO; 

// Set up path movement 
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
pathAnimation.calculationMode = kCAAnimationPaced; 
pathAnimation.fillMode = kCAFillModeForwards; 
pathAnimation.removedOnCompletion = NO; 
//Setting Endpoint of the animation 
CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f); 
//to end animation in last tab use 
//CGPoint endPoint = CGPointMake(320-40.0f, 480.0f); 
CGMutablePathRef curvedPath = CGPathCreateMutable(); 
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y); 
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y); 
pathAnimation.path = curvedPath; 
CGPathRelease(curvedPath); 

CAAnimationGroup *group = [CAAnimationGroup animation]; 
group.fillMode = kCAFillModeForwards; 
group.removedOnCompletion = NO; 
[group setAnimations:[NSArray arrayWithObjects:fadeOutAnimation, pathAnimation, resizeAnimation, nil]]; 
group.duration = 0.7f; 
group.delegate = self; 
[group setValue:imageViewForAnimation forKey:@"imageViewBeingAnimated"]; 

[imageViewForAnimation.layer addAnimation:group forKey:@"savingAnimation"]; 

[imageViewForAnimation release];