UIImageView 이미지 변경 시 페이드/해체

UIImageView 이미지 변경 시 페이드/해체

의 「」를 하는 것이 , 「」를 작성한다.UIImageViews 간단하게 하는 할 것 같아요.image한 가지 견해에.그렇게 하면 인스턴트 스위치가 아니라 두 이미지 간에 페이드/크로스 해소가 가능한가요?

베이스의 「Block-based」를 하면, 하게 할 수 있습니다.UIKit animation★★★★★★★★★★★★★★★★★★.

뷰 컨트롤러에 다음 코드가 있고 교차 분해할 UIImageView가 셀프 서브뷰라고 가정합니다.속성을 통해 주소 지정 가능한 보기self.imageView필요한 것은 다음과 같습니다.

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)

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)

편집: 아래 @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;

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

Swift 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

, 당신이 하는 입니다.저는 이 방법을 썼고 항상 이 방법을 사용하여 제 이미지를 페이드합니다.는 나나 with를 상대하고 있다CALayer 을 Import해야 이를 위해서는 핵심 애니메이션을 가져와야 합니다.

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

이미지 페이드아웃의 경우는 반대로 할 수 있습니다.사라지면.슈퍼뷰에서 삭제하기만 하면 됩니다(즉,UIImageView[imageView removeFromSuperview].

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

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

가능한 실장은 다음과 같습니다.

주의: 함수에 페이드인을 실제로 구현하는 방법은 변경될 수 있습니다.또, 이 질문에 대한 다른 답변에 기재되어 있는 다른 훌륭한 예도 있습니다.여기서 하고 있는 것과 같이, 추가의 온 더 플라이를 작성하는 것은, 특정의 상황에서는 받아들일 수 없는 오버헤드가 될 가능성이 있습니다.

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

상기 코드는 몇 가지 전제 조건(XCode 프로젝트에서 ARC가 유효하게 되어 있는 것을 포함한다)에 근거하고 있습니다.개념 증명만을 목적으로 하고 있으며, 명확성과 초점을 위해 중요한 관련성이 없는 코드를 생략함으로써 관련성을 유지합니다.무작정 복사 붙여넣기 하지 마세요.

무한정 반복할 필요가 있었다.이번 건은 많은 시행착오를 거쳤지만 마침내 제가 찾던 최종 결과를 얻었습니다.UITableViewCell의 UIImageView에 이미지 애니메이션을 추가하기 위한 코드 조각입니다.

다음은 관련 코드입니다.

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

가지고 놀다가UIView.transition()문제가 생깁니다..transitionCrossDissolve옵션(한 개의 USIMageView 내에서 이미지 변경을 애니메이션화하려고 했는데 애니메이션 없이 바로 전환이 발생함)을 하나 더 추가하면 뷰 내에서 속성을 애니메이션화할 수 있다는 것을 알게 되었습니다(Swift 4.2).

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

또한 imageView에 서브뷰가 있는 경우 해당 서브뷰도 다시 그려지며 애니메이션이 생성되지 않을 수 있습니다.예를 들어, 이미지 뷰가 흐릿한 서브 뷰가 있는데 애니메이션이 작동하지 않습니다.뷰 계층을 변경하여 뷰로 이동하여 imageView 위에 표시했습니다.

이것이 가장 빠른 방법이라고 생각합니다.UIView 애니메이션을 생성하여 imageView에 커밋합니다.

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

를 사용하여highlightedImage좀 더 심플하게 만들 수 있습니다.다음은 Swift 3의 예입니다.먼저 일반 이미지와 강조 표시된 이미지를 모두 설정합니다.

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

애니메이션으로 전환하고 싶은 경우:

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

사용하시는 경우SDWebImage운이 좋으시네요SD Web Image ver 4.3.0 이후에는fade&fade(duration:)방법들.델 텔레폰

imageView.sd_imageTransition = .fade  //.fade(duration: 0.7)
let url = URL(string: "https://foo/bar.jpg")
imageView.sd_setImage(with: url)

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