UIImageView의 이미지를 변경할 때 페이드 / 디졸브

UIImageView의 이미지를 변경할 때 페이드 / 디졸브

---

두 개를 만드는 대신 하나의보기 UIImageViews를 변경하는 것이 논리적으로 보입니다 image. 그렇게하면 인스턴트 스위치 대신 두 이미지 사이에 페이드 / 크로스 디졸브가 발생합니까?

---

편집 : 아래 @algal 의 더 나은 솔루션이 있습니다 .

이를 수행하는 또 다른 방법은 사전 정의 된 CAAnimation 전환을 사용하는 것입니다.

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;

Apple의 View Transitions 예제 프로젝트를 참조하십시오 : https://developer.apple.com/library/content/samplecode/ViewTransitions/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007411

---

새로운 블록 기반 UIKit 애니메이션 방법을 사용하면 훨씬 간단해질 수 있습니다.

다음 코드가 뷰 컨트롤러에 있고 교차 디졸브하려는 UIImageView가 self.imageView 속성을 통해 주소를 지정할 수있는 self.view의 하위 뷰라고 가정합니다. 그렇다면 필요한 것은 다음과 같습니다.

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

끝난.

그리고 Swift에서 수행하려면 다음과 같이하십시오.

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

스위프트 3.0

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

---

스위프트 3.0.1 :

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

참조 : https://gist.github.com/licvido/bc22343cacfa3a8ccf88

---

그렇습니다. 당신이 말하는 것은 절대적으로 정확하며 그렇게하는 방법입니다. 나는이 방법을 썼고 항상 이것을 내 이미지에서 페이드로 사용합니다. 나는 이것을 처리 CALayer합니다. 이를 위해 Core Animation을 가져와야합니다.

+ (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;
}

이미지 페이드 아웃에 대해 반대 작업을 수행 할 수 있습니다. 사라진 후. 당신은 그것을 superview (즉 UIImageView) 에서 제거합니다 . [imageView removeFromSuperview].

---

페이드 인 기능을 서브 클래스에 패키지하여 다음 예제와 같이 공통 UIImageView로 사용할 수 있습니다.

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

A possible implementation follows.

Note: the way you actually implement the fade-in in the setImage: function can change, and could be one of the other excellent examples described in the other answers to this question — creating an additional on-the-fly UIImageView as I'm doing here might be an unacceptable overhead in your specific situation.

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

The above code relies on a few assumptions (including ARC being enabled in your XCode project), is only intended as a proof of concept, and in the interest of clarity and focus, it stays relevant by omitting important unrelated code. Please don't just copy-paste it blindly.

---

I needed the transition to repeat indefinitely. It took a LOT of trial and error for this one but I finally got the end-result I was looking for. These are code snippets for adding image animation to a UIImageView in a UITableViewCell.

Here is the relevant code:

@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;
}

---

After playing around with UIView.transition() and getting problems with .transitionCrossDissolve option (I was trying to animate images changing inside one UIImageView and transition occurred instantly without animation) I found out that you just need to add one more option which is letting you animate properties changing inside the view (Swift 4.2):

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

In addition: if your have any subviews on your imageView, it will be redrawn as well and it could prevent animation. For example, I had subview with blur on my imageView and in that case animation doesn't work. So I just changed my view hierarchy and move blur to its own view and put it over imageView.

---

This is I think the shortest way of doing it. Create a UIView animation and commit it on your imageView.

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

---

By using the highlightedImage property this can be made a bit more simple. Here's an example in Swift 3. First set both normal and highlighted image:

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

And when you want to change between those animated:

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

참고URL : https://stackoverflow.com/questions/7638831/fade-dissolve-when-changing-uiimageviews-image