試圖複製聯繫人應用程序的加載縮略圖圖像動畫

Question

在聯繫人應用程序中，當您爲聯繫人選擇圖像時，縮略圖圖像會用一個很酷的動畫加載到位置。它發生在圖像選取器解散時。

如果我不得不猜測，當圖像選取器被解散時，圖像被放入一個與圖像選取器的裁剪區域的大小和位置相匹配的UIIMageView中。然後，UIImageView縮小並放入位置。但它看起來像沿着曲線動畫。

這是他們怎麼做到的？我想實現類似的功能，但是在iPad應用中。如果是這樣的話，我必須找出彈出框內的圖像幀的座標。

任何人都知道他們是如何做到這一點的？我在做什麼？

Answer 1

我不是一個CAAnimation的傢伙，但我想它是沿着UIBezierPath一個CAKeyframeAnimation的組合，與邊界的一個基本的動畫相結合。我的貝塞爾並不完全正確，但你可能會明白這一點。所以，也許它是這樣的：

CGPoint center  = CGPointMake(self.view.frame.size.width/2.0, self.view.frame.size.height/2.0); 
CGRect finalRect = CGRectMake(0.0, 0.0, 75.0, 75.0); 
CGPoint finalCenter = CGPointMake(25.0, 25.0); 

UIBezierPath *path = [UIBezierPath bezierPath]; 
[path moveToPoint:center]; 
[path addCurveToPoint:finalCenter 
     controlPoint1:CGPointMake(self.view.frame.size.width, 0.0) 
     controlPoint2:CGPointMake(100.0, finalCenter.y)]; 

UIImage *image = [UIImage imageNamed:@"YOURIMAGE.png"]; 
NSAssert(image, @"Error loading image"); 
CALayer *imageLayer = [CALayer layer]; 
imageLayer.contents = (id)image.CGImage; 
imageLayer.bounds = finalRect; 
imageLayer.position = finalCenter; 
[self.view.layer addSublayer:imageLayer]; 

CAKeyframeAnimation *animatePosition = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
animatePosition.path = [path CGPath]; 
animatePosition.duration = 2.0; 
[imageLayer addAnimation:animatePosition forKey:@"arc"]; 

CABasicAnimation *animateBounds = [CABasicAnimation animationWithKeyPath:@"bounds"]; 
animateBounds.duration = 2.0; 
animateBounds.fromValue = [NSValue valueWithCGRect:self.view.bounds]; 
animateBounds.toValue = [NSValue valueWithCGRect:finalRect]; 
[imageLayer addAnimation:animateBounds forKey:@"zoom"];