2011-08-02 14 views
9

Uygulamam için bir yer imi oluşturma özelliği oluşturuyorum, kullanıcıya bir şey satın aldığınızda, itunes deposuna benzer bir şekilde ne olduğunu göstermek istiyorum. Bir keresinde bunu açıklayan bazı WWDC videolarını izledim, ancak nasıl yapılacağını hatırlayamıyorum. Aramaya nereden başlamalıyım diye bir fikrin var mı?itunes mağaza stili oluşturma "atlama" animasyon

cevap

25

Animasyon uygulamak istediğiniz görüntünün bir anlık görüntüsünü alabilir, ardından bir görüntü katmanı oluşturabilir ve ardından sekme çubuğuna animasyon uygulamak için Çekirdek Animasyon'u kullanabilirsiniz. İşte bunun için kullandığım kod:

- (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

Harika! Ben sadece tabbar'a geri dönmek için ihtiyacım olan bir görüntü aldım, bence bu iyi olacak! –

+0

Teşekkürler Daniel, bu gerçekten yardımcı oldu! :) – Wasim