UIView翻转动画

Posted 2023-03-16

【中文标题】UIView翻转动画

【英文标题】：UIView flip animation

【发布时间】：2013-01-20 15:52:08

【问题描述】：

在我的游戏中，我的主 UIView 上托管了一个较小的 UIView 网格。盒子会随机变成不同的颜色，此时用户可以触摸它们来得分。当他们触摸框时，我想显示某种动画，理想情况下类似于 XCode 原生提供的模态水平翻转 segue。如何在不实际转换到另一个 UIView 的情况下制作此动画？

【参考方案1】：

您可以简单地尝试像这样为视图变换设置动画（用于垂直翻转）：

[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) 
                     view.transform = CGAffineTransformMakeScale(1, -1);
                 
                 completion:nil];

或者为了更好的控制，您可以查看ios-Flip-Transform。

编辑：

对于影子，试试这个：

    view.layer.shadowColor = [UIColor blackColor].CGColor;
    view.layer.shadowOpacity = 0.75;
    view.layer.shadowRadius = 15.0;
    view.layer.shadowOffset = (CGSize)0.0,20.0;

[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) 
                     view.transform = CGAffineTransformMakeScale(1, -1);
                 
                 completion:^(BOOL b) 
    view.layer.shadowColor = [UIColor clearColor].CGColor;
    view.layer.shadowOpacity = 0.0;
    view.layer.shadowRadius = 0.0;
    view.layer.shadowOffset = (CGSize)0.0, 0.0;
                 ];

我希望这对你有用。您可以根据需要更改阴影设置。不要忘记导入 QuartzCore/QuartzCore.h。

【讨论】：

这正是我所追求的...我如何更改它（出于测试目的）以使用投影旋转 90 度（好像它从屏幕上弹出，旋转，然后弹回)?

【参考方案2】：

UIView 提供了一个方法叫

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

选项包括UIViewAnimationOptionTransitionFlipFromLeft 和 ...Right

【参考方案3】：

对于每个应该翻转的框，您可以使用容器 UIView。 将两边都添加到这个容器中。

if (side1Visible) 
    UIViewAnimationOptions options = UIViewAnimationOptionBeginFromCurrentState |     
    UIViewAnimationTransitionFlipFromRight;  

    [UIView transitionWithView:containerView  
                  duration:1.0  
                   options:options  
                animations:^ side1.hidden = YES; side2.hidden = NO;   
                completion:NULL];  
 else 
    UIViewAnimationOptions options = UIViewAnimationOptionBeginFromCurrentState |     
    UIViewAnimationTransitionFlipFromLeft;  

    [UIView transitionWithView:containerView  
              duration:1.0  
               options:options  
            animations:^ side1.hidden = NO; side2.hidden = YES;   
            completion:NULL]; 

【参考方案4】：

您可以使用以下适用于 Swift 3.0 的代码来做到这一点：

    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut, animations:  
        self.view.transform = CGAffineTransform(scaleX: 1, y: -1)
    , completion: nil)

请记住，此操作将发生在您的主线程上，因此应用程序将在执行期间被阻止。

如果你需要一个完成处理程序，有几个选项

【参考方案5】：

这就是我基于 Ilker Baltaci's answer 最终得到的（在 Swift 3 中）：

@IBAction func flipViews() 

    // declare variables for transition
    let duration = 0.5
    var animationOptions: UIViewAnimationOptions
    var animations: () -> Void
    var completion: ((Bool) -> Void)?

    if view2.isHidden 
        animationOptions = [.beginFromCurrentState, .transitionFlipFromTop]
        animations = 
            self.view2.isHidden = false
            self.view1.isHidden = true
        
        completion =  success in
            if success 
                self.updateSomeContentOfView2()
            
        
     else 
        animationOptions = [.beginFromCurrentState, .transitionFlipFromBottom]
        animations = 
            self.view2.isHidden = true
            self.view1.isHidden = false
        
    

    UIView.transition(with: containerView,
                      duration: duration,
                      options: animationOptions,
                      animations: animations,
                      completion: completion)

containerView、view1 和 view2（在我的自定义 ViewController 类中都是 IBOutlets）的视图层次结构如下：

containerView view1 view2