Làm cách nào để tạo hiệu ứng chuyển động của một chế độ xem hoặc hình ảnh dọc theo một đường cong?

Question

Tôi đang phát triển một ứng dụng thương mại. Khi tôi thêm một mục vào giỏ hàng, tôi muốn tạo hiệu ứng trong đó hình ảnh của mục đó theo một đường cong và kết thúc tại tab giỏ hàng.

Làm cách nào để tạo hoạt ảnh của hình ảnh dọc theo đường cong như thế này?

Answer 1

Bạn có thể tạo hiệu ứng động cho thuộc tính trung tâm của UIView bằng cách sử dụng CAKeyframeAnimation. Xem hướng dẫn lập trình CoreAnimation.

Answer 2

Để mở rộng theo những gì Nikolai đã nói, cách tốt nhất để xử lý việc này là sử dụng Core Animation để tạo hiệu ứng chuyển động của hình ảnh hoặc xem dọc theo một con đường Bezier. Điều này được thực hiện bằng cách sử dụng CAKeyframeAnimation. Ví dụ, tôi đã sử dụng đoạn mã sau để animate một hình ảnh của một cái nhìn vào một biểu tượng để chỉ tiết kiệm (như có thể thấy trong video for this application):

Trước hết tập tin tiêu đề nhập khẩu 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];