iOS - 仅针对特定视图翻转动画

Posted 2023-03-13

【中文标题】iOS - 仅针对特定视图翻转动画

【英文标题】：iOS - Flip animation only for specific view

【发布时间】：2012-01-27 11:01:45

【问题描述】：

我正在开发一个包含一些视图的游戏（作为记忆卡游戏），我希望当用户点击卡片时，这个翻转并显示另一个视图。我用这个代码：

- (void)flipCard:(id)sender 

    UIButton *btn=(UIButton *)sender;
    UIView *view=[btn superview];
    UIView *flipView=[[UIView alloc] initWithFrame:[view frame]];
    [flipView setBackgroundColor:[UIColor blueColor]];
    [[flipView layer] setCornerRadius:10];

    NSLog(@"Flip card : view frame = %f, %f",view.frame.origin.x, view.frame.origin.y);

    [UIView transitionFromView:view toView:flipView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) 
    ];

每个视图都有一个覆盖整个视图的透明按钮，因此当用户点击视图时就像点击按钮一样。按钮调用上面传递发送者的方法。 当动画开始时，所有视图都被翻转，而不仅仅是我从发件人那里获得的视图。 我该怎么办？

【问题讨论】：

也许不是一个直接的解决方案，但是，您可以尝试为您在卡片上使用的按钮扩展 UIButton 并让弱指针返回卡片的视图，因此调用 btn.cardView 肯定会为您提供如果 superview 不起作用，则查看您想要的卡的视图。

【参考方案1】：

以下代码可能有助于解决您的问题。我认为它比使用透明按钮更干净。

- (void)viewDidLoad 
    [super viewDidLoad];

    flipped = NO;
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];

    [flipContainerView addGestureRecognizer:tapGesture];
    [tapGesture release];


- (void)handleTap:(UITapGestureRecognizer *)sender 
    if (sender.state == UIGestureRecognizerStateEnded) 
        [UIView transitionWithView:flipContainerView
                          duration:1
                           options:UIViewAnimationOptionTransitionFlipFromLeft
                        animations:^

            if (!flipped) 
                [frontCard setHidden:YES];
                [flipContainerView addSubview:backCard.view]; //or unhide it.
                flipped = YES;
             else 
                [frontCard setHidden:NO];
                [backCard removeFromSuperview]; //or hide it.
            

         completion:nil];
    

【讨论】：

您正在混合使用 setHidden 和 addSubview 技术：这是不一致的，一次容器中有一个子视图，另一次是两个子视图。我建议坚持一种技术：正面和背面都用setHidden切换，或者正面和背面都用removeFromSuperview切换。

【参考方案2】：

我遇到了同样的问题。在互联网上搜索不同的帖子后，我想出了一个优雅而简单的解决方案。我将卡片作为自定义 UIButtons。在自定义 UIButton 类中，我添加了使用翻转动画更改背景图像的方法：

-(void) flipCard
    [UIView transitionWithView:self
                      duration:0.3f
                       options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionCurveEaseInOut
                    animations:^
                        if (self.isFlipped) 
                            [self setBackgroundImage:[UIImage imageNamed:@"card_back_2.png"] forState:UIControlStateNormal];
                        else
                            [self setBackgroundImage:[UIImage imageNamed:self.cardName] forState:UIControlStateNormal];
                        
                     completion:NULL];
    self.isFlipped = !self.isFlipped;

希望这对其他人有所帮助，因为第一个答案已被接受

更新

如果您在包含此子视图的视图上，则代码为：

-(void)flipCard:(APCard*)card
    [UIView transitionWithView:card
                      duration:kFlipTime
                       options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionCurveEaseInOut
                    animations:^
                        if (card.isFlipped) 
                            [card setBackgroundImage:[UIImage imageNamed:@"card_back_2.png"] forState:UIControlStateNormal];
                        else
                            [card setBackgroundImage:[UIImage imageNamed:card.cardName] forState:UIControlStateNormal];
                        
                    completion:^(BOOL finished) 
                         if (finished) 
                             //DO Stuff
                         
                     
    ];
    card.isFlipped = !card.isFlipped;

【参考方案3】：

我在 Swift 4 中的用例：

@IBAction func flipCard() 
                let transitionOptions: UIView.AnimationOptions = [.transitionFlipFromRight, .showHideTransitionViews]

        UIView.transition(with: letterView, duration: 1.0, options: transitionOptions, animations: 
            if self.showingBack == true 
                self.letterImage.image = UIImage.init(named: self.letterImageName + ".png")
                self.letterNameLabel.text = self.regularWord
                self.showingBack = false
             else 
                self.letterImage.image = UIImage.init(named: self.letterImageName + "C.png")
                self.letterNameLabel.text = self.cursiveWord
                self.showingBack = true
            
        )