この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回は、パターン画像を敷き詰めた背景が一定のスピードで上へスクロールし続ける、背景自動スクロールをつくります。
今回使うパターン画像はこちら。
やり方としては、パターン背景用のUIViewを配置して、1パターンの高さ分スクロールさせるアニメーションを作り、それをリピートさせます。
前準備として、画面に背景スクロール用のUIView(bgAnimationView)を配置しておきます。
そのあと、そのViewControllerで背景自動スクロール処理を書きます。
ViewControllerのソースはこちら。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var bgAnimationView: UIView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
startBackgroundAnimation()
}
private func startBackgroundAnimation() {
let bgImage = UIImage.init(named: "penguin")!
bgAnimationView.backgroundColor = UIColor.init(patternImage: bgImage)
bgAnimationView.frame.size = CGSize(width: view.frame.width,
height: view.frame.height + bgImage.size.height)
let startOrigin = CGPoint.zero
let endOrigin = CGPoint(x: 0, y: -bgImage.size.height)
bgAnimationView.frame.origin = startOrigin
UIView.animate(withDuration: 2.0,
delay: 0.0,
options: [.repeat, .curveLinear],
animations:{ self.bgAnimationView.frame.origin = endOrigin },
completion: nil)
}
}
L13〜14 で、パターン背景をセットしています。
L16〜17 で、パターン背景用のUIViewのサイズをセットしています。画面より少し大きめにセットしていて、パターン画像1つ分大きめの高さにします。
L18〜20 で、パターン背景用のUIViewのスタート位置をセットします。
L22〜26 で、アニメーションを実行します。 「options」に「.curveLinear」を指定して一定の速度で移動させます。
動かしてみるとこんな感じです。
ではでは。