在自定义过渡期间,使用.scaleAspectFill内容模式对图像视图的比例进行动画处理

时间:2018-09-10 18:41:20

标签: ios swift uiimageview

我有两个视图控制器。它们都包含图像视图,其内容模式为.scaleAspectFill

我将自定义过渡动画用于从第一个视图控制器到第二个视图控制器的模式选择。在动画过程中,我在第一个视图控制器的第一个图像顶部添加了另一个图像视图,并将其放大直到覆盖整个屏幕。第二个视图控制器包含一个覆盖整个屏幕的图像视图,因此在过渡结束时,我删除了一个临时视图。

这是动画师中过渡的代码(originFrame是第一个视图控制器中图像视图的框架):

 func handleImageViewAnimations(completion: @escaping (()->Void)) {
    guard let containerView = containerView, let toView = toView else {
        return
    }

    let imageView = UIImageView.init(frame: originFrame)
    imageView.image = image
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true



    containerView.addSubview(imageView)
    containerView.insertSubview(toView, aboveSubview: imageView)
    toView.alpha = 0.0

    containerView.bringSubview(toFront: imageView)



    let xFactor = toView.frame.width / originFrame.width
    let yFactor = toView.frame.height / originFrame.height


    CATransaction.begin()
    CATransaction.setAnimationDuration(animationDuration)
    CATransaction.setCompletionBlock(completion)

    UIView.animate(withDuration: animationDuration, animations: {
        imageView.transform = CGAffineTransform(scaleX:xFactor, y:  yFactor)
        imageView.center = toView.center
    }) { (_) in
        imageView.setNeedsDisplay()
        imageView.removeFromSuperview()
        toView.alpha = 1.0
    }

    CATransaction.commit()
}

但是,由于图像视图的内容模式为.scaleAspectFill,因此动画的结尾不流畅。之所以发生这种情况,是因为在该内容模式下,根据图像边界在图像视图中显示的图像有所不同。动画基本上可以拉伸图像视图,但是,它没有考虑基于图像视图的边界大小可以看到图像的不同部分。下面的gif显示了我的意思:

enter image description here

此动画具有具有.scaleToFill内容模式的图像视图,效果很好,但是,我想以scaleAspectFill模式实现它。

如果您知道如何使动画平滑,请多多帮助。

0 个答案:

没有答案