动画，就像从iPhone照片库中删除一样

Question

I try to implement the animation: when you enter iPhone Gallery, press the image, you see full-screen image. Below you can see toolbar with trash button. When you press this button, the image is being deleted with animation. I try to implement this, but I don't know, how to implement the transform of image, apple use. This is the best, I could do:

[UIView transitionWithView:self.view duration:0.1 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        [self.view addSubview:scrollImageView];
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
            CGRect frame = scrollImageView.frame;
            frame.size = CGSizeMake(frame.size.width * 0.75, frame.size.height * 0.75);
            frame.origin = CGPointMake((size.width - frame.size.width) / 2, (size.height - frame.size.height) / 2);
            scrollImageView.frame = frame;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
                CGRect frame = scrollImageView.frame;
                frame.size = CGSizeMake(frame.size.width * 0.05, frame.size.height * 0.05);
                frame.origin = CGPointMake(size.width, size.height);
                scrollImageView.frame = frame;
                CGAffineTransform transform = scrollImageView.transform;
                CGAffineTransform rotatedTransform = CGAffineTransformRotate(transform, 45 * 3.14 / 180);
                scrollImageView.transform = rotatedTransform;
            } completion:^(BOOL finished) {
                [scrollImageView removeFromSuperview];
            }];
        }];
    }];

Thank you in advance.

Update As I understand, I can't do this animation with Core-Animation, but may anyone can advice me the animation the most simular to iPhone Gallery animation, but without using OpenGL?

Answer 1

You can use following example for this animation:

UIView *senderView = (UIView*)sender;

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
            anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
            anim.duration = 0.125;
            anim.repeatCount = 1;
            anim.autoreverses = YES;
            anim.removedOnCompletion = YES;
            anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)];
            //[senderView.layer addAnimation:anim forKey:nil];


UIBezierPath *movePath = [UIBezierPath bezierPath];
            [movePath moveToPoint:icon.center];
            [movePath addQuadCurveToPoint:senderView.center
                             controlPoint:CGPointMake(senderView.center.x, icon.center.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 = 0.5;
            [icon.layer addAnimation:animGroup forKey:nil];

I have modified the code, you have to perform following changes in it, set the sender view as self.view, and change the ending point of animation (which is currently senderView.center) according to your requirement

Answer 2

I know its a bit late. But, you should check Ciechan's solution named BCGenieEffect . Can be found here . Its pure Core Animation and very easy to understand. I think that's what you are looking for.

Good luck

Answer 3

At this point the exact animation you are talking about cannot be done using Core Animation or UIKit. You would need to use OpenGL and apply the image as a texture and do your animation in there.

Answer 4

I think you are talking about the "suck" transition animation.

It is possible to trigger it, but it is a private transition, and Apple may reject your app if you use it.

This code should do it, using a transition code of 103:

[UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:1.0]; [UIView setAnimationTransition: transtionIndex forView:containerView cache:NO]; [containerView addSubview: newView]; [oldView removeFromSuperview]; [UIView commitAnimations];

Or search the net for a Core Image transition called "suckEffect"