在翻转动画的一半更改UIImageView图像

Question

如何在Flip动画的一半更改UIImageView的图像。

我的代码确实翻转了UIImageView并成功更改了图像，但是它瞬间就变化了。我想要实现的是，在180度翻转达到90度翻转时才更改图像。这是我的代码：

在视图上创建UIImageView：

UIImage *image = [UIImage imageNamed:@"fb1.jpg"];
    imageView = [[UIImageView alloc] initWithImage:image];
    vw = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 80, 80)];
    vw.layer.cornerRadius = vw.frame.size.width / 2;
    imageView.frame = CGRectMake(20, 20, 80, 80);
    imageView.layer.cornerRadius = imageView.frame.size.width / 2;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [[UIColor blackColor] CGColor];
    imageView.layer.borderWidth = 1.0;
    [self.view addSubview: imageView];
    //[self.view addSubview:vw];
    [imageView setUserInteractionEnabled:YES];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(taptap:)];
    [imageView addGestureRecognizer:tap];

点击时动画UIImageView：

[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
                     animations:^(void) {
                         imageView.transform = CGAffineTransformMakeScale(-1, 1);
                         [UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionTransitionCrossDissolve
                                          animations:^(void) {
                                              imageView.image = [UIImage imageNamed:@"fb2.jpg"];
                                          } completion:^(BOOL finished) {

                                          }];
                     }
                     completion:^(BOOL finished) {
                     }];

此外，我正在特定的UIImageView上使用轻拍手势来进行动画。

- SleepNot

---

https://dev59.com/kUjSa4cB1Zd3GeqPG6L8 - iOS

我尝试在那个链接上遵循的答案会使我的圆形UIImageView在翻转开始时变成正方形。 - SleepNot

Answer 1

你可以使用UIView类方法+ (void)transitionWithView:duration:options:animations:completion:轻松实现动画效果。

用以下代码进行动画：

[UIView transitionWithView:imageView
                  duration:0.4
                   options:UIViewAnimationOptionTransitionFlipFromRight
                animations:^{
                    //  Set the new image
                    //  Since its done in animation block, the change will be animated
                    imageView.image = newImage;
                } completion:^(BOOL finished) {
                    //  Do whatever when the animation is finished
                }];

您可以通过将UIViewAnimationOptionTransitionFlipFromRight替换为以下任何选项之一来设置翻转的方向：

UIViewAnimationOptionTransitionFlipFromLeft
UIViewAnimationOptionTransitionFlipFromRight
UIViewAnimationOptionTransitionFlipFromTop
UIViewAnimationOptionTransitionFlipFromBottom

- Lukas Kukacka

---

谢谢你，但我需要的动画是像抛硬币一样的动画，我只想在硬币翻转到一半时才更改图像。 - SleepNot

我不明白你想要实现什么。你想要180度翻转动画（从纸张的一侧到另一侧），还是完整的360度翻转动画？我的代码实现了180度翻转动画：先进行90度（半翻转）翻转，使图像在视觉上宽度为0，然后更改图像并将宽度返回到原始值。 - Lukas Kukacka

这就是我想要实现的。在半翻转之后，我希望图像立即改变。 - SleepNot

没有任何理由。我自己尝试过设置圆角半径并且在翻转动画期间半径正确保留。也许你在其他地方有问题。 - Lukas Kukacka

我已经添加了创建UIImageView的代码，但无法检测出问题所在。你能否发布带有圆角半径的代码？ - SleepNot

Answer 2

对于 Swift

UIView.transition(with: imageView,
                  duration: 0.4,
                  options: UIView.AnimationOptions.transitionFlipFromLeft,
                  animations: {
                      imageView.image = newImage
        }, completion: nil)

- pableiros

Answer 3

尝试使用两步动画，如果您不喜欢这个效果，可以查阅文档以了解连接选项的方法。

[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn
                 animations:^(void) {
                     //do your half rotation here
                     imageView.transform = CGAffineTransformMakeScale(0, 1);
                 }
                 completion:^(BOOL finished) {
                     if(finished){
                         imageView.image = [UIImage imageNamed:@"fb2.jpg"];
                         [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut
                                          animations:^(void) {
                                              //do your second half rotation here
                                              imageView.transform = CGAffineTransformMakeScale(-1, 1);
                                          } completion:^(BOOL finished) {

                                          }];
                     }
                 }];

- Calin Chitu