如何在 UIPageViewController 中为循环图像设置动画？

Question

我正在为我的应用构建演练，但遇到了一些奇怪的行为。

有关设置的一些上下文：在我的演练故事板中，我有一个名为 TutorialViewController 的视图控制器，它有一条欢迎消息、一个“教程”按钮和一个“跳过”按钮。 “教程”按钮触发我的WalkthroughViewController 的转场，它有下一个/后退/关闭按钮和一个UIPageIndicator 浮动在UIContainerView 上。嵌入在UIContainerView 中的是我的WalkthroughPageViewController。最后，我有一个 WalkthroughContentViewController 和两个 UIImageViews - contentImageView 和 contentImageViewMask - 用作 WalkthroughPageViewController 的数据源。通过滑动或按下导航按钮，下一个或上一个视图控制器被实例化（尽管它实际上只是重复使用我的WalkthroughContentViewController）。

目标：理想情况下，我希望在演练的每一页中不断循环播放一系列图像字符串。例如，如果第 1 页有一个包含 3 个图像字符串的数组，则 contentImageView 和 contentImageViewMask 将在 imageArray[0] -> imageArray[1] -> imageArray[2] -> imageArray[0] - > imageArray[1] 等

每个页面在其imageArray 中都有不同数量的图像字符串，我还没有弄清楚如何平滑地循环所有这些字符串。到目前为止，我在数组中的前两个图像字符串之间进行动画处理的代码来自this answer，它位于我的WalkthroughContentViewController.swift 文件中：

override func viewDidLoad() {
    super.viewDidLoad()

    contentImageViewMask.alpha = 0
    contentImageView.image = UIImage(named: imageArray[0])

    UIView.animate(withDuration: 1.5, delay: 1.5, options: [UIViewAnimationOptions.autoreverse, UIViewAnimationOptions.repeat], animations: {
        self.contentImageViewMask.image = UIImage(named: self.imageArray[1])
        self.contentImageViewMask.alpha = 1
    }, completion: nil)

}

上述类型的工作原理是，按下教程按钮后，第 1 页立即设置为 imageArray[1]（不正确行为），而第 2 页在 imageArray[0] 和 imageArray[1]（正确行为）之间平滑动画。但是，在第 2 页上滑动多个页面会停用第 2 页上的动画。每隔一段时间，第 1 页将在此时开始正确设置动画，但我似乎无法找到一种可靠的方法来重现这一点。 Here's a video showing the behavior。我在连接 UIPageIndicator 和按钮操作之前拍摄了这个视频，所以忽略它，但奇怪的是第 2 页动画仅通过滑动到页面发生。如果您通过下一步按钮进入第 2 页，则动画不起作用。

可能相关的两件事：1.) 在我的 WalkthroughPageViewController.swift 文件中，我已经为 UIPageViewControllerDataSource、viewControllerBefore 和 viewControllerAfter 实现了两个必需的方法，以及 2.) 在我的 WalkthroughPageViewController.swift 文件中，当滑动动画结束并且下一页完全显示时，我有以下代码来提醒代理：

func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {

    if completed {
        if let contentViewController = pageViewController.viewControllers?.first as? WalkthroughContentViewController {
            currentIndex = contentViewController.index
            walkthroughDelegate?.didUpdatePageIndex(currentIndex: contentViewController.index)
        }
    }

}

任何见解将不胜感激。

Answer 1

在我看来，您正在与框架作斗争。如果您想要一个永久循环的自我替换图像，为什么不使用专门用于此目的的 UIImage 功能，即animatedImage？

Answer 2

对于希望做类似事情但增加了一些过渡灵活性（例如让图像淡入到下一个）的任何人，this answer 帮助我实现了我的动画目标，即以一种不刺耳的方式在图像之间进行过渡。

@IBOutlet weak var contentImageView: UIImageView!

var index = 0
let animationDuration: TimeInterval = 0.5
let switchingInterval: TimeInterval = 2.0

var imageStringArray: [String] = [""]
var images = [UIImage]()

override func viewDidLoad() {
    super.viewDidLoad()

    for string in imageStringArray {
        images.append(UIImage(named: string)!)
    }

    contentImageView.image = images[index]
    animateImageView()

}

func animateImageView() {

    CATransaction.begin()

    CATransaction.setAnimationDuration(animationDuration)
    CATransaction.setCompletionBlock {
        DispatchQueue.main.asyncAfter(deadline: .now() + self.switchingInterval) {
            self.animateImageView()
        }
    }

    let transition = CATransition()
    transition.type = kCATransitionFade

    contentImageView.layer.add(transition, forKey: kCATransition)
    contentImageView.image = images[index]

    CATransaction.commit()
    index = index < images.count - 1 ? index + 1 : 0
}

可能值得注意的是，该问题的原始答案说，“将其实现为自定义图像视图会更好。”

如果您只需要在图像之间设置动画并且过渡无关紧要，那么animatedImage 可能是一个更聪明的解决方案（如上面的 matt 所说）。

    contentImageView.image = UIImage.animatedImage(with: images, duration: 3)