##はじめに
この記事は、ZOZOテクノロジーズ #4AdventCalendar2019の記事です。
昨日は@kurararararaさんのCharles for Macでレスポンスを変更する方法の記事でした。

ZOZOテクノロジーズでは、他にもAdventCalenderを書いている方がいらっしゃるので、よかったらみていってください。

##映えを狙う
今回私@koiwai2020は、WEARに投稿したこちらのコーディネート画像に雪を降らせて、映えを狙いたいと考えました。

今回はCABasicAnimationを使ったアニメーションによって、雪が降らせてみることに挑戦しました。

早速ですがアニメーションを使用して、投稿画像に雪を降らせた完成形がこちらになります。

pic.twitter.com/1N8pAwqitv
— 小岩井 (@WfODXAd0jmop1Ev) December 16, 2019

CABasicAnimationにはopacity、backgroundColor、position、transform.scale.xなどのkey pathが用意されていて、これを指定してアニメーションを作ります。
今回雪が降る様子を作る為に、以下の2つの動きをCABasicAnimationを使って表現しました。

雪の画像を移動させる。
雪の画像を徐々に薄くする。

##画像を移動させるアニメーション
雪を降らせるにあたって、まず画像を移動させるアニメーションを作ります。
移動させるアニメーションは、positionをkey pathに設定して使います。

func fallAnimation() -> CABasicAnimation {
        let fallAnimation = CABasicAnimation(keyPath: "position")
        // 0から1までのランダムな係数を用意して、アニメーションの位置を調整するための値
        let random = CGFloat.random(in: 0 ..< 1)
        // アニメーション開始時の座標
        let fromPoint = CGPoint(x: UIScreen.main.bounds.width * random, y: 0)
        // アニメーション完了時の座標
        let toPoint = CGPoint(x: UIScreen.main.bounds.width * random, y: UIScreen.main.bounds.height)
        // アニメーション開始時の座標を設定
        fallAnimation.fromValue = fromPoint
        // アニメーション完了時の座標を設定
        fallAnimation.toValue = toPoint
        // アニメーションの速度を設定
        fallAnimation.duration = 1.5

        return fallAnimation
}

##画像を透過させるアニメーション
次に降る雪が地上に近くにつれて、溶けていく様子を画像を透過させるアニメーションを使って作ります。
透過のアニメーションは、opacityをkey pathに設定して使います。

func thawAnimation() -> CABasicAnimation {
        let thawAnimation = CABasicAnimation(keyPath: "opacity")
        // アニメーション開始時のalpha値
        thawAnimation.fromValue = 1.0
        // アニメーション終了時のalpha値
        thawAnimation.toValue = 0.0
        // アニメーションの速度を設定
        thawAnimation.duration = 1.5
        // アニメーション完了時の状態を保持
        thawAnimation.fillMode = .forwards

        return thawAnimation
}

##作ったアニメーションを画像に反映させる
作ったアニメーションを実際に、画像に反映させてみます。

アニメーションは、CALayerのadd(_:forKey:)を呼び出したタイミングで開始されます。
その為、次のstartSnowAnimationが呼び出されたタイミングで雪の画像が徐々に薄くなりながら、落ちていきます。

画像にアニメーションを追加する処理

func startSnowAnimation() {
        view.addSubview(snowImageView)
        snowImageView.layer.add(fallAnimation(), forKey: "")
        snowImageView.layer.add(thawAnimation(), forKey: "")
}

##アニメーションを繰り返す
実際にstartAnimationを実行してみると、一粒の雪しか降ってきませんでした。
なので今回は、Timerを使用して一定の周期でアニメーションを開始するようにしました。

用意したTimer

let snowAnimationTimer = Timer.scheduledTimer(timeInterval: 0.2,
                                              target: self,
                                              selector: #selector(startSnowAnimation),
                                              userInfo: nil,
                                              repeats: true)

用意したTimerを、アニメーションを開始したい任意のタイミングで動かします。

Timerを動かす

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        RunLoop.main.add(snowAnimationTimer, forMode: .common)
}

これで雪のアニメーションが繰り返し行われるので、自然な見た目になります。

##アニメーションが終ったら
アニメーションが終ったら、追加したアニメーションや画像の削除を行います。
アニメーションの完了には、CAAnimationDelegateにて用意されているanimationDidStop:finished:を使います。
animationDidStop:finished:を呼ぶ為には、最初に作ったアニメーションの設定処理に以下の設定を追加する必要があります。

アニメーションにdelegateを設定する。
isRemovedOnCompletionプロパティを無効にする。

isRemovedOnCompletionは、アニメーションが完了した際に削除するかどうかを決定します。
これが有効のままですと、animationDidStop:finished:は呼ばれずに、アニメーションのオブジェクトは削除されます。

透過させるアニメーションthawAnimationを例に設定を追加すると、次のようになります。

func thawAnimation() -> CABasicAnimation {
        let thawAnimation = CABasicAnimation(keyPath: "opacity")

        thawAnimation.delegate = self // CAAnimationDelegateの設定を追加

        thawAnimation.fromValue = 1.0
        thawAnimation.toValue = 0.0
        thawAnimation.duration = 1.5
        thawAnimation.fillMode = .forwards

        thawAnimation.isRemovedOnCompletion = false //isRemovedOnCompletionはデフォルトtrue

        return thawAnimation
}

設定が済んだら、animationDidStop:finished:内にアニメーション完了時の処理を追加します。
今回は、アニメーションが完了したタイミングで雪画像のImageViewごと削除しています。

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        snowImageView.removeFromSuperview()
}

以上で、投稿したコーディネート画像を映えさせる?雪のアニメーションの実装ができました。

##さいごに
CABasicAnimationのfromValueやtoValue、durationを調整することでアニメーションの印象が変わりました。
普段慣れ親しんでいる雪であっても、実際に表現するとなると難しいのだなと感じました。

明日は、@Kyou13さんです。

読んで下さった皆さま、ありがとうございました🙇‍♂️🏂🙇‍♂️