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()
    }
}

动画UIImageView逐行显示在屏幕上

1 个答案: