核心動畫'翻轉'動畫

我正在尋找使用核心動畫來模擬Mac應用程序中的翻轉時鐘動畫。目前我有三個CALayer代表數字的上半部分和下半部分，第三個用於表示翻轉動畫（在以下文章中提供了一個解決方案：Creating an iPad flip-clock with Core Animation。核心動畫'翻轉'動畫

翻轉層的動畫分爲兩個階段：從頂部翻轉到數字的中間，然後從中間至底部要做到這一點，我使用的是被稱爲委託函數時動畫結束時：

- (void)animationDidStop:(CAAnimation *)oldAnimation finished:(BOOL)flag 
{ 
    int digitIndex = [[oldAnimation valueForKey:@"digit"] intValue];  
    int currentValue = [[oldAnimation valueForKey:@"value"] intValue]; 

    NSMutableArray *digit = [digits objectAtIndex:digitIndex]; 
    CALayer *flipLayer = [digit objectAtIndex:tickerFlip]; 
    CALayer *bottomLayer = [digit objectAtIndex:tickerBottom]; 

    if([[oldAnimation valueForKey:@"state"] isEqual:@"top"] && flag) { 
     NSLog(@"Top animation finished"); 

     [CATransaction begin]; 
     [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; 
     flipLayer.contents = [bottomImages objectAtIndex:currentValue]; 
     flipLayer.anchorPoint = CGPointMake(0.0, 1.0); 
     flipLayer.hidden = NO; 
     [CATransaction commit]; 

     CABasicAnimation *anim = [self generateAnimationForState:@"bottom"]; 
     [anim setValue:[NSString stringWithFormat:@"%d", digitIndex] forKey:@"digit"]; 
     [anim setValue:[NSString stringWithFormat:@"%d", currentValue] forKey:@"value"]; 
     [flipLayer addAnimation:anim forKey:nil]; 
    } else if([[oldAnimation valueForKey:@"state"] isEqual:@"bottom"] && flag) { 
     NSLog(@"Bottom animation finished"); 

     // Hide our flip layer 
     [CATransaction begin]; 
     [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; 
     bottomLayer.contents = [bottomImages objectAtIndex:currentValue]; 
     flipLayer.hidden = YES; 
     flipLayer.anchorPoint = CGPointMake(0.0, 0.0); 
     [CATransaction commit]; 
    } 
}

此委託功能使用一個幫助函數，它根據其狀態生成翻轉層的變換：

- (CABasicAnimation *)generateAnimationForState:(NSString *)state 
{ 
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    anim.duration = 0.15; 
    anim.repeatCount = 1; 

    // Check which animation we're doing 
    if([state isEqualToString:@"top"]) 
    { 
     anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0.0f, 1, 0, 0)]; 
     anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI/2, 1, 0, 0)]; 
    } 
    else 
    { 
     anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-M_PI/2, 1, 0, 0)]; 
     anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0.0f, 1, 0, 0)]; 
    } 

    anim.delegate = self; 
    anim.removedOnCompletion = NO; 

    // Set our animations state 
    [anim setValue:state forKey:@"state"]; 

    return anim; 
}

此解決方案可以正常工作，但會在動畫進行時引起一些輕微閃爍。我相信這是由於我的翻轉層在「頂部」和「底部」動畫之間重置的轉換。重要的是要注意，在動畫的第一階段完成後，我將翻轉圖層定位點設置爲圖像的頂部，確保翻轉正確。

目前我不確定我的動畫是否已設置最佳。一般來說，我對轉換和核心動畫都很陌生。任何人都可以將我指向正確的方向嗎？

來源

2010-05-28 ndg

看到這個問題http://stackoverflow.com/questions/2845281/how-do-i-perform-a-flip-and-grow-animation-like-in-iphoto-09/2904844#2904844 他是使用這個狐猴翻轉代碼作爲指導。它做你想要的很好。這是谷歌的第一個結果 – hooleyhoop 2010-05-28 18:39:30

後

anim.removedOnCompletion = NO;

嘗試插入此代碼：

anim.fillMode = kCAFillModeForwards;

讓我知道。本質上，代碼片段應該防止導致閃爍的「重置」。

來源

2010-09-21 11:57:02 dytrivedi

核心動畫'翻轉'動畫

回答

相關問題