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()


                })
        }
    }
}

但我不认为看起来很好，而且我必须在我的故事板中创建大量的云图像并更改他们的自定义类。有什么更好的方法呢？我不在Sprite Kit中制作这个应用程序。

Answer 1

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

所以你说你的故事板上有多个云图像，这意味着所有这些云图像都会出现在屏幕的不同位置（原点），这意味着当它们从左到右行进时，对于每个云图像，从屏幕的原点到最右端行进所需的持续时间是不同的。

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

因此，lotta理论让我们看到一个代码片段，它可以实现所需的动画效果。

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（）方法为云图像设置动画。

如何用图像创建侧卷轴效果？

1 个答案: