UIView Image - 从一个图像淡入到另一个图像答案

【问题标题】：UIView Image - fade from one image to anotherUIView Image - 从一个图像淡入到另一个图像
【发布时间】：2018-03-07 16:53:10
【问题描述】：

我正在尝试使用 SINGLE UIView 从一个图像淡入到另一个图像（是的！ 已经看到关于 stackoverflow 的问答，它使用 2 个 UIViews - 在彼此）。

我有一个当前的 UIView 图像，想将其淡出并替换为另一个图像，然后将新图像淡入。

我尝试了以下方法：第一个的褪色，单独工作。

尝试#1）

  // Fade original image - image already set in Storyboard
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5.0];
    [UIView setAnimationDelegate:self];
    [_imgMirror setAlpha:0.0];
    [UIView commitAnimations];


    // Fade in new image
    [_imgMirror setImage:[UIImage imageNamed:@"NewImage"]];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5.0];
    [_imgMirror setAlpha:100.0];
    [UIView commitAnimations];

这会在新图像中消失...旧图像不会消失。还尝试在两组代码之间“暂停”。

尝试 #2)

UIImage * toImage = [UIImage imageNamed:@"NewImage"];
[UIView transitionWithView:self.imgMirror
                  duration:0.33f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    self.imgMirror.image = toImage;
                } completion:NULL];

这会立即显示新图像，不会褪色或“CrossDissolves”。

尝试 #3)

  // Fade original image - image already set in Storyboard
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:5.0];
        [UIView setAnimationDelegate:self];
        [_imgMirror setAlpha:0.0];
        [UIView commitAnimations];



UIImage * toImage = [UIImage imageNamed:@"NewImage"];
    [UIView transitionWithView:self.imgMirror
                      duration:0.33f
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        self.imgMirror.image = toImage;
                    } completion:NULL];

这与 #2 的结果相同。

知道有什么问题吗？

【问题讨论】：

标签： ios objective-c

【解决方案1】：

试试这个。它使图像淡出，在没有动画的情况下交换图像，然后用另一个动画淡入。

CGFloat fadeDuration = 0.5f;
[UIView animateWithDuration:fadeDuration animations:^{
    [_imgMirror setAlpha:0.0];
} completion:^(BOOL finished) {
    UIImage * toImage = [UIImage imageNamed:@"NewImage"];
    _imgMirror.image = toImage;
    [UIView animateWithDuration:fadeDuration animations:^{
        [_imgMirror setAlpha:1.0];
    }];
}];

【讨论】：

【解决方案2】：

您不能通过设置图像视图的.image 属性从一个 UIImage“交叉淡入淡出”到另一个。

您可以通过“中间”图像视图来做到这一点。

假设您有一个通过IBOutlet 连接的UIImageView，以及一个通过IBAction 连接的按钮：

//
//  CrossFadeViewController.m
//
//  Created by Don Mag on 3/7/18.
//

#import "CrossFadeViewController.h"

@interface CrossFadeViewController ()

@property (strong, nonatomic) IBOutlet UIImageView *imgMirror;

@end

@implementation CrossFadeViewController

- (IBAction)didTap:(id)sender {

    [self crossFadeTo:@"NewImage"];

}

- (void) crossFadeTo:(NSString *)newImageName {

    UIImageView *toImageView;

    // create a new UIImageView with the new Image
    toImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:newImageName]];

    // set the new image view's frame to match the existing one
    toImageView.frame = _imgMirror.frame;

    // cross-fade / dissolve from the existing image view to the new one
    [UIView transitionFromView:_imgMirror
                        toView:toImageView
                      duration:0.33
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    completion:^(BOOL finished) {
                        // when animation is finished
                        // remove the "old" image view from its superview
                        [_imgMirror removeFromSuperview];
                        // assign the new image view to the IBOutlet property
                        _imgMirror = toImageView;
                    }];

}

@end

【讨论】：