[ios] UIImageView에서 이미지 변경을 애니메이션으로 만드는 방법은 무엇입니까?

나는이 UIImageView이미지와 함께. 이제 완전히 새로운 이미지 (그래픽 파일)가 있으며이 이미지를 표시하고 싶습니다 UIImageView. 방금 설정하면

myImageView.image = newImage;

새로운 이미지가 즉시 보입니다. 애니메이션 할 수 없습니다.

나는 새로운 이미지로 멋지게 사라지기를 원합니다. 나는 UIImageView그 위에 새로운 것을 만들고 애니메이션과 혼합 하는 것보다 더 나은 해결책이 있다고 생각 했습니까?

답변

지원되는 모든 뷰 전환이 UIViewAnimationTransition열거에 정의 된 것처럼 페이드 효과로 UIView에 애니메이션을 적용 할 수 있는지 확실하지 않습니다 . 페이딩 효과는 CoreAnimation을 사용하여 얻을 수 있습니다. 이 방법의 샘플 예 :

#import <QuartzCore/QuartzCore.h>
...
imageView.image = [UIImage imageNamed:(i % 2) ? @"3.jpg" : @"4.jpg"];

CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;

[imageView.layer addAnimation:transition forKey:nil];

답변

[UIView transitionWithView:textFieldimageView
                  duration:0.2f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    imageView.image = newImage;
                } completion:nil];

또 다른 가능성이다

답변

Michael Scott의 말에 따르면, 간단하게 바보로 유지하십시오. Swift 3 및 Swift 4 에서이를 수행하는 간단한 방법은 다음과 같습니다 .

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

답변

다음은 Swift 에서 새 이미지를 먼저 교차 용해하고 탄력성 애니메이션을 추가하는 예입니다.

var selected: Bool {
  willSet(selected) {
    let expandTransform:CGAffineTransform = CGAffineTransformMakeScale(1.15, 1.15);
    if (!self.selected && selected) {
      UIView.transitionWithView(self.imageView,
        duration:0.1,
        options: UIViewAnimationOptions.TransitionCrossDissolve,
        animations: {
          self.imageView.image = SNStockCellSelectionAccessoryViewImage(selected)
          self.imageView.transform = expandTransform
        },
        completion: {(finished: Bool) in
          UIView.animateWithDuration(0.4,
            delay:0.0,
            usingSpringWithDamping:0.40,
            initialSpringVelocity:0.2,
            options:UIViewAnimationOptions.CurveEaseOut,
            animations: {
              self.imageView.transform = CGAffineTransformInvert(expandTransform)
            }, completion:nil)
      })
    }
  }
}

var imageView:UIImageView

imageView뷰에 하위 뷰로 올바르게 추가 된 경우 이미지 사이 selected = false를 전환 selected = true하여 탄력 애니메이션으로 전환 해야합니다. SNStockCellSelectionAccessoryViewImage현재 선택 상태에 따라 다른 이미지 만 반환합니다 (아래 참조).

private let SNStockCellSelectionAccessoryViewPlusIconSelected:UIImage = UIImage(named:"PlusIconSelected")!
private let SNStockCellSelectionAccessoryViewPlusIcon:UIImage = UIImage(named:"PlusIcon")!

private func SNStockCellSelectionAccessoryViewImage(selected:Bool) -> UIImage {
  return selected ? SNStockCellSelectionAccessoryViewPlusIconSelected : SNStockCellSelectionAccessoryViewPlusIcon
}

아래의 GIF 예제는 약간 느려졌으며 실제 애니메이션은 더 빨리 발생합니다.

UIImageView 바운스 애니메이션 Gif

답변

암호:

var fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

fadeAnim.fromValue = firstImage;
fadeAnim.toValue   = secondImage;
fadeAnim.duration  = 0.8;         //smoothest value

imageView.layer.addAnimation(fadeAnim, forKey: "contents");

imageView.image = secondImage;

예:

더 재미 있고 더 장황한 솔루션 : ( 탭 전환 )

    let fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

    switch imageView.image {
        case firstImage?:
            fadeAnim.fromValue = firstImage;
            fadeAnim.toValue   = secondImage;
            imageView.image    = secondImage;
        default:
            fadeAnim.fromValue = secondImage;
            fadeAnim.toValue   = firstImage;
            imageView.image    = firstImage;
    }

    fadeAnim.duration = 0.8;

    imageView.layer.addAnimation(fadeAnim, forKey: "contents");

답변

이 시도:

_imageView.image = image;
[_imageView.layer addAnimation:[CATransition animation] forKey:kCATransition];

답변

스위프트 3

extension UIImageView{
 var imageWithFade:UIImage?{
        get{
            return self.image
        }
        set{
            UIView.transition(with: self,
                              duration: 0.5, options: .transitionCrossDissolve, animations: {
                                self.image = newValue
            }, completion: nil)
        }
    }
}

용법:

myImageView.imageWithFade = myImage