我有两个视图控制器。它们都包含图像视图,其内容模式为.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显示了我的意思:
此动画具有具有.scaleToFill
内容模式的图像视图,效果很好,但是,我想以scaleAspectFill
模式实现它。
如果您知道如何使动画平滑,请多多帮助。