iPhoto的删除动画

From: http://z251257144.iteye.com/blog/1439928

 

 

iPhoto 中想删除某张照片时，点击删除键，就能看到照片被回收到垃圾箱的动画。

今天就来模拟一下这个动画（据说有个私有API可以实现，不过私有的嘛，忽略之）。

首先仔细观察下这个动画，包含了位置，大小还有可见三个主要动画。

为了清楚的说明，先上核心代码：

 

 

UIBezierPath *movePath = [UIBezierPath bezierPath];
[movePath moveToPoint:fromPoint];

[movePath addQuadCurveToPoint:toPoint
                              controlPoint:CGPointMake(toPoint.x,fromPoint.y)];


             CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
             moveAnim.path = movePath.CGPath;
             moveAnim.removedOnCompletion = YES;

             CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
             scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
             scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
             scaleAnim.removedOnCompletion = YES;

             CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
             opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
             opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
             opacityAnim.removedOnCompletion = YES;

             CAAnimationGroup *animGroup = [CAAnimationGroup animation];
             animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
             animGroup.duration = 1;
             [imageView.layer addAnimation:animGroup forKey:nil];

 

 

UIBezierPath是用来创建各种曲线的类，这个类很强大，各种你能想到的都可以用它来完成。

这里我们建立的二次曲线实际上就是从照片的中心点位置到垃圾箱终点的一条曲线。

至于函数中controlPoint的选取，自己查阅API吧，这里就不多说

接着我们建立了一个CAKeyframeAnimation的动画，这个主要用于实现动画的轨迹变化，我们将动画的path值设为之前定义的曲线值。

这样动画就会按我们设定的轨迹移动了。

接下来是大小变化的动画，设定了最初和最终的画面大小。CATransform3DMakeScale是用于生成变换矩阵的东东，对于二维的，z值始终为1.

紧接着是生成透明度的动画，很好理解。

由于我们用到了三种动画，所以需要用CAAnimationGroup，这样一次性的使用它们。

这样我们就完成了这样的动画，试试吧。