Làm mờ dần / hòa tan khi thay đổi hình ảnh của UIImageView

Thay vì tạo hai UIImageViews, có vẻ hợp lý khi chỉ thay đổi imagemột quan điểm. Nếu tôi làm điều đó, có cách nào làm mờ / hòa tan chéo giữa hai hình ảnh thay vì chuyển đổi tức thời không?

Chỉnh sửa: có một giải pháp tốt hơn từ @acheal bên dưới .

Một cách khác để làm điều này là bằng cách sử dụng các chuyển tiếp CAAnimation được xác định trước:

CATransition *transition = [CATransition animation];
transition.duration = 0.25;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
transition.delegate = self;
[self.view.layer addAnimation:transition forKey:nil];
view1.hidden = YES;
view2.hidden = NO;

Xem dự án ví dụ Xem Chuyển tiếp từ Apple: https://developer.apple.com/l Library / content / samplecode / ViewTransitions / Intributiontion / Intro.html

Nó có thể đơn giản hơn nhiều bằng cách sử dụng các UIKit animationphương thức dựa trên khối mới .

Giả sử đoạn mã sau nằm trong trình điều khiển khung nhìn và UIImageView bạn muốn hòa tan chéo là một khung nhìn của self.view có thể truy cập thông qua thuộc tính self.imageViewSau đó, tất cả những gì bạn cần là:

    UIImage * toImage = [UIImage imageNamed:@"myname.png"];
    [UIView transitionWithView:self.imageView
                      duration:5.0f
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                      self.imageView.image = toImage;
                    } completion:nil]

Làm xong.

Và để làm điều đó trong Swift, nó giống như vậy:

    let toImage = UIImage(named:"myname.png")
    UIView.transitionWithView(self.imageView,
                              duration:5,
                              options: UIViewAnimationOptions.TransitionCrossDissolve,
                              animations: { self.imageView.image = toImage },
                              completion: nil)

Swift 3, 4 & 5

     let toImage = UIImage(named:"myname.png")
     UIView.transition(with: self.imageView,
                       duration: 0.3,
                       options: .transitionCrossDissolve,
                       animations: {
                           self.imageView.image = toImage
                       },
                       completion: nil)

Đối với Swift 3.0.1:

UIView.transition(with: self.imageView,
              duration:0.5,
              options: .transitionCrossDissolve,
              animations: { self.imageView.image = newImage },
              completion: nil)

Tham khảo: https://gist.github.com/licvido/bc22343cacfa3a8ccf88

Vâng, những gì bạn nói là hoàn toàn chính xác và đó là cách để làm điều đó. Tôi đã viết phương pháp này và luôn sử dụng nó để làm mờ dần trong hình ảnh của tôi. Tôi đối phó với CALayerđiều này. Bạn cần nhập Core Animation cho việc này.

+ (void)fadeInLayer:(CALayer *)l
{
    CABasicAnimation *fadeInAnimate   = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeInAnimate.duration            = 0.5;
    fadeInAnimate.repeatCount         = 1;
    fadeInAnimate.autoreverses        = NO;
    fadeInAnimate.fromValue           = [NSNumber numberWithFloat:0.0];
    fadeInAnimate.toValue             = [NSNumber numberWithFloat:1.0];
    fadeInAnimate.removedOnCompletion = YES;
    [l addAnimation:fadeInAnimate forKey:@"animateOpacity"];
    return;
}

Bạn có thể làm ngược lại cho Fade ra một hình ảnh. Sau khi nó biến mất. Bạn chỉ cần loại bỏ nó khỏi giám sát (đó là UIImageView). [imageView removeFromSuperview].

Bạn cũng có thể đóng gói tính năng mờ dần trong một lớp con, để sau đó bạn có thể sử dụng nó như một UIImageView thông thường, như trong ví dụ sau:

IMMFadeImageView *fiv=[[IMMFadeImageView alloc] initWithFrame:CGRectMake(10, 10, 50, 50)];
[self.view addSubview:fiv];
fiv.image=[UIImage imageNamed:@"initialImage.png"];
fiv.image=[UIImage imageNamed:@"fadeinImage.png"];  // fades in

Một triển khai có thể sau đây.

Lưu ý: cách bạn thực sự thực hiện setImage:chức năng mờ dần trong chức năng có thể thay đổi và có thể là một trong những ví dụ tuyệt vời khác được mô tả trong các câu trả lời khác cho câu hỏi này - tạo ra một cách nhanh chóng UIImageViewnhư tôi đang làm ở đây là một chi phí không thể chấp nhận được trong tình huống cụ thể của bạn .

IMMFadeImageView.h :

#import <UIKit/UIKit.h>

@interface IMMFadeImageView : UIImageView
@property (nonatomic,assign) float fadeDuration;
@end

