ios - 使用 UIImage 滚动 UIScrollView

Question

我的应用程序中有一个水平的 UIScrollview，它有 1 个非常长的 UIImageView 开始。我有一个计时器和动画来创建 ScrollView 下的图像自动滚动的错觉。图像结束后，我会动态地将相似的图像添加到 ScrollView 中，因此它看起来应该像图像在重复一样。

这就是我希望它们在 ScrollView 下的显示方式:image1|image2|image3|image4......这些图像将从右向左滚动。在您登录之前，它在 Behance 的 iphone 应用程序中的确切工作方式。

这是我的代码(在 Storyboard 中我有 ScrollView 和一个 UIIMageview 已经添加)。

override func viewDidAppear(_ animated: Bool) {

        Timer.scheduledTimer(timeInterval: 0.6, target: self, selector: #selector(scrollImage), userInfo: nil, repeats: true)
    }

    @objc func scrollImage() {
        offSet.x = offSet.x + CGFloat(20)
        UIView.animate(withDuration: 1.0, animations: {
            self.behanceView.setContentOffset(self.offSet, animated: false)
        })
    }

     func addImagetoScrollView() {
        let imageView = UIImageView(image:UIImage(named:"Landing_Scrollable"))
        print(imageCount*Int(self.behanceView.contentSize.width)+100)
        imageView.frame = CGRect(x:imageCount*Int(self.behanceView.contentSize.width), y: 0, width: 875, height: 502)
        self.behanceView.contentSize = CGSize(width: imageView.bounds.size.width * CGFloat(imageCount), height: imageView.bounds.size.height)
        self.behanceView.addSubview(imageView)
        imageCount+=1
    }

    extension ViewController: UIScrollViewDelegate {
        func scrollViewDidScroll(_ scrollView: UIScrollView) {

            let scrollViewWidth = scrollView.frame.size.width;
            let scrollOffset = scrollView.contentOffset.x;
            print(imageCount*Int(self.behanceView.contentSize.width - scrollViewWidth))
            if scrollOffset >= CGFloat(imageCount*Int(self.behanceView.contentSize.width - scrollViewWidth)) {
                self.addImagetoScrollView()
            }
        }
    }

但是当我看到它在运行时，它做了一些奇怪的事情并且动画全部关闭。

有人可以帮忙吗

谢谢，

Answer 1

我从未见过“Behance”应用程序，但我猜你是在问如何无限期地在屏幕上设置无缝平铺背景图像的动画，如下所示:

( Pattern image by Evan Eckard. )

我在演示中使用了 1 秒的动画持续时间，但您可能希望在真实应用中使用更长的持续时间。

你不应该为此使用计时器。 Core Animation 可以为您执行动画，让它执行动画更流畅、更高效。 (你可能认为核心动画正在执行你的动画，因为你正在使用 UIView 动画，但我相信动画 ScrollView 的 contentOffset 确实不使用核心动画，因为 ScrollView 必须在每个动画步骤上调用其委托(delegate)的 scrollViewDidScroll。)

您也不应该为此使用 ScrollView 。 UIScrollView 的存在是为了允许用户滚动。由于您不允许用户滚动，因此不应使用 UIScrollView。

这里是你应该如何设置你的背景:

1. 创建两个相同的 ImageView (编号为 0 和 1)，显示相同的图像。确保每个 ImageView 都足够大以填满屏幕。

2. 将 ImageView 0 的左边缘放在 Root View 的左边缘。将 ImageView 1 的左边缘放在 ImageView 0 的右边缘。由于每个 ImageView 都足够大以填满屏幕，因此 ImageView 1 将完全从屏幕的右边缘开始。

   <

3. 动画 ImageView 0 的 transform.translation.x 从 0 到 -imageView.bounds.size.width。这将使它向左滑动恰好是它自己的宽度，所以当动画结束时， ImageView 0 的右边缘位于屏幕的左边缘(因此 ImageView 0 完全不在屏幕的左边缘) ).将动画的 repeatCount 设置为 .infinity。

4. 将相同的动画添加到 ImageView 1。因此 ImageView 1 在 ImageView 0 离开时出现在屏幕上，正好覆盖 ImageView 0 的动画显示的像素。

两个动画同时结束。当它们结束时， ImageView 1 恰好位于 ImageView 0 开始时的位置。由于两个动画都设置为无限重复，因此它们都立即重新开始。当 image view 0 的动画重新开始时，image view 0 立即跳回到它的起始位置，也就是 image view 1 结束的位置。由于两个 ImageView 显示相同的图像，因此屏幕上的像素不会改变。这使得动画循环无缝。

这是我的代码:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        for imageView in imageViews {
            imageView.image = patternImage
            imageView.contentMode = .scaleToFill
            view.addSubview(imageView)
        }
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let bounds = view.bounds

        let patternSize = patternImage.size
        // Scale the image up if necessary to be at least as big as the screen on both axes.
        // But make sure scale is at least 1 so I don't shrink the image if it's larger than the screen.
        let scale = max(1 as CGFloat, bounds.size.width / patternSize.width, bounds.size.height / patternSize.height)
        let imageFrame = CGRect(x: 0, y: 0, width: scale * patternSize.width, height: scale * patternSize.height)

        for (i, imageView) in imageViews.enumerated() {
            imageView.frame = imageFrame.offsetBy(dx: CGFloat(i) * imageFrame.size.width, dy: 0)

            let animation = CABasicAnimation(keyPath: "transform.translation.x")
            animation.fromValue = 0
            animation.toValue = -imageFrame.size.width
            animation.duration = 1
            animation.repeatCount = .infinity
            animation.timingFunction = CAMediaTimingFunction(name: .linear)

            // The following line prevents iOS from removing the animation when the app goes to the background.
            animation.isRemovedOnCompletion = false

            imageView.layer.add(animation, forKey: animation.keyPath)
        }
    }

    private let imageViews: [UIImageView] = [.init(), .init()]
    private let patternImage = #imageLiteral(resourceName: "pattern")

}