Question

在“通讯录”应用中，为联系人选择图像时，缩略图图像会以很酷的动画加载到位。当图像拾取器解散时，它就会发生。

如果我不得不猜测，当图像拾取器被解除时，图像被放入UIIMageView中，该视图匹配图像拾取器的裁剪区域的大小和位置。然后将UIImageView按比例缩小到位。但它看起来像是沿着曲线动画。

这是他们这样做的吗？我想在iPad应用程序中实现类似的功能。如果是这种情况，我必须弄清楚弹出框内的图像框架的坐标。

任何人都知道他们是怎么做到的？我能做些什么吗？

Answer 1

我不是CAAnimation人，但我想它是CAKeyframeAnimation沿着UIBezierPath的组合，并结合了边界的基本动画。我的bezier不太对劲，但你可能会得到这个想法。所以，也许它就像：

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"];

试图复制Contact应用程序的加载缩略图图像动画

1 个答案: