SF SymbolsとwithAnimationを活用してオリジナルのインジケータを作成しよう！

## 概要
アプリを作っていると何かしらの処理の完了をユーザーに待機させる目的でインジケータを表示させたいと思うことはよくあることだと思います。
こういうやつですね。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/54bcce05-fe24-c17c-4669-48c8aae640e7.gif">

このインジケータを表示させる方法として、`PKHUD`のようなライブラリを活用する方法や、SwiftUIであれば`ProgressView`を活用する方法があると思います。
しかし、せっかくならインジケータを自作して、アプリに個性を出したいと思わないでしょうか？
私は思いました。

今回はそのような思いから、SF Symbolsを活用してオリジナルのインジケータを作成する方法を紹介したいと思います。
完成イメージは以下です。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/ef11e49e-d3d4-106a-7c40-e11f7540335f.gif">

## 手順
### 1. 任意のシンボルをカスタムシンボルとして書き出す
SF Symbolsを開き、任意のシンボルを選択し、画像のように「1個のカスタムシンボルとして複製」を選択。
![スクリーンショット 2024-02-20 0.21.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/46727145-7b50-9792-b861-d5e590188b40.png)

### 2. レイヤーの削除(任意)
サイドメニュー下部の「カスタムシンボル」から複製したカスタムシンボルを選択。
すると右側が画像のようになっていると思います。
![スクリーンショット 2024-02-20 0.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/73c92eb0-a63c-5b9c-1bdb-ea196a7ec4c5.png)
ここで注目したいのが、レイヤーとその配下にあるサブパスです。
このレイヤーとサブパスにより、シンボルの一つ一つのパーツを細かく操作出来るようになっています。
今回、このレイヤーを意識することは特にないので、(トラックパッドでの説明になりますが、二本指でクリックし)下のレイヤーを削除し、レイヤーを一つだけにします。
ここまでの説明でレイヤーは以下のような状態になっているかと思います。
![スクリーンショット 2024-02-20 0.41.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/8119a2a7-9659-851b-35e0-cdc05c4eff44.png)
チェックマークがオンの状態で、パーツが表示される状態となります。
ここから、パーツごとに画像を書き出し、素材を準備していきます。

### 3. パーツの書き出し
まずは時計で言うところの12時の場所にあるパーツのみを表示させます。
太陽マークで言うと、サブパス1のチェックを外し、サブパス2にチェックマークを入れた状態です。
![スクリーンショット 2024-02-20 0.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/d8e986d9-7cec-0d16-b319-74a658b87345.png)

パーツ画像は複数作成するので、ここでカスタムシンボルの名前を変更します。
今回はloading.image.1とします。
次にカスタムシンボルを選択し、上のファイルから「シンボルを書き出す」を選択。
![スクリーンショット 2024-02-20 1.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/4ad1df22-f5e3-4cec-c8b7-7a69d594d0b1.png)
書き出しが成功すると、.svgファイルが作成されます。
同様の手順を繰り返し、素材を作成します。
今回私はローディングに違和感がないように合計で9個のsvgを作成しました。

### 4. プロジェクトにインポート
素材の作成完了後、プロジェクトにインポートします。
プロジェクトのAssetsを選択後、+ボタンより「import」を選択。
![スクリーンショット 2024-02-20 1.13.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262759/6c72b734-b4d7-28b7-ff13-95c2857c048c.png)
その後、作成したsvgファイルを選択し、プロジェクトに全てインポートしてください。
これで、シンボルのインポートが完了です。

### 5. ローディングアニメーションを実装
最後にローディングアニメーションを実装して、完成です。
私は以下のように実装しました。
```swift
import SwiftUI

struct LoadingView: View {
    @State private var currentImageIndex: Int = 0
    let images = [
        Image("loading.image.1"),
        Image("loading.image.2"),
        Image("loading.image.3"),
        Image("loading.image.4"),
        Image("loading.image.5"),
        Image("loading.image.6"),
        Image("loading.image.7"),
        Image("loading.image.8"),
        Image("loading.image.9")
    ]

    var body: some View {
        images[currentImageIndex]
            .font(.largeTitle)
            .onAppear {
                startAnimation()
            }
            .foregroundColor(.orange)
    }

    private func startAnimation() {
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
            withAnimation {
                currentImageIndex = (currentImageIndex + 1) % images.count
            }
        }
    }
}
```
あとはこの作成したviewを呼び出すだけで、自作のインジケータの完成です！

 ## まとめ
 いかがだったでしょうか？
 思ったより簡単に出来ると感じた方も多いと思います。
 デザインセンスと根気があれば、もっとおしゃれなインジケータも作成出来ると思います。
 是非一度お試し頂き、アプリにオリジナリティを加えてみてください！
 
 最後までお読み頂きありがとうございました。