IMMFadeImageView.m :

#import "IMMFadeImageView.h"

@implementation IMMFadeImageView
@synthesize fadeDuration;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.fadeDuration=1;
    }
    return self;
}
-(void)setImage:(UIImage *)newImage{

    if(!self.image||self.fadeDuration<=0){
        super.image=newImage;
    } else {
        UIImageView *iv=[[UIImageView alloc] initWithFrame:self.bounds];
        iv.contentMode=self.contentMode;
        iv.image=super.image;
        iv.alpha=1;
        [self addSubview:iv];
        super.image=newImage;
        [UIView animateWithDuration:self.fadeDuration delay:0 options:UIViewAnimationCurveEaseInOut animations:^{
            iv.alpha=0;
        } completion:^(BOOL finished) {
            [iv removeFromSuperview];
        }];
    }
}

Đoạn mã trên dựa trên một vài giả định (bao gồm cả ARC được kích hoạt trong dự án XCode của bạn), chỉ nhằm mục đích làm bằng chứng về khái niệm, và vì lợi ích của sự rõ ràng và tập trung, nó vẫn có liên quan bằng cách bỏ qua mã không liên quan quan trọng. Xin đừng chỉ sao chép-dán nó một cách mù quáng.

Tôi cần sự chuyển đổi để lặp lại vô thời hạn. Phải mất rất nhiều thử nghiệm và lỗi cho cái này nhưng cuối cùng tôi đã nhận được kết quả cuối cùng mà tôi đang tìm kiếm. Đây là những đoạn mã để thêm hình ảnh động vào UIImageView trong UITableViewCell.

Đây là mã có liên quan:

@interface SomeViewController ()
@property(nonatomic, strong) NSMutableArray *imagesArray;
@property(nonatomic, assign) NSInteger varietyImageAnimationIndex;
@property(nonatomic, assign) BOOL varietyImagesAnimated;
@end

@implementation SomeViewController
@synthesize imagesArray;
@synthesize varietyImageAnimationIndex;
@synthesize varietyImagesAnimated;
...

// NOTE: Initialize the array of images in perhaps viewDidLoad method.

-(void)animateImages
{
    varietyImageAnimationIndex++;

    [UIView transitionWithView:varietyImageView
                      duration:2.0f
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        varietyImageView.image = [imagesArray objectAtIndex:varietyImageAnimationIndex % [imagesArray count]];
                    } completion:^(BOOL finished) {
                        [self animateImages];
                    }];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
   ...
        [cell.imageView setImage:[imagesArray objectAtIndex:0]];


        [self setVarietyImageView:cell.imageView];

        if (! varietyImagesAnimated)
        {
            varietyImagesAnimated = YES;
            [self animateImages];
        }

    ...
    return cell;
}

Sau khi chơi xung quanh UIView.transition()và gặp sự cố với .transitionCrossDissolvetùy chọn (Tôi đã cố gắng làm động các hình ảnh thay đổi bên trong một UIImageView và quá trình chuyển đổi xảy ra ngay lập tức mà không có hoạt hình) Tôi phát hiện ra rằng bạn chỉ cần thêm một tùy chọn cho phép bạn tạo các thuộc tính thay đổi bên trong chế độ xem ( Swift 4.2 ):

UIView.transition(with: self.imageView,
                   duration: 1,
                   options: [.allowAnimatedContent, .transitionCrossDissolve],
                   animations: { self.imageView.image = newImage },
                   completion: nil)

Ngoài ra: nếu bạn có bất kỳ cuộc phỏng vấn nào trên imageView của mình, nó cũng sẽ được vẽ lại và nó có thể ngăn hoạt ảnh. Ví dụ, tôi đã có chế độ xem phụ với độ mờ trên imageView của mình và trong trường hợp đó hoạt hình không hoạt động. Vì vậy, tôi chỉ thay đổi hệ thống phân cấp chế độ xem của mình và di chuyển mờ sang chế độ xem của chính nó và đặt nó trên imageView.

Đây là cách tôi làm ngắn nhất. Tạo một hình ảnh động UIView và cam kết nó trên imageView của bạn.

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[myImageView setAlpha:0.0];
[UIView commitAnimations];

Bằng cách sử dụng highlightedImagetài sản này có thể được thực hiện đơn giản hơn một chút. Đây là một ví dụ trong Swift 3. Đầu tiên, đặt cả hình ảnh bình thường và hình ảnh được tô sáng:

let imageView = UIImageView(image: UIImage(named: "image"), highlightedImage: UIImage(named: "highlightedImage"))

Và khi bạn muốn thay đổi giữa những hoạt hình đó:

UIView.transition(with: imageView, duration: 0.3, options: .transitionCrossDissolve, animations: { self.imageView.isHighlighted = !self.imageView.isHighlighted}, completion: .none)