Tạo phong cách cửa hàng itunes "nhảy" hoạt hình

Question

Tôi đang tạo tính năng đánh dấu trang cho ứng dụng của mình, tôi muốn hiển thị cho người dùng điều gì xảy ra theo cách tương tự như cửa hàng itunes, khi bạn mua thứ gì đó chuyển đến tabBar. Tôi đã từng xem một số video WWDC giải thích điều này, nhưng không thể nhớ làm thế nào để làm điều đó. Bất kỳ ý tưởng mà tôi nên bắt đầu tìm kiếm?

Answer 1

Bạn có thể chụp nhanh chế độ xem bạn muốn tạo hoạt ảnh, sau đó tạo lớp hình ảnh, sau đó sử dụng Hoạt ảnh lõi để tạo hiệu ứng động cho thanh tab. Đây là mã tôi sử dụng để làm điều đó:

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