如何跟踪缩放的 UIScrollView？

Question

我有一个缩放 UIScrollView 和一个非缩放覆盖视图，我在上面设置动画标记。这些标记需要跟踪 UIScrollView 的某些内容的位置（类似于在您平移和缩放时放置的图钉需要跟踪地图上某个点的方式）。

我通过触发覆盖视图的更新来响应 UIScrollView 的layoutSubviews。这很有效，并且覆盖在缩放和平移时完美地跟踪。

但是当捏合手势结束时，UIScrollView 会自动执行最终动画，并且覆盖视图在此动画期间不同步。

我做了一个简化的项目来隔离这个问题。 UIScrollView 包含一个橙色方块，覆盖视图在这个橙色方块的边框周围显示一个 2 像素的红色轮廓。正如您在下面看到的，红色轮廓总是移动到它应该在的位置，除了在触摸结束后的一小段时间，它明显地向前跳到橙色方块的最终位置。

此测试的完整 Xcode 项目可在此处获得：https://github.com/Clafou/ScrollviewZoomTrackTest 但所有代码都在下面显示的两个文件中：

TrackedScrollView.swift：

class TrackedScrollView: UIScrollView {

    @IBOutlet var overlaysView: UIView?

    let square: UIView

    required init(coder aDecoder: NSCoder) {
        square = UIView(frame: CGRect(x: 50, y: 300, width: 300, height: 300))
        square.backgroundColor = UIColor.orangeColor()

        super.init(coder: aDecoder)

        self.addSubview(square)
        self.maximumZoomScale = 1
        self.minimumZoomScale = 0.5
        self.contentSize = CGSize(width: 500, height: 900)
        self.delegate = self
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        overlaysView?.setNeedsLayout()
    }
}

extension TrackedScrollView: UIScrollViewDelegate {
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return square
    }
}

OverlaysView.swift：

class OverlaysView: UIView {

    @IBOutlet var trackedScrollView: TrackedScrollView?

    let outline: CALayer

    required init(coder aDecoder: NSCoder) {
        outline = CALayer()
        outline.borderColor = UIColor.redColor().CGColor
        outline.borderWidth = 2
        super.init(coder: aDecoder)
        self.layer.addSublayer(outline)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        if let trackedScrollView = self.trackedScrollView {
            CATransaction.begin()
            CATransaction.setDisableActions(true)
            let frame = trackedScrollView.convertRect(trackedScrollView.square.frame, toView: self)
            outline.frame = CGRectIntegral(CGRectInset(frame, -3, -3))
            CATransaction.commit()
        }
    }
}

我尝试过的方法之一是使用CADisplayLink 和presentationLayer，这让我可以为叠加层设置动画，但是我从presentationLayer 获得的坐标稍微落后于实际的UIScrollView，所以这仍然没有向右看。我认为正确的方法是将我的覆盖更新与系统创建的 UIScrollView 动画联系起来，但到目前为止我还没有成功破解它。

如何更新此代码以始终跟踪 UIScrollView 的缩放内容？

Answer 1

UIScrollView 将scrollViewDidZoom: 发送到其动画块中的代理，如果它在捏合结束时“弹回”到其最小或最大缩放。如果zoomBouncing 为真，则更新scrollViewDidZoom: 中的叠加层框架。如果您使用自动布局，请致电 layoutIfNeeded。

scrollViewDidZoom: 仅在缩放弹跳动画期间调用一次，但调整帧或调用 layoutIfNeeded 将确保这些更改与缩放弹跳一起动画，从而使它们完美同步。

演示：

固定示例项目：https://github.com/mayoff/ScrollviewZoomTrackTest