循环动画中的图像移动 - Swift

Question

我过去4个月一直在使用Swift编程语言，并且最近2周一直在制作启动屏幕。屏幕中央有一辆汽车，而右至左循环移动的两张图片（城市和地形）作为背景。请查看下面从我的Android应用程序中获取的GIF图像：

我只能将背景从右到左移动一次。我尝试了其他动画选项，但似乎都不起作用。您可以看到这些图像比实际屏幕宽得多，所以不应该有任何问题。请查看我的方法如下：

func animate(_ image: UIImageView) {
UIView.animate(withDuration: 1.0, delay: 0.0, options: [.curveLinear], 
animations: {image.center.x -= 10}, 
completion: {_ in self.animate(image)})}

我的唯一要求是在循环中将图像从右到左移动，没有间隙，就像上面的gif图像一样。

谢谢 :)

- VipiN Negi

---

如果您需要这个 GIF，为什么不使用它呢？只需从 GIF 中获取图像并将其添加到 UIImageView.animationImages 中。然后将 animationDuration 设置为所需值，最后调用 imageView.StartAnimation 即可。它会一直循环，直到您调用 stopAnimation。 - Bjørn Ruthberg

你的想法很好，但这种质量的 GIF 文件将会非常大，而我的应用程序无法负担得起。 - VipiN Negi

那么也许你需要在imageviews上加倍，这样当图像的右边缘到达屏幕的右边缘时，就可以将同一图像（作为另一个实例）附加到第一个图像的末尾。 - Bjørn Ruthberg

Answer 1

所以就像你必须要移动背景，但又想让它看起来像车在移动。针对这种情况，您需要制作3个不同的ImageView：

1. 建筑物背景
2. 树木背景
3. 汽车本身

就像我创建的这个动画一样： 如果您想将图像从左到右或从右到左移动，则需要在ImageView上加倍，以便在图像的右边缘到达屏幕右边缘时将相同的图像（作为另一个实例）附加到第一个图像的末尾。

如下面的图像所示： 并添加以下代码以进行动画处理。

func animateBackground() {

    // Animate background
    // cityImage is the visible image
    // cityImage2 is the hidden image

    UIView.animate(withDuration: 12.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
        self.cityImage.frame = self.cityImage.frame.offsetBy(dx: -1 * self.cityImage.frame.size.width, dy: 0.0)
        self.cityImage2.frame = self.cityImage2.frame.offsetBy(dx: -1 * self.cityImage2.frame.size.width, dy: 0.0)
    }, completion: nil)

}

- Rahim Khalid

Answer 2

看起来你只是将图像向左移动，很快图像就会移出屏幕，你将无法看到它。尝试在每次动画迭代后将图像重置回其原始位置。你可以使用CGAffineTransform来实现：

func animate(_ image: UIImageView) {
    UIView.animate(withDuration: 5, delay: 0, options: .curveLinear, animations: { 
        image.transform = CGAffineTransform(translationX: -100, y: 0)
    }) { (success: Bool) in
        image.transform = CGAffineTransform.identity
        animate(image)
    }
}

希望这能帮到您。

- Chan Jing Hong

---

它没起作用 :( 实际上，一个迭代是：图像的左端在屏幕的左边缘 --> 图像的右端在屏幕的右边缘。重新设置迭代并不能帮助创建完美的循环。 在完成第一次迭代后，“图像的左端应该在屏幕的右边缘”以使其无缺陷地循环。 - VipiN Negi