[Swift]波のアニメーションを学ぶ過程を記録してみた

始めに

可愛いスプラッシュ画面を見つけたので真似して作りたい！

作りたい画面

OSSで似たものを見つけた

同じような波のアニメーションを公開している方がいらっしゃったので、このコードから学ばせていただきます！🙇

実際に書いてみる

コードを書いていく上で、わからない部分があれば調べてメモする！

全体像はOSSを見てください！
数学に長けているわけではないので、解釈が間違っている場合はコメントにて教えていただけると、嬉しいです！🙇

完成図

UIBezierPathとは？

private let frontWaveLine: UIBezierPath = UIBezierPath()
private let backWaveLine: UIBezierPath = UIBezierPath()

UIBezierPathについては、下記を参考にすると基本的な動作が理解できた。

CAShapeLayerとは？

private let frontWaveLayer: CAShapeLayer = CAShapeLayer()
private let backWaveSubLayer: CAShapeLayer = CAShapeLayer()

CAShapeLayerについては、下記を参考にするとわかりやすかった。

UIBezierPathとCAShapeLayerの違いは？

違いについて、ChatGPTに聞いてみた！

CAShapeLayerとUIBezierPathはiOS開発において描画やアニメーションを行うために使われるクラスで、それぞれ異なる目的と機能を持っています。

UIBezierPath: これはUIKitの一部で、2次元の図形（線、曲線、円、多角形など）を表現するためのパスを作成します。UIBezierPathオブジェクトはパスを描画したり、パス内部を塗りつぶしたり、パスをクリッピング領域として使用したりします。UIBezierPathのメソッドを使って直線、曲線、長方形、円形、弧などを描くことができます。

CAShapeLayer: これはQuartz Coreの一部で、任意の図形を表現するためのカスタムの描画を提供します。このレイヤーは、描画内容をGPUに直接アクセス可能な形式でキャッシュするため、アニメーションに非常に適しています。また、このレイヤーは自動的にアニメーションを実行します。たとえば、パス自体やパスのストローク色、フィル色、線幅などを変更すると、その変更は自動的にアニメーション化されます。CAShapeLayerは主にパスベースの図形の描画とアニメーションに使用されます。

つまり、UIBezierPathはパスを描画するためのもので、CAShapeLayerはそのパスを描画し、レンダリングし、アニメーション化するためのものと言えます。したがって、これら二つは互いに補完的な役割を果たします。UIBezierPathで作成したパスは、CAShapeLayerのpathプロパティに設定できます。それにより、CAShapeLayerを使用してパスの描画やアニメーションを行うことができます。

maskLayerは何をしている？

    private var maskLayer: CALayer?
    
    //MARK: Possible to mask the WaveAnimationView just by setting an image containing Solid and Alpha Areas.
    // ①
    open var maskImage: UIImage? {
        didSet {
            //mask
            // ②
            maskLayer = CALayer()
            maskLayer?.frame = self.frame
            maskLayer?.contents = maskImage?.cgImage
            // ③
            self.layer.mask = maskLayer
        }
    }

①について

openはモジュール外からもアクセスできて、override、サブクラス化がOK!
モジュールとは、ライブラリなどimportを使って取り込むまとまりのこと！(ex: UIKit, MapKit)
OSSに使われることが多い修飾子とのこと！(参考)

②について

`CALayer`とは、コンテンツやジオメトリ、視覚的属性情報など情報を管理して、`View`とは異なり独自の外観を定義しない。

公式には以下のように記載してあった。

An object that manages image-based content and allows you to perform animations on that content.

詳細について、わかりやすかったサイト！

• 参考

③について

これは、別のCALayerをmaskにセットすると、もともとのCAlayerの図形が「マスク」され部分的に表示されるという機能！この場合であれば、UIImageに設定された形で部分的に表示されるようになる。

以下がわかりやすかった！

• 参考

required init?とは？

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

公式には以下のように記載されていた。

Write the required modifier before the definition of a class initializer to indicate that every subclass of the class must implement that initializer:

