垂直摺疊動畫

Question

我想爲我的UIView垂直創建摺疊動畫..經過漫長的搜索，我找到了以下鏈接.. Origami transition using CATransform3D perspective ..從上面的鏈接我只是嘗試以下..它給了我確切的動畫。 。通過我的UIView出現在反向..我不知道我搞砸了..任何幫助將不勝感激..

-(IBAction)animate 
{ 


    CATransform3D transform = CATransform3DIdentity; 
    CALayer *topSleeve; 
    CALayer *middleSleeve; 
    CALayer *topShadow; 
    CALayer *middleShadow; 
    UIView *mainView; 
    CGFloat width = self.view.frame.size.width; 
    CGFloat height = self.view.frame.size.height; 
    CALayer *firstJointLayer; 
    CALayer *secondJointLayer; 
    CALayer *perspectiveLayer; 

    mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)]; 
    mainView.backgroundColor = [UIColor clearColor]; 
    [self.view addSubview:mainView]; 

    UIGraphicsBeginImageContext(self.view.bounds.size); 
    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()]; 
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 


    CGSize size = CGSizeMake(viewImage.size.width/2, viewImage.size.height); 


    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetFillColorWithColor(context, [[UIColor blackColor] CGColor]); 
    CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height)); 
    UIImage *solidColorImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    // The left half of the image 
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); 
    [viewImage drawAtPoint:CGPointMake(0, 0) blendMode:kCGBlendModeNormal alpha:1.0]; 
    UIImage *leftImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 


    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); 
    [viewImage drawAtPoint:CGPointMake(-size.width, 0) blendMode:kCGBlendModeNormal alpha:1.0]; 
    [solidColorImage drawAtPoint:CGPointMake(0, 0) blendMode:kCGBlendModeMultiply alpha:0.1]; 
    UIImage *rightImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    perspectiveLayer = [CALayer layer]; 
    perspectiveLayer.frame = CGRectMake(0, 0, width/2, height); 
    [mainView.layer addSublayer:perspectiveLayer]; 

    firstJointLayer = [CATransformLayer layer]; 
    firstJointLayer.frame = mainView.bounds; 
    [perspectiveLayer addSublayer:firstJointLayer]; 

    topSleeve = [CALayer layer]; 
    topSleeve.frame = CGRectMake(0, 0, width/2, height); 
    topSleeve.anchorPoint = CGPointMake(0, 0.5); 
    topSleeve.backgroundColor = [UIColor colorWithPatternImage:leftImage].CGColor; 
    topSleeve.position = CGPointMake(0, height/2); 
    [firstJointLayer addSublayer:topSleeve]; 
    topSleeve.masksToBounds = YES; 

    secondJointLayer = [CATransformLayer layer]; 
    secondJointLayer.frame = mainView.bounds; 
    secondJointLayer.frame = CGRectMake(0, 0, width, height); 
    secondJointLayer.anchorPoint = CGPointMake(0, 0.5); 
    secondJointLayer.position = CGPointMake(width/2, height/2); 
    [firstJointLayer addSublayer:secondJointLayer]; 

    middleSleeve = [CALayer layer]; 
    middleSleeve.frame = CGRectMake(0, 0, width/2, height); 
    middleSleeve.anchorPoint = CGPointMake(0, 0.5); 
    middleSleeve.backgroundColor = [UIColor colorWithPatternImage:rightImage].CGColor; 
    middleSleeve.position = CGPointMake(0, height/2); 
    [secondJointLayer addSublayer:middleSleeve]; 
    middleSleeve.masksToBounds = YES; 


    firstJointLayer.anchorPoint = CGPointMake(0, 0.5); 
    firstJointLayer.position = CGPointMake(0, height/2); 

    topShadow = [CALayer layer]; 
    [topSleeve addSublayer:topShadow]; 
    topShadow.frame = topSleeve.bounds; 
    topShadow.backgroundColor = [UIColor blackColor].CGColor; 
    topShadow.opacity = 0.5; 

    middleShadow = [CALayer layer]; 
    [middleSleeve addSublayer:middleShadow]; 
    middleShadow.frame = middleSleeve.bounds; 
    middleShadow.backgroundColor = [UIColor blackColor].CGColor; 
    middleShadow.opacity = 0.5; 

    transform.m34 = 1.0/(-700.0); 
    perspectiveLayer.sublayerTransform = transform; 

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:90*M_PI/180]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [firstJointLayer addAnimation:animation forKey:nil]; 

    animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:-180*M_PI/180]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [secondJointLayer addAnimation:animation forKey:nil]; 



    animation = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:perspectiveLayer.bounds.size.width]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [perspectiveLayer addAnimation:animation forKey:nil]; 

    animation = [CABasicAnimation animationWithKeyPath:@"position.x"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:perspectiveLayer.position.x]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [perspectiveLayer addAnimation:animation forKey:nil]; 

    animation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:0.5]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [topShadow addAnimation:animation forKey:nil]; 

    animation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
    [animation setDuration:2]; 
    [animation setAutoreverses:YES]; 
    [animation setRepeatCount:INFINITY]; 
    [animation setFromValue:[NSNumber numberWithDouble:0.5]]; 
    [animation setToValue:[NSNumber numberWithDouble:0]]; 
    [middleShadow addAnimation:animation forKey:nil]; 

} 

Answer 1

這是因爲CALayer的繪製其背景翻轉。您最好將每個圖像設置爲CALayer內容，這將按預期繪製每個圖像（不翻轉）。順便說一下，大圖像的圖案可能會增加內存使用量，所以您應該避免使用它們。

topSleeve.contents = (id)leftImage.CGImage; 
middleSleeve.contents = (id)rightImage.CGImage;