ios - 卡片翻转动画

Question

我正在制作纸牌游戏，想使用纸牌翻转动画。

目前我正在使用这段代码处理两张图片，正面和背面:card，是一个带有两个 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 直接放在每个卡片的顶部other 在您打算翻转的 UIView 上。首先，将他们的图像相应地设置为正面和背面；并且，在这种特殊情况下，隐藏 frontImageView 并显示 backImageView。

假设“card”是您打算翻转的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
               }];

编辑:

为了处理阴影，首先，在您发布的视频中，阴影的长度增长比淡入要多。而且似乎(并且合乎逻辑)阴影在期间达到了顶峰动画的中间，因为卡片被举到最高点。由于阴影在翻转动画过程中会先增大然后缩小，因此将阴影动画包含在与翻转相同的动画 block 中是没有意义的，因为它们处于不同的时间安排。

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

也许您可以同时运行两个动画，即在执行上述动画的同时，还可以执行以下操作:

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并利用 autoreverse 属性自动反转阴影的增长。