如何使用Core Animation在iPhone上的2个图像之间交叉淡入淡出

Question

我这样做是为了学习如何使用iPhone上的Core Animation动画属性(不学习如何交叉淡化图像本身).

在SO上阅读类似的问题让我相信它可以通过动画UIImageView 层的.contents属性来完成,如下所示:

UIImage *image1 = [UIImage imageNamed:@"someImage1.png"];
UIImage *image2 = [UIImage imageNamed:@"someImage2.png"];

self.imageView.image = image1;
[self.view addSubview:self.imageView];

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
self.imageView.layer.contents = image2;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

我是否弄错了细节或者这是不可能的.

更新:上面的代码生成一个空白的UIImageView.当我更改此行时:

self.imageView.layer.contents = image2.CGImage;

...我现在可以看到图像,但它不会淡入,只会立即出现.

Answer 1

你快到了.

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

请注意,动画独立于UIImageView的实际值/内容.所以你需要

self.imageView.image = image2;

...设置图像的最终结果.

Answer 2

我在某个地方发现了它 - 效果很好.

迅速

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

Objc

UIImage * toImage = [UIImage imageNamed:@"image.png"];
[UIView transitionWithView:self.view
                  duration:0.33f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    self.imageview.image = toImage;
                } completion:NULL];

Answer 3

extension UIImageView
{
    func mySetImage(image:UIImage)
    {
        guard let currentImage = self.image where currentImage != image else { return }
        let animation = CATransition()
        animation.duration = 0.3
        animation.type = kCATransitionFade
        layer.add(animation, forKey: "ImageFade")
        self.image = image
    }
}