2011-08-02 2 views
9

내 앱의 북마크 기능을 만들고 있는데, 아이튠즈 스토어와 비슷한 방식으로 어떤 일이 일어나는지 사용자에게 보여주고 싶습니다. 뭔가를 구입하면 탭바로 이동합니다. 한 번 WWDC 비디오를 보았지만이를 수행하는 방법을 기억할 수 없습니다. 내가 어디에서 찾아야할지 생각 나니?itunes 상점 스타일 "점프"애니메이션 만들기

답변

25

애니메이션하려는보기의 스냅 샷을 찍은 다음 이미지 레이어를 만든 다음 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"]; 
} 
+0

위대한! 방금 탭바에 튀어 나와야하는 이미지가 기본적으로 하나 있습니다. –

+0

대니얼 감사합니다. 정말 도움이되었습니다! :) – Wasim