исчезают между двумя изображениями UIButton

Question

Я хочу исчезать между двумя изображениями UIButton с целью настройки избранных в UITableView.

В настоящее время переход осуществляется без эффекта - это просто изменяет изображения непосредственно на клик/контакт:

trans_img = [UIImage imageNamed:@"fav_on.png"]; 

NSArray *subviews = [owningCell subviews]; 
UIButton *favbutton = [subviews objectAtIndex:2]; 

favbutton.imageView.animationImages = 
[NSArray arrayWithObjects:trans_img, 
nil]; 

[favbutton.imageView startAnimating]; 

Все, что я нашел был переход между UIViews :(

Было бы неплохо, если бы image fav_off получает плавное изменение в fav_on и наоборот, как fadein/fadeout.

Answer 1

Вы можете попробовать перевести значения alpha так, чтобы получить эффект, который вы хотите:

trans_img = [UIImage imageNamed:@"fav_on.png"]; 

NSArray *subviews = [owningCell subviews]; 
UIButton *favbutton = [subviews objectAtIndex:2]; 
[UIView animateWithDuration:0.5 animations:^{ 
    favbutton.alpha = 0.0f; 
} completion:^(BOOL finished) { 
    favbutton.imageView.animationImages = [NSArray arrayWithObjects:trans_img,nil]; 
    [favbutton.imageView startAnimating]; 
    [UIView animateWithDuration:0.5 animations:^{ 
     favbutton.alpha = 1.0f; 
    }]; 
}]; 

Answer 2

Кажется, что вы ищите именно это. Он анимирует изображения на UIButton без добавления новых изображений, создания массива или изменения альфа-значений!

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"]; 
crossFade.duration = 0.7; 
crossFade.fromValue = (id)oldImage.CGImage; 
crossFade.toValue = (id)newImage.CGImage; 
crossFade.removedOnCompletion = NO; 
crossFade.fillMode = kCAFillModeForwards; 
[button.imageView.layer addAnimation:crossFade forKey:@"animateContents"]; 

//Make sure to add Image normally after so when the animation 
//is done it is set to the new Image 
[button setImage:newImage forState:UIControlStateNormal]; 

Answer 3

Здесь в стрижа:

import UIKit 

    extension UIButton { 

     func changeImageAnimated(image: UIImage?) { 
      guard let imageView = self.imageView, currentImage = imageView.image, newImage = image else { 
       return 
      } 
      let crossFade: CABasicAnimation = CABasicAnimation(keyPath: "contents") 
      crossFade.duration = 0.3 
      crossFade.fromValue = currentImage.CGImage 
      crossFade.toValue = newImage.CGImage 
      crossFade.removedOnCompletion = false 
      crossFade.fillMode = kCAFillModeForwards 
      imageView.layer.addAnimation(crossFade, forKey: "animateContents") 
     } 
    } 


    self.playAndPauseVideo.changeImageAnimated(UIImage(named: "pauseVideo")) 

Answer 4

Это небольшое улучшение @ ответ Ponja, что в целом работает хорошо. К сожалению, newImage не «прилипает», поэтому, если вы хотите переключиться между двумя изображениями, первое затухание будет работать гладко, но возврат к исходному изображению «привяжется» назад без угасания. Фиксированный его с помощью CATransaction:

import UIKit 

extension UIButton { 
    func changeImageAnimated(image: UIImage?) { 
     guard let imageView = self.imageView, currentImage = imageView.image, newImage = image else { 
      return 
     } 
     CATransaction.begin() 
     CATransaction.setCompletionBlock { 
      self.setImage(newImage, forState: UIControlState.Normal) 
     } 
     let crossFade: CABasicAnimation = CABasicAnimation(keyPath: "contents") 
     crossFade.duration = 0.3 
     crossFade.fromValue = currentImage.CGImage 
     crossFade.toValue = newImage.CGImage 
     crossFade.removedOnCompletion = false 
     crossFade.fillMode = kCAFillModeForwards 
     imageView.layer.addAnimation(crossFade, forKey: "animateContents") 
     CATransaction.commit() 
    } 
} 

Answer 5

@ ответ SuperDuperTango с tintColor добавил:

extension UIButton { 
    func changeImageAnimated(image: UIImage?) { 
     guard let imageView = self.imageView, currentImage = imageView.image, newImage = image else { 
      return 
     } 
     CATransaction.begin() 
     CATransaction.setCompletionBlock { 
      self.setImage(newImage, forState: UIControlState.Normal) 
     } 
     let crossFade: CABasicAnimation = CABasicAnimation(keyPath: "contents") 
     crossFade.duration = 0.3 
     crossFade.fromValue = currentImage.CGImage 
     crossFade.toValue = newImage.CGImage 
     crossFade.removedOnCompletion = false 
     crossFade.fillMode = kCAFillModeForwards 
     imageView.layer.addAnimation(crossFade, forKey: "animateContents") 
     CATransaction.commit() 

     let crossFadeColor: CABasicAnimation = CABasicAnimation(keyPath: "contents") 
     crossFadeColor.duration = 0.3 
     crossFadeColor.fromValue = UIColor.blackColor() 
     crossFadeColor.toValue = UIColor(red: 232.0/255.0, green: 85.0/255.0, blue: 71.0/255.0, alpha: 1.0) 
     crossFadeColor.removedOnCompletion = false 
     crossFadeColor.fillMode = kCAFillModeForwards 
     imageView.layer.addAnimation(crossFadeColor, forKey: "animateContents") 
     CATransaction.commit() 
    } 
} 

Answer 6

Спасибо @jkanter за большой ответ. Я сделал мое расширение Swift 3.0, которое, как я думал, также может быть полезно для всех, кто наткнулся на этот пост.

extension UIButton { 

    func setImage(_ image: UIImage?, for state: UIControlState, animated: Bool) { 
     guard animated, let oldImage = imageView?.image, let newImage = image else { 
      // Revert to default functionality 
      setImage(image, for: state) 
      return 
     } 

     let crossFade = CABasicAnimation(keyPath:"contents") 
     crossFade.duration = 0.35 
     crossFade.fromValue = oldImage.cgImage 
     crossFade.toValue = newImage.cgImage 
     crossFade.isRemovedOnCompletion = false 
     imageView?.layer.add(crossFade, forKey: "animateContents") 

     setImage(image, for: state) 
    } 
} 

Answer 7

jkanter ответ в Swift:

let crossFade = CABasicAnimation.init(keyPath: "contents") 
crossFade.duration = 0.7 
crossFade.fromValue = oldImage.cgImage 
crossFade.toValue = newImage.cgImage 
crossFade.isRemovedOnCompletion = false 
crossFade.fillMode = kCAFillModeForwards 
button.imageView?.layer.add(crossFade, forKey: "animateContents") 

//Make sure to add Image normally after so when the animation 
//is done it is set to the new Image 
button.setImage(newImage, for: .normal)