Jak mogę animować ruch widoku lub obrazu wzdłuż zakrzywionej ścieżki?

Question

Zajmuję się tworzeniem aplikacji handlowej. Gdy dodaję przedmiot do koszyka, chcę stworzyć efekt, w którym obraz przedmiotu podąża zakrzywioną ścieżką i kończy się na karcie koszyka.

Jak utworzyć animację obrazu wzdłuż takiej krzywej?

Answer 1

Możesz animować właściwość centrum UIView za pomocą CAKeyframeAnimation. Zobacz przewodnik programowania CoreAnimation.

Answer 2

Aby rozwinąć to, co powiedział Nikolai, najlepszym sposobem radzenia sobie z tym jest użycie animacji rdzeniowej do animowania ruchu obrazu lub widoku wzdłuż ścieżki Beziera. Dokonuje się tego za pomocą CAKeyframeAnimation. Na przykład Użyłem poniższy kod, żeby ożywić wizerunek widokiem na ikonę, aby wskazać oszczędności (jak widać w video for this application):

Przede wszystkim pliku nagłówka import 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];