卡翻转动画

How is this animation achieved? < - 链接卡翻转动画

我想提出一个纸牌游戏，并想用一个类似的动画。

目前我使用这个代码与两个图像，正面和背面：卡，是有两个的UIImageView propertys

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

来源

2014-02-23 Dasem

并执行代码的工作？它有什么问题？它会崩溃吗？它不显示适当的动画吗？ –

它的工作原理，我真的很喜欢从链接的动画，因为它看起来更自然：] – Dasem

我看到你的代码很多错了蝙蝠......为什么你设置卡的图像的前面到后面卡在动画块？你为什么在视图中淡出然后自动出来？你的动画现在是什么样子？ –

为了创建一个基本的卡片翻转动画像一个在一个UIView您建议将frontImageView和backImageView直接放在您想翻转的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 
       }];

编辑：

并处理的影子，首先，它出现在视频中你张贴的影子的长度超过了它的渐变长度。看起来好像（并且合乎逻辑的意义）影子在动画中间达到顶点，因为卡片在最高点被抬起。由于阴影增长然后在翻转动画的过程中收缩，因此将阴影动画包括在与翻转相同的动画块中是没有意义的，因为它们处于不同的时间表。

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

或许你可以同时运行两个动画，即虽然上面的动画表演，也做这样的事情：

CABasicAnimation *shadowAnimation = [CABasicAnimation animationWithKeyPath:@"shadowRadius"]; 
shadowAnimation.delegate = self; 
[shadowAnimation setFromValue:[NSNumber numberWithFloat:3.0]]; 
[shadowAnimation setToValue:[NSNumber numberWithFloat:10.0]]; 
[shadowAnimation setDuration:0.65f]; 
shadowAnimation.autoreverses = YES; 
[[card layer] addAnimation:shadowAnimation forKey:@"shadowRadius"];

The last portion has been adapted from this code和利用了自动翻转属性自动进行反向阴影的增长。

来源

2014-02-23 23:19:52

我会试试看，谢谢。 – Dasem

我测试了几样东西，与妥协这一点：

_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; 



            }]; 
      }];

来源

2014-02-24 10:04:58 Dasem

这是如何在迅速3进行卡翻转动画：

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

来源

2016-10-28 12:03:59 Incinerator

回答

相关问题