You must also write the required modifier before every subclass implementation of a required initializer, to indicate that the initializer requirement applies to further subclasses in the chain. You don’t write the override modifier when overriding a required designated initializer:

requiredがついたメソッドは必ずoverrideする必要があり、修飾子は記述しなくて良い！
以下のサイトがわかりやすかった。

• 参考

convenience init()とは？

convenience initializerは他のイニシャライザに処理を委譲（delegate）することができる。つまりイニシャライザの中で別のイニシャライザを呼ぶことが出来る。
以下は公式に記載されていた例！使い方についてわかりやすい。

class Food {
    var name: String
    init(name: String) {
        self.name = name
    }
    convenience init() {
        self.init(name: "[Unnamed]")
    }
}

class RecipeIngredient: Food {
    var quantity: Int
    init(name: String, quantity: Int) {
        self.quantity = quantity
        super.init(name: name)
    }
    override convenience init(name: String) {
        self.init(name: name, quantity: 1)
    }
}

以下のサイトがわかりやすかった。

• 参考

setNeedDisplay()とは？

    @objc private func waveAnimation() {
        self.setNeedsDisplay()
    }

公式には、以下のように記載されていた。

You can use this method or the setNeedsDisplay(_:) to notify the system that your view’s contents need to be redrawn. This method makes a note of the request and returns immediately. The view is not actually redrawn until the next drawing cycle, at which point all invalidated views are updated.

You should use this method to request that a view be redrawn only when the content or appearance of the view change.

setNeedDisplay()は再描画が必要なときに呼び出すメソッド。UIViewのサブViewには適用されない。再描画を行う処理はdraw()になる。
draw()が呼び出されるタイミングについて記載されているサイトがあるので参考に！

drawSinメソッドについて

このメソッドで波の形を設定している。

    private func drawSin(path: UIBezierPath, time: CGFloat, delay: CGFloat) {
        
        let unit:CGFloat = 100.0
        let zoom:CGFloat = 1.0
        var x = time
        /// ①
        var y = sin(x)/zoom
        /// ②
        let start = CGPoint(x: yAxis, y: unit*y+xAxis)
        /// ③
        path.move(to: start)
        
        var i = yAxis
        /// ④
        while i <= width+10 {
            /// ⑤
            x = time+(-yAxis+i)/unit/zoom
            /// ⑥
            y = sin(x - delay)/self.waveHeight
            /// ⑦
            path.addLine(to: CGPoint(x: i, y: unit*y+xAxis))
            
            i += 10
        }
    }

①について

「𝑦=𝑎sin𝜃」の形のグラフの形。

𝑦=𝑎sin𝜃 のグラフは、基本の𝑦=sin𝜃 のグラフを 𝑦 軸方向に 𝑎 倍に拡大（縮小）したものです。

今回は、zoomに1が設定されているので、y軸の変化はない。
4.1 y=asinθのグラフを参照する。

②について

起点の設定をしている。yAxisについては、初期値で0.0が設定されている。ここで初期値を変更すれば、起点が変更できる。

unit*y+xAxisについては、yにunit(100.0)をかけることで、1から-1の範囲で動く波の高さが100から-100の振幅へと変更される。xAxisをプラスすることで、viewの高さの3/1が基準となって波が設定される。xAxisを0として上下に100,-100のメモリが設定される感じ。

最初にこのメソッドが実行されたときは、timeが0なので、yの値は0*xAxisになる。

③について

UIBezierPathで起点を作成している。

④について

起点からviewの幅分まで点を打っていく。
while i <= widthにすると右端に隙間ができてしまうので、それより少し大きいところを条件に入れているのだと思う。

⑤について

次に打つ点の情報を設定していく。
time(経過時間)に対して、yAxis(Xの起点)とiを足していく。
iは10ずつ増加していき、x座標を表す。ここでunitで割っているのは、100を1として、x座標が10動いた場合に、経過時間を0.1増やすためだと思われる。実際、unitは波の高さを表すときに使用しているので、別の定数を作成して入れた方がわかりやすい気もした！

⑥について

xで求めた地点のsinθが求められる。-delayについては、backWaveをfrontWaveよりも遅らせて表示するための設定である。-delayで設定した数だけ並行移動するので、グラフがずれて表示される。
𝑦=sin(𝜃–𝑝) のグラフを参考にする。

ここで、waveHeightを割っているが、これは①で行った処理と同じ感じ。ここで縮小するよりも、unitを変更して全体的な振幅を変えてあげた方が良い気もする！実際にやってみたら同じ動作になった！

⑦について

終点を作成している。
xは10ずつ増えていき、yは②と同じ！

drawWaveメソッドについて

deawSinで設定した波を閉じて、カラーをつける。

    private func drawWave(layer: CAShapeLayer,path: UIBezierPath,color: UIColor,delay:CGFloat) {
        // ①
        drawSin(path: path,time: drawElapsedTime/0.5, delay: delay)
        // ②
        path.addLine(to: CGPoint(x: width+10, y: height))
        // ③
        path.addLine(to: CGPoint(x: 0, y: height))
        path.close()
        
        layer.fillColor = color.cgColor
        layer.path = path.cgPath
        self.layer.insertSublayer(layer, at: 0)
    }

①について

drawElapsedTimeについては後で出てくる。ここで/0.5をすることについては、ChatGPTがわかりやすかった。

実際には、drawElapsedTime / 0.5により、drawElapsedTimeの値は2倍になりますが、この値が波形の周波数を決定します。サイン関数におけるxの係数は周波数に相当し、その値が大きいほど波の周期は短くなります。

したがって、drawElapsedTime / 0.5により、drawElapsedTimeが2倍になることで波の周波数が2倍になり、結果的に波の周期は半分になります。言い換えると、波形が「横に縮む」ことを意味します。

そのため、drawElapsedTime / 0.5により、サイン波はより速く振動し、その結果、波の周期が半分（つまり、π）になります。

0.5がある場合とない場合を比べても、波の数に違いがあるのがわかる。
三角関数のグラフの書き方：y=sin(kθ)のグラフを参考にする。

②について

右下に終点を作成。

③について

左下に終点を作成。

waveメソッドについて

波の処理を実行し、経過時間を計算する。

    @objc private func wave(layer: CAShapeLayer, path: UIBezierPath, color: UIColor, delay:CGFloat) {
        path.removeAllPoints()
        drawWave(layer: layer, path: path, color: color, delay: delay)
        drawSeconds += 0.009
        // ①
        drawElapsedTime = drawSeconds*CGFloat(Double.pi)
        // ②
        if drawElapsedTime >= CGFloat(Double.pi) {
            drawSeconds = 0.0
            drawElapsedTime = 0.0
        }
    }

①について

2πは1周期分を表しているので、ここではπを用いて、半周期分のうち今がどこにいるのかを求めている。
以下はChatGPTに聞いてみた内容。

drawSeconds*CGFloat(Double.pi)は時間経過をラジアンに変換しており、これはdrawSecondsが半周期のどこにあるかを示しています。

時間軸上で見ると、1単位時間がπ（約3.14）単位の角度（ラジアン）に対応します。つまり、経過時間drawSecondsをπで乗じると、それが半周期のどこに位置するかを求めることができます。

したがって、 "1:3.14=0.09:x" は、この変換を良く表しています。0.09単位時間が経過した場合、それは約0.28単位のラジアンに対応します（つまり、0.09*π ≈ 0.28）。これは、半周期の約9%の位置に対応します。

②について

経過時間が半周期を超えた場合、リセットするようにしている。
実際、リセットしなくても問題なく動作したけど、ずっと溜まりまくるとかデメリットがあるのかな？

終わりに

真似をして作ってみたが、難しかった。
というよりも、やはり数学力は直結してくるし、あればあるほど実現できることは多いなと実感！

ここまでご覧いただきありがとうございました！
そして、コードを上げてくれる先輩方に本当に感謝です。。