逐行显示在屏幕上的动画 UIImageView

Question

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

我在想也许可以用另一个可以使用动画变得透明的视图覆盖 UIImageView，但我怎样才能实现它？

Answer 1

好吧，一个想法是，我们在您的图像之上有一个视图，完全覆盖它。我们称此视图为 V。将该视图向下移动 1 点，这样您的图像的一条线就会暴露出来。然后在你的图像之上有另一个视图，再次完全覆盖它。我们将此视图称为 H。然后将该视图向右移动 1 点。现在您的图像的一个 "pixel"（或者更确切地说，一个 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

Animate UIImageView appearing on screen line by line

core-animation

uiview

uiimageview

ios

swift