UIImageView에서 이미지 변경을 애니메이션으로 만드는 방법
나는 가지고 있다.UIImageView
이미지 첨부.이제 완전히 새로운 이미지(그래픽 파일)가 생성되었으며, 이 파일에 해당 이미지(그래픽 파일)를 표시하고자 합니다.UIImageView
만약 내가 세팅만 한다면
myImageView.image = newImage;
새 영상이 즉시 표시됩니다.애니메이션 불가.
새로운 이미지로 멋지게 사라졌으면 좋겠어요.그냥 새로운 걸 만드는 것보다 더 좋은 해결책이 있을 것 같아서UIImageView
그 위에 애니메이션과 어우러진다면요?
[UIView transitionWithView:textFieldimageView
duration:0.2f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
imageView.image = newImage;
} completion:nil];
다른 가능성이다
지원되는 뷰 전환은 모두 에 정의되어 있는 것 같기 때문에 페이드 효과로 UIView를 애니메이션화할 수 있는지 잘 모르겠습니다.UIViewAnimationTransition
열거.페이딩 효과는 Core Animation을 사용하여 얻을 수 있습니다.이 접근방식의 예시:
#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];
마이클 스콧의 말을 빌리자면, 단순하게 멍청하게 굴어라.다음은 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 예는 약간 느립니다.실제 애니메이션은 더 빨리 실행됩니다.
Swift 5 확장:
extension UIImageView{
func setImage(_ image: UIImage?, animated: Bool = true) {
let duration = animated ? 0.3 : 0.0
UIView.transition(with: self, duration: duration, options: .transitionCrossDissolve, animations: {
self.image = image
}, completion: nil)
}
}
코드:
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];
Swift 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
이거 먹어보는 게 어때?
NSArray *animationFrames = [NSArray arrayWithObjects:
[UIImage imageWithName:@"image1.png"],
[UIImage imageWithName:@"image2.png"],
nil];
UIImageView *animatedImageView = [[UIImageView alloc] init];
animatedImageView.animationImages = animationsFrame;
[animatedImageView setAnimationRepeatCount:1];
[animatedImageView startAnimating];
빠른 버전:
let animationsFrames = [UIImage(named: "image1.png"), UIImage(named: "image2.png")]
let animatedImageView = UIImageView()
animatedImageView.animationImages = animationsFrames
animatedImageView.animationRepeatCount = 1
animatedImageView.startAnimating()
Swift 4 정말 멋지다
self.imgViewPreview.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseOut, animations: {
self.imgViewPreview.image = newImage
self.imgViewPreview.transform = .identity
}, completion: nil)
CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"contents"];
fadeAnim.fromValue = (__bridge id)imageView.image.CGImage;
fadeAnim.toValue = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;
fadeAnim.duration = 2.0;
[imageView.layer addAnimation:fadeAnim forKey:@"contents"];
imageView.layer.contents = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;
여기에는 몇 가지 다른 접근법이 있습니다.내 기억으로는 당신의 도전처럼 들리는 UIAnimations입니다.
편집: 너무 게을러요:)
투고에서 저는 이 방법을 언급하고 있었습니다.
[newView setFrame:CGRectMake( 0.0f, 480.0f, 320.0f, 480.0f)]; //notice this is OFF screen!
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 480.0f)]; //notice this is ON screen!
[UIView commitAnimations];
그러나 프레임에 애니메이션을 적용하는 대신 알파에 애니메이션을 적용합니다.
[newView setAlpha:0.0]; // set it to zero so it is all gone.
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setAlpha:0.5]; //this will change the newView alpha from its previous zero value to 0.5f
[UIView commitAnimations];
iOS 5에서는 이것이 훨씬 더 쉽습니다.
[newView setAlpha:0.0];
[UIView animateWithDuration:0.4 animations:^{
[newView setAlpha:0.5];
}];
블라디미르 대답은 완벽하지만 나처럼 신속한 해결책을 찾는 사람은
이 솔루션은 신속한 버전 4.2에서 작동합니다.
var i = 0
func animation(){
let name = (i % 2 == 0) ? "1.png" : "2.png"
myImageView.image = UIImage.init(named: name)
let transition: CATransition = CATransition.init()
transition.duration = 1.0
transition.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
transition.type = .fade
myImageView.layer.add(transition, forKey: nil)
i += 1
}
이 메서드는 어디서나 호출할 수 있습니다.애니메이션을 사용하여 이미지를 다음 이미지로 변경합니다.
Swift 버전 4.0의 경우 Bellow 솔루션 사용
var i = 0
func animationVersion4(){
let name = (i % 2 == 0) ? "1.png" : "2.png"
uiImage.image = UIImage.init(named: name)
let transition: CATransition = CATransition.init()
transition.duration = 1.0
transition.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionFade
uiImage.layer.add(transition, forKey: nil)
i += 1
}
Swift 5:
collectionView를 취급하는 경우.애니메이션으로 한 항목 또는 여러 항목을 다시 로드합니다.셀 이미지를 변경할 때 다른 애니메이션 옵션을 시도하지만 차이가 없기 때문에 애니메이션 이름은 여기에 표시하지 않습니다.
UIView.animate(withDuration: 1.0) { [weak self] in
guard let self = self else { return print("gotchya!") }
self.collectionView.reloadItems(at: [indexPath])
}
언급URL : https://stackoverflow.com/questions/2834573/how-to-animate-the-change-of-image-in-an-uiimageview
'programing' 카테고리의 다른 글
XLRD/Python: Excel 파일을 dict로 읽고 for-loops를 사용합니다. (0) | 2023.04.14 |
---|---|
윈도우즈에서 cron 작업 설정 (0) | 2023.04.14 |
Git: 리모트 오리진 마스터에서 단일 파일을 업데이트/체크아웃하는 방법 (0) | 2023.04.14 |
WPF: Items Control의 색상을 번갈아 사용하시겠습니까? (0) | 2023.04.14 |
범위 내에서 부분 텍스트 찾기, 인덱스 반환 (0) | 2023.04.14 |