IOS相当于Android的共享元素转换

时间:2016-04-17 22:28:06

标签: ios animation transitions

我想知道IOS是否有类似于Android的共享元素转换的任何类型的过渡动画。对于那些不熟悉它的人来说,它基本上是“重复使用”。从一个屏幕到另一个屏幕的视图。例如,屏幕A上列表中的文本是屏幕B上的标题文本,它将翻译和缩放文本,使其看起来像是在移动到适当的位置。

2 个答案:

答案 0 :(得分:4)

您可以使用自动布局约束来完成相同的技术。

您可以在屏幕A上以小尺寸渲染视图(比如在列表中)。然后,当用户点击此视图以切换到屏幕B时,您可以将视图渲染为屏幕大小。

使用不同的自动布局优先级,您可以根据视图的大小完成不同的布局。

答案 1 :(得分:0)

对于我的情况,我只需要放大图像即可。 以下代码提供了一种快速/简单的方法来放大/缩小不需要使用图库的照片。视图被放大到屏幕的整个宽度。

把它留在这里以防其他人受益。

extension UIView {

    func enlarge() {
        let maxWidth = superview?.bounds.width ?? self.bounds.width + 100

        UIView.animate(withDuration: 0.5, animations: {() -> Void in
            let factor = maxWidth / self.bounds.width
            self.transform = CGAffineTransform(scaleX: factor, y: factor)
        })
    }

    func resetSize() {
        UIView.animate(withDuration: 0.5, animations: {() -> Void in
            self.transform = CGAffineTransform(scaleX: 1, y: 1)
        })
    }
}

通过更多的工作,我们还可以使图像始终在屏幕中央放大,然后缩小到原始位置。

extension UIView {

    func enlarge(_ shouldEnlarge: Bool, _ originalY: CGFloat = -1) {
        if(shouldEnlarge) {
            enlarge()
        }
        else {
            resetSize(originalY)
        }
    }

    //View must be contained in a parent
    func enlarge() {
        guard let parent = superview else { return }

        let maxWidth = parent.bounds.width
        let newY =  parent.bounds.height / 2 -  maxWidth / 2

        UIView.animate(withDuration: 0.5, animations: {() -> Void in
            let factor = maxWidth / self.bounds.width
            self.transform = CGAffineTransform(scaleX: factor, y: factor)
            self.frame.origin.y = newY
        })
    }

    //pass in the original view.frame.origin.y to animate back to the correct position
    func resetSize(_ originalY: CGFloat = -1) {
        UIView.animate(withDuration: 0.5, animations: {() -> Void in
            self.transform = CGAffineTransform(scaleX: 1, y: 1)
            if(originalY != -1) {
                self.frame.origin.y = originalY
            }
        })
    }
}