ios UIView 翻转动画

UIView flip animation

提问by Chris

In my game I have a grid of smaller UIViews hosted on my main UIView. Randomly the boxes will turn a different colour, at this point a user can touch them to score a point. When they touch the box I want to show some kind of animation, ideally something similar to the modal horizontal flip segue that XCode offers natively. How can I do this animation without actually transitioning into another UIView?

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

回答by sergio

You could simply try and animate the view transform like this (for a vertical flip):

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

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

or for better control you could have a look into iOS-Flip-Transform.

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

EDIT:

编辑：

for the shadow thing, try this:

对于影子的事情，试试这个：

    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};
                 }];

I hope this works fine for you. You can change the shadow settings as you like. Don't forget to import QuartzCore/QuartzCore.h.

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

回答by danh

UIViewprovides a method called

UIView提供了一个方法叫做

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

The options include UIViewAnimationOptionTransitionFlipFromLeftand ...Right

选项包括UIViewAnimationOptionTransitionFlipFromLeft和...Right

回答by Ilker Baltaci

For each box that should be flipped you can use a container UIView. Add both sides into this container.

对于应该翻转的每个框，您可以使用容器 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]; 
}

回答by CodeBender

You can do this with the following code for Swift 3.0:

您可以使用以下 Swift 3.0 代码执行此操作：

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

Just keep in mind, that this action will occur on your main thread, so the app will be blocked during execution.

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

If you require a completion handler, there are several options for

如果您需要完成处理程序，则有多种选择

回答by lo2ndii

This is what I ended up with (in Swift 3) based on Ilker Baltaci's answer:

这就是我根据Ilker Baltaci 的回答得出的结果（在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)
}

My View hierarchy for containerView, view1& view2(which are all IBOutletsin my custom ViewController class) is as follows:

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

• containerView
  • view1
  • view2

• containerView
  • view1
  • view2