Görüntünün veya görüntünün hareketini eğri yol boyunca nasıl canlandırabilirim?

Question

Bir ticaret uygulaması geliştiriyorum. Alışveriş sepetine bir öğe eklediğimde, öğenin görüntüsünün eğri bir yol izlediği ve sepet sekmesinde bittiği bir efekt oluşturmak istiyorum.

Böyle bir eğri boyunca bir görüntünün animasyonunu nasıl oluşturabilirim?

Answer 1

UIView'un merkez özelliğini CAKeyframeAnimation kullanarak canlandırabilirsiniz. CoreAnimation programlama kılavuzuna bakın.

Answer 2

Nikolai'nin söylediklerini genişletmek için, bunun üstesinden gelmenin en iyi yolu, görüntünün hareketini canlandırmak veya Bezier yolu boyunca görüntülemek için Çekirdek Animasyon kullanmaktır. Bu bir CAKeyframeAnimation kullanılarak gerçekleştirilir. Örneğin, ben (video for this application de görülebileceği gibi) tasarruf göstermek için bir simge haline bir görünümünün resmi animasyon için aşağıdaki kodu kullandım:

tüm ithalat QuartzCore başlık dosyasının

İlk #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];