Как оживить изменение изображения в UIImageView?
У меня есть UIImageView
с изображением. Теперь у меня есть совершенно новое изображение (графический файл), и я хочу отобразить его в этом UIImageView
. Если бы я просто установить
myImageView.image = newImage;
новое изображение видно сразу. Не оживляемый.
Я хочу, чтобы это красиво исчезло в новом образе. Я подумал, может быть, есть лучшее решение, чем просто создать новый UIImageView
поверх этого и UIImageView
с анимацией?
Ответы
Ответ 1
Я не уверен, что вы можете анимировать UIViews с эффектом затухания, поскольку, кажется, все поддерживаемые переходы просмотра определены в перечислении UIViewAnimationTransition
. Эффект затухания может быть достигнут с помощью 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];
Ответ 2
[UIView transitionWithView:textFieldimageView
duration:0.2f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
imageView.image = newImage;
} completion:nil];
- еще одна возможность
Ответ 3
По словам Майкла Скотта, держите его простым глупо. Вот простой способ сделать это в Swift 3 и Swift 4:
UIView.transition(with: imageView,
duration: 0.75,
options: .transitionCrossDissolve,
animations: { self.imageView.image = toImage },
completion: nil)
Ответ 4
Вот один пример в 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 bounce animation Gif]()
Ответ 5
Код:
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;
Пример:
![Пример UIImageView из кода]()
Веселье, более подробное решение: (Переключение по крану)
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");
Ответ 6
Попробуйте следующее:
_imageView.image = image;
[_imageView.layer addAnimation:[CATransition animation] forKey:kCATransition];
Ответ 7
С 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
Ответ 8
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;
Ответ 9
Почему бы не попробовать это.
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()
Ответ 10
Здесь есть несколько разных подходов: 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];
Ответ 11
Как и в iOS 5, это намного проще:
[newView setAlpha:0.0];
[UIView animateWithDuration:0.4 animations:^{
[newView setAlpha:0.5];
}];
Ответ 12
Владимир ответ идеально, но любой, как я, ищет быстрое решение
Это решение работает для быстрой версии 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 Используйте решение ниже
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
}
Ответ 13
swift4.0
func backgroundImageChange(isDay:Bool){
if isDay == false{
UIView.transition(with: mBackgroundImg,duration: 0.9, options: .transitionCrossDissolve, animations: {
self.mBackgroundImg.image = yourImage1
}, completion: nil)
}else{
UIView.transition(with: mBackgroundImg,duration: 0.75, options: .transitionCrossDissolve, animations: {
self.mBackgroundImg.image = yourImage2
}, completion: nil)
}
}
//call
backgroundImageChange(isDay:true)
Ответ 14
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)