ios - 如何用图像创建侧滚动条效果？

Question

我想在我的应用程序的背景中添加一些图像(云)，并用它们创建无尽的侧滚动条效果。他们不断从左边弹出并继续向右移动。

我尝试以这种方式实现:

class AnimateClouds: UIImageView {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        animateClouds()
    }


    func animateClouds() {
        UIView.animateWithDuration(0, delay:0, options: [.Repeat], animations: {
            self.center.x = self.center.x

            }) { (completed) -> Void in
                UIView.animateWithDuration(50, delay: 0, options: [.Repeat, .Autoreverse], animations: { () -> Void in

                    // self.center.x = self.center.x - (self.superview?.frame.size.width)! / 3

                    self.center.x = self.center.x + (self.superview?.frame.size.width)! //+ (self.frame.size.width) * 2
                    }, completion: { animationFinished in

                        self.removeFromSuperview()


                })
        }
    }
}

但我认为这看起来不太好，而且，我必须在 Storyboard中创建很多云图像并更改它们的自定义类。更好的方法是什么？我不会在 Sprite Kit 中制作这个应用程序。

Answer 1

好吧，你想无限地从左到右移动云图像。当你想要拥有这样的动画时，编写动画很容易，但让动画看起来流畅且视觉效果出色才是真正重要的事情。

所以你说你的 Storyboard中有多个云图像，这意味着所有这些云图像将出现在屏幕的不同位置(原点)，这意味着当它们从左到右移动时，对于每个云图像，从原点行进到屏幕最右端所需的持续时间是不同的。

因此，不仅云图像动画的代码很重要，动画的持续时间也很重要。因此，您需要仔细计算持续时间，并在该持续时间内为云图像设置动画。

这就是很多理论，让我们看一个实现所需动画效果的代码片段。

func animateCloud(cloud: UIImageView) {
//Assuming the cloud image will take 60 seconds to travel from
//left most point to the right most point of view controller's view
//and determining the speed at cloud travels
let cloudSpeed = 60.0/view.frame.size.width

//Since each cloud images are at different position (origin)
//The distance from each cloud to right end of screen will be different and
//The time taken (duration) by the each cloud to travel to right end of view will be different
let duration = (view.frame.size.width - cloud.frame.size.width) * cloudSpeed

UIView.animateiWithDuration(NSTimeInterval(duration), delay:0.0, options:.CurveLinear, animations: {
    cloud.frame.origin.x = self.view.frame.width
}, completion: {
      cloud.frame.origin.x = -cloud.frame.size.width
      self.animateCloud(cloud) // For endless animation
})
}

这应该可以解决问题。您可以添加任意数量的图像，然后调用 animateCloud() 方法对云图像进行动画处理。