Iph oto deletion Animation

When you want to delete a photo in iPhoto, click Delete to see the animation of the photo being recycled to the recycle bin.

Today we will simulate this animation (it is said that there is a private API that can be implemented, but private, ignore it ).

First, observe the animation carefully, including the position, size, and visible three main animations.

For a clear explanation, first go to the Core code:

Delete an animation

 1 UIBezierPath *movePath = [UIBezierPath bezierPath];
 2             [movePath moveToPoint:fromPoint];
 3 
 4             [movePath addQuadCurveToPoint:toPoint
 5                              controlPoint:CGPointMake(toPoint.x,fromPoint.y)];
 6 
 7             
 8             CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 9             moveAnim.path = movePath.CGPath;
10             moveAnim.removedOnCompletion = YES;
11             
12             CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
13             scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
14             scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
15             scaleAnim.removedOnCompletion = YES;
16             
17             CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
18             opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
19             opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
20             opacityAnim.removedOnCompletion = YES;
21             
22             CAAnimationGroup *animGroup = [CAAnimationGroup animation];
23             animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
24             animGroup.duration = 1;
25             [imageView.layer addAnimation:animGroup forKey:nil];

Uibezierpath is a class used to create various curves. This class is very powerful and can be used for all the things you can think.

The quadratic curve we established here is actually a curve from the center point of the photo to the destination point of the bin.

For the selection of controlpoint in the function, check the API.

Then we created a cakeyframeanimation animation, which is mainly used to realize the trajectory change of the animation. We set the animation PATH value to the previously defined curve value.

In this way, the animation will move according to our set trajectory.

The next step is the size change animation, which sets the initial and final screen sizes. Catransform3dmakescale is used to generate the transformation matrix. For two-dimensional, the Z value is always 1.

The next step is to generate an animation with transparency, which is easy to understand.

Because we use three types of animations, we need to use caanimationgroup to use them all at once.

In this way, we have completed such an animation. Try it.

If you have any questions, please correct them.

Reprinted please note, thank you!

Http://www.cnblogs.com/scorpiozj