动画 UIView 将一半折​​叠到另一半

Question

我有以下问题。 我想写一个方法，我可以用它把 UIView 的一半折叠到另一半上。

算法对我来说很清楚（至少我是这么认为的，但也许我忘记了什么）。

1. 创建 UIView 的渲染图像
2. 根据我要折叠到另一半的一半来拆分它
3. 将渲染图像的相应一半添加到相应的图层中
4. 将这两个图层添加到具有白色背景且没有内容的背景图层中（它只是用来制作白色背景以覆盖视图的原始图层）
5. 将背景层添加到视图层
6. 设置折叠层的变换
7. 开始动画

应该有效，但无效！我不知道为什么。 :(

这里是方法的源代码：

-(void)foldView:(UIView *) view withDuration: (NSTimeInterval) duration toSide: (NSString*) side withReverse: (bool) reverse andRepeatCount:(float) repeatCount
{
    //create Screenshot from view to fold
    UIGraphicsBeginImageContext(view.bounds.size);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *img_view = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //Bildausschnitte festlegen
    CGRect rect_closingImageHalf = view.bounds;    
    CGRect rect_fixedImageHalf = view.bounds;    

    CGPoint pt_anchorOpeningImageHalf;
    CGPoint pt_anchorFixedImageHalf;

    CATransform3D transform;

    CALayer *lay_closingImageHalf;
    CALayer *lay_fixedImageHalf;
    lay_fixedImageHalf.masksToBounds = YES;
    lay_closingImageHalf.masksToBounds = YES;
    //get white backside of layer which folds
    lay_closingImageHalf.doubleSided = NO;


    //white backgroundlayer to hide the layer of the image
    CALayer *backgroundAnimationLayer = [CALayer layer];
    backgroundAnimationLayer.frame = view.frame;
    backgroundAnimationLayer.backgroundColor = [[UIColor whiteColor] CGColor];

    //determine direction in which to fold    
    if ([side isEqualToString:k_side_vonLinks]) 
    {
        rect_closingImageHalf = CGRectMake(0, 0, img_view.size.width / 2, img_view.size.height);
        rect_fixedImageHalf = CGRectMake(img_view.size.width / 2, 0, img_view.size.width / 2, img_view.size.height);

        pt_anchorOpeningImageHalf = CGPointMake(1.0, 0.5);        
        pt_anchorFixedImageHalf = CGPointMake(0.5, 0.5);

        transform = CATransform3DMakeRotation(M_PI, 0, 1.0, 0);
    }
    else if([side isEqualToString:k_side_vonRechts])
    {
        rect_closingImageHalf = CGRectMake(img_view.size.width / 2, 0, img_view.size.width / 2, img_view.size.height);
        rect_fixedImageHalf = CGRectMake(0, 0, img_view.size.width / 2, img_view.size.height);

        pt_anchorOpeningImageHalf = CGPointMake(0.0, 0.5);
        pt_anchorFixedImageHalf = CGPointMake(0.5, 0.5);   

        transform = CATransform3DMakeRotation(M_PI, 0, 1.0, 0);
    }
    else if([side isEqualToString:k_side_vonOben])
    {
        rect_closingImageHalf = CGRectMake(0, 0, img_view.size.width, img_view.size.height / 2);
        rect_fixedImageHalf = CGRectMake(0, img_view.size.height / 2, img_view.size.width, img_view.size.height / 2);

        pt_anchorOpeningImageHalf = CGPointMake(0.5, 1.0);
        pt_anchorFixedImageHalf = CGPointMake(0.5, 0.5);

        transform = CATransform3DMakeRotation(M_PI, 1.0, 0, 0);
    }
    else if([side isEqualToString:k_side_vonUnten])
    {
        rect_closingImageHalf = CGRectMake(0, img_view.size.height / 2, img_view.size.width, img_view.size.height / 2);
        rect_fixedImageHalf = CGRectMake(0, 0, img_view.size.width, img_view.size.height / 2);

        pt_anchorOpeningImageHalf = CGPointMake(0.5, 0.0);
        pt_anchorFixedImageHalf = CGPointMake(0.5, 0.5);

        transform = CATransform3DMakeRotation(M_PI, 1.0, 0, 0);
    }

    CGImageRef img_closingHalf = CGImageCreateWithImageInRect( [img_view CGImage], rect_closingImageHalf);
    CGImageRef img_fixedHalf = CGImageCreateWithImageInRect( [img_view CGImage], rect_fixedImageHalf);    

    lay_closingImageHalf.anchorPoint = pt_anchorOpeningImageHalf;
    lay_fixedImageHalf.anchorPoint = pt_anchorFixedImageHalf;


    //add the rendered image of the view to the backgroundLayer
    [backgroundAnimationLayer addSublayer:lay_fixedImageHalf];
    [backgroundAnimationLayer addSublayer:lay_closingImageHalf];
    lay_closingImageHalf.contents = (__bridge id)img_closingHalf;
    lay_fixedImageHalf.contents = (__bridge id)img_fixedHalf;


    [view.layer addSublayer:backgroundAnimationLayer];

    //add perspective
    transform.m34 = 1.0f / 2500.0f;

    //animate the folding of the layer
    CABasicAnimation *flipAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    flipAnimation.toValue = [NSValue valueWithCATransform3D:transform];
    flipAnimation.duration = duration;
    flipAnimation.autoreverses = reverse;
    flipAnimation.repeatCount = repeatCount;
    flipAnimation.delegate = self;
    flipAnimation.removedOnCompletion = NO;
    flipAnimation.fillMode = kCAFillModeForwards;

    [backgroundAnimationLayer addAnimation:flipAnimation forKey:@"fold"];
}

如果你们中的某个人知道为什么它不起作用，如果他能提供帮助，我将非常高兴。 我用谷歌搜索了将近一天并阅读了许多示例，但我找不到错误。 我还查看了AFKPageFLipper，这是一个非常适合此任务的示例，但不幸的是它并没有帮助我找出我的代码有什么问题。

希望有人可以帮助我。

Answer 1

看看这两个项目，其中包含您要创建的效果：

https://github.com/blommegard/SBTickerView

https://github.com/raweng/FlipView

Answer 2

应该是

CALayer *lay_closingImageHalf = [CALayer layer];
CALayer *lay_fixedImageHalf = [CALayer layer];

而不是

CALayer *lay_closingImageHalf;
CALayer *lay_fixedImageHalf;

至少。

还需要设置lay_closingImageHalf和lay_fixedImageHalf的框架

[lay_closingImageHalf setFrame:rect_closingImageHalf];
[lay_fixedImageHalf setFrame:rect_fixedImageHalf];

它的翻转动画仍然没有折叠...你确定它是你的代码吗？