Question

我一直在iOS中实现一个简单的FlipView：一个包含两个子视图的UIView，一次显示一个，当你点击它时，它会翻转它们。我正在使用以下内容来动画翻转。

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    @synchronized(self){
        if(!self.flipping){
            self.flipping = YES;
            UIView *toView = self.currentView == self.primaryView ? self.secondaryView : self.primaryView;            
            [UIView transitionFromView:self.currentView toView:toView duration:self.speed options:UIViewAnimationOptionTransitionFlipFromLeft|UIViewAnimationOptionCurveEaseInOut completion:^(BOOL finished) {
                [self.currentView removeFromSuperview];
                self.currentView = toView;
                self.flipping = NO;
            }];                
        }
    }
}

非常直接，对吧？

但令我烦恼的是，虽然视图翻转，但翻转的内容却变暗了。在浅色背景下显示。

有没有人知道有一个完全相同的动画的解决方案，但没有变暗（＆lt; =甚至是一个单词？）

提前致谢！

PS：我的目标是IOS 5及以上版本。

Answer 1

我最近遇到了类似症状的问题，我一次又一次地添加了一个子视图，在我的代码中，每当我提交某个动作时，我都会这样做。也许你正在做类似的事情？当您的触摸结束时，您是否正在为翻转的内容做其他事情？您可能需要删除正在添加的子视图如果这是您的问题。

Answer 2

我成功了，在我在http://www.mycodestudio.com/blog/2011/01/10/coreanimation/找到的代码中获得灵感（他本人也从http://www.mentalfaculty.com/mentalfaculty/Blog/Entries/2010/9/22_FLIPPIN_OUT_AT_NSVIEW.html获取灵感）

无论如何，我在两个观点之间旋转。

- (void)flip{
    @synchronized(self){
        if(!self.flipping){
            self.flipping = YES;

            UIView *bottomView = self.currentView == self.primaryView ? self.secondaryView : self.primaryView;
            CALayer *top = self.currentView.layer;
            CALayer *bot = bottomView.layer;

            CAAnimation *topAnimation = [self flipAnimationWithDuration:self.speed/2.0 forLayerBeginningOnTop:YES scaleFactor:1];
            CAAnimation *bottomAnimation = [self flipAnimationWithDuration:self.speed/2.0 forLayerBeginningOnTop:NO scaleFactor:1];

            CGFloat zDistance = 1500.0f;
            CATransform3D perspective = CATransform3DIdentity;
            perspective.m34 = -1. / zDistance;
            top.transform = perspective;
            bot.transform = perspective;

            topAnimation.delegate = self;
            [CATransaction setCompletionBlock:^{
                [top removeAllAnimations];
                [self.currentView removeFromSuperview];
                self.currentView = bottomView;
                [self addSubview:bottomView];

                [CATransaction setCompletionBlock:^{
                    self.flipping = NO;
                    [bot removeAllAnimations];
                }];
                [CATransaction begin];

                [bot addAnimation:bottomAnimation forKey:@"flip"];

                [CATransaction commit];
            }];
            [CATransaction begin];
            [top addAnimation:topAnimation forKey:@"flip"];

            [CATransaction commit];
        }
    }
}

-(CAAnimation *)flipAnimationWithDuration:(NSTimeInterval)aDuration forLayerBeginningOnTop:(BOOL)beginsOnTop scaleFactor:(CGFloat)scaleFactor
{
    // Rotating halfway (pi radians) around the Y axis gives the appearance of flipping
    CABasicAnimation *flipAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    CGFloat startValue = beginsOnTop ? 0.0f : M_PI/2;
    CGFloat endValue = beginsOnTop ? -M_PI/2 : 0.0f;
    flipAnimation.fromValue = [NSNumber numberWithDouble:startValue];
    flipAnimation.toValue = [NSNumber numberWithDouble:endValue];

    // Shrinking the view makes it seem to move away from us, for a more natural effect
    // Can also grow the view to make it move out of the screen
    CABasicAnimation *shrinkAnimation = nil;
    if (scaleFactor != 1.0 ) {
        shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        shrinkAnimation.toValue = [NSNumber numberWithFloat:scaleFactor];

        // We only have to animate the shrink in one direction, then use autoreverse to "grow"
        shrinkAnimation.duration = aDuration * 0.5;
        shrinkAnimation.autoreverses = YES;
    }

    // Combine the flipping and shrinking into one smooth animation
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = [NSArray arrayWithObjects:flipAnimation, shrinkAnimation, nil];

    // As the edge gets closer to us, it appears to move faster. Simulate this in 2D with an easing function
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:beginsOnTop?kCAMediaTimingFunctionEaseIn:kCAMediaTimingFunctionEaseOut];
    animationGroup.duration = aDuration;

    // this really means keep the state of the object at whatever the anim ends at
    // if you don't do this then it reverts back to the original state (e.g. brown layer)
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.removedOnCompletion = NO;

    return animationGroup;
}

这两个视图名为primaryView和secondaryView。您可以使用任何视图，（ImageView，文本视图......）

UIview翻转使视图变暗

2 个答案: