[iOSアプリ開発] パターン背景自動スクロールを作ってみた

今回は、パターン画像を敷き詰めた背景が一定のスピードで上へスクロールし続ける、背景自動スクロールをつくります。

今回使うパターン画像はこちら。

やり方としては、パターン背景用の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」を指定して一定の速度で移動させます。

動かしてみるとこんな感じです。

ではでは。