动画UIImageView逐行显示在屏幕上

Question

我想显示带有某些动画的UIImageView，我想我希望它逐行左右移动，出现在屏幕上。有点像打印机会打印图像。我不知道从哪里开始。

我当时想也许用另一个可以使动画变得透明的视图覆盖UIImageView，但是我该如何实现呢？

Answer 1

一个想法是，我们在您的图片上方有一个视图，完全覆盖了它。让我们将此视图称为V。将视图向下移动1点，以便显示图像的一行。然后在图像上方显示另一个视图，再次完全覆盖它。让我们将此视图称为H。然后将该视图向右移动1点。现在，图像的一个“像素”（或更确切地说是1x1的点网格）被曝光。

我们将H动画到右侧。当到达终点时，我们将其放回起点，将V和H向下移动1点，然后重复该过程。

这里有些东西可以帮助您入门。

extension UIView {

    /**
     - Parameter seconds: the time for one line to reveal
     */
    func scanReveal(seconds: Double) {

        let colour = self.superview?.backgroundColor ?? UIColor.black

        let v = UIView(frame: self.bounds)
        v.backgroundColor = colour
        self.addSubview(v)

        let h = UIView(frame: self.bounds)
        h.backgroundColor = colour
        self.addSubview(h)

        v.frame.origin.y += 1

        // Animate h to the end.
        // When it reaches the end, bring it back, move v and h down by 1 and repeat.

        func move() {
            UIView.animate(withDuration: seconds, animations: {
                h.frame.origin.x = h.bounds.height
            }) { _ in
                h.frame.origin.x = 0
                h.frame.origin.y += 1
                v.frame.origin.y += 1

                if v.frame.origin.y > self.bounds.height {
                    return
                }
                move()
            }
        }
        move()
    }
}