创建iTunes商店风格的“跳跃”动画

Posted 2023-03-12

【中文标题】创建iTunes商店风格的“跳跃”动画

【英文标题】：Creating itunes store style "jump" animation

【发布时间】：2011-08-02 16:59:56

【问题描述】：

我正在为我的应用程序创建一个书签功能，我想向用户展示以类似于 iTunes 商店的方式发生的事情，当你购买东西时它会跳转到 tabBar。我曾经看过一些解释这一点的 WWDC 视频，但不记得该怎么做。知道我应该从哪里开始寻找吗？

【参考方案1】：

您可以拍摄您想要动画的视图的快照，然后创建一个图像层，然后使用 Core Animation 将其动画到标签栏。这是我用来执行此操作的代码：

- (void)animateSnapshotOfView:(UIView *)view toTab:(UINavigationController *)navController

    NSUInteger targetTabIndex = [self.tabBarController.viewControllers indexOfObject:navController];
    NSUInteger tabCount = [self.tabBarController.tabBar.items count];
    // AFAIK there's no API (as of ios 4) to get the frame of a tab bar item, so guesstimate using the index and the tab bar frame.
    CGRect tabBarFrame = self.tabBarController.tabBar.frame;
    CGPoint targetPoint = CGPointMake((targetTabIndex + 0.5) * tabBarFrame.size.width / tabCount, CGRectGetMidY(tabBarFrame));
    targetPoint = [self.window convertPoint:targetPoint fromView:self.tabBarController.tabBar.superview];

    UIGraphicsBeginImageContext(view.frame.size);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    CGRect frame = [self.window convertRect:view.frame fromView:view.superview];
    CALayer *imageLayer = [CALayer layer];
    imageLayer.contents = (id)image.CGImage;
    imageLayer.opaque = NO;
    imageLayer.opacity = 0;
    imageLayer.frame = frame;
    [self.window.layer insertSublayer:imageLayer above:self.tabBarController.view.layer];

    CGMutablePathRef path = CGPathCreateMutable();
    CGPoint startPoint = imageLayer.position;
    CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
    CGPathAddCurveToPoint(path,NULL,
                          startPoint.x + 100, startPoint.y,
                          targetPoint.x, targetPoint.y - 100,
                          targetPoint.x, targetPoint.y);
    CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    positionAnimation.path = path;
    CGPathRelease(path);

    CABasicAnimation *sizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    sizeAnimation.fromValue = [NSValue valueWithCGSize:imageLayer.frame.size];
    sizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(50, 50)];

    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = [NSNumber numberWithFloat:0.75];
    opacityAnimation.toValue = [NSNumber numberWithFloat:0];

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = [NSArray arrayWithObjects:positionAnimation, sizeAnimation, opacityAnimation, nil];
    animationGroup.duration = 1.0;
    animationGroup.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    animationGroup.delegate = self;
    [animationGroup setValue:imageLayer forKey:@"animatedImageLayer"];

    [imageLayer addAnimation:animationGroup forKey:@"animateToTab"];

【讨论】：

太棒了！我基本上只是得到一张我需要反弹到标签栏的图像，我认为这会很好！

谢谢丹尼尔，这真的很有帮助！ :)