Question

我正在制作纸牌游戏，并希望使用卡片翻转动画。

目前我正在使用此代码，前后两个图像：卡，是一个带有两个UIImageView属性的uiview

[UIView transitionWithView:card duration:0.65f
                   options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
                       card.backImageView.image = card.frontImageView.image;
                       card.layer.shadowOpacity = 0.8;
                   } completion:^(BOOL finished){
                       card.layer.shadowOpacity = 0.0;
                   }];

Answer 1

为了创建一个基本的卡片翻转动画，例如您链接到的视频中的动画，我建议将frontImageView和backImageView直接放在{{1你打算翻转。首先，相应地将图像设置为正面和背面;并且，在这种特殊情况下，隐藏UIView并显示frontImageView。

假设“卡片”是您打算翻转的backImageView，执行翻转尝试：

UIView

编辑：

为了处理阴影，首先，你发布的视频中显示阴影的长度比它刚刚渐渐消失的长度更多。而且似乎（并且在逻辑上意义上说）阴影在此期间达到峰值当卡片被抬起到最高点时动画的中间部分。由于阴影增长然后在翻转动画过程中收缩，因此将阴影动画包含在与翻转相同的动画块中是没有意义的，因为它们处于不同的时间表中。

其次，关于阴影，要为图层属性设置动画，您必须使用核心动画。

也许你可以同时运行两个动画，也就是在上面的动画执行时，也可以这样做：

[UIView transitionWithView:card duration:0.65f
               options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
                   frontImageView.hidden = NO;
                   backImageView.hidden = YES;
               } completion:^(BOOL finished) {
                   // whatever you'd like to do immediately after the flip completes
               }];

The last portion has been adapted from this code并利用自动反转属性自动反转阴影的增长。

Answer 2

这是如何在swift 3中执行卡片翻转动画：

UIView.transition(from: frontImageView, 
                    to: backImageView, 
              duration: 0.65, 
               options: .transitionFlipFromRight, 
            completion: nil)

Answer 3

我测试了一些东西，并与此妥协：

_tempTransform = card.transform;
[card loadFront];//loads the front image.
card.frontImageView.hidden=YES;



[UIView animateWithDuration:0.02f
                  delay:0.0
                options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                 CATransform3D transform = CATransform3DIdentity;
                 transform.m34 = 1.0 / -500;
                 transform = CATransform3DRotate(transform, 15.0f * M_PI / 180.0f, 0, -1, 0.0f);
                 card.layer.transform = transform;

             }completion:^(BOOL done){
                 card.layer.shadowOpacity=0.1f;
                 card.transform=CGAffineTransformScale(card.transform, 1.2f, 1.2f);

                 [UIView transitionWithView:card duration:0.4f
                                    options:UIViewAnimationOptionTransitionFlipFromRight animations:^{

                                        card.frontImageView.hidden=NO;
                                        card.backImageView.hidden=YES;


                                    } completion:^(BOOL finished){
                                        card.layer.shadowOpacity=0.0f;
                                        card.transform=_tempTransform;



                                    }];
             }];

卡片翻转动画

3 个答案: