初めてのSwift UI開発: Animationとアイコンで❤️をドクドク[Memo for neko]

<h1>はじめに</h1>
Swift UI をやっていると、<b>良い感じのアイコンや画像にアニメーション付けて動かしたいって!</b>
思う時のためのメモです。
この内容から、<b>アイコンの使い方、アイコンや画像のサイズ調整、色調整</b>などを学べます。
＊対象は、Swift UIをすごーく初めて使う人

＊「バレンなにがしの日」に合わせて、今回登場するアイコンは「❤️」です。
完成はこんな感じ：
<img width="200" alt="ezgif.com-gif-maker.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/43db4afb-6e66-135e-6c1b-7d9f71924254.gif">

==環境==
・PC:Macbook Pro (Retina)
・macOS Big Sur
・Xcode 12.4(12D4)
・Swift version 5.3.2
ちなみにSwiftのバージョン確認は、以下のコマンドでプイ。

```terminal:terminal
xcrun swift -version
```
==導入流れ（簡略）==
1.Swift UI の準備
2.アイコンの用意
3.アイコンへ色々追加（サイズとか色とか）
4.アイコンにアニメーションつける
5.補足：アニメーションの種類

参考URL:
-Scale animation: https://daddycoding.com/2020/06/17/swiftui-scaling-animation/
-Apple animation: https://developer.apple.com/documentation/swiftui/animation

<h1>1.Swift UI の準備</h1>
・Xcode（Appleが提供している総合開発環境）を開く。
（Mac持ちの人なら、アプリケーションの中に入っているかと思います。なかったら、ダウンロードしましょう。）
・”Create a new Xcode project” (簡単翻訳：新しくプロジェクトを作成しましょー)
・Appを選んで、新しいアプリを作成しよう。
<img width="300" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/2b59b076-94aa-8240-5449-7a0c8adaa891.png"> <img width="300" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/c9f02898-aab9-abc1-b029-def073299d05.png">

新しくアプリを作るとこんなコードと画面（Xcode画面）になっていると思います。
<img width="500" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/1e9fc7e6-db59-e999-f9d1-202df4850412.png">

<h1>2.アイコンの用意</h1>
手持ちに良いアイコンがない時は、"systemName" で召喚。
（呼び出せるアイコンに関しては、SF Symbols:https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/）

ちなみに今回は、バレンなにがしの日より、❤️を選択。

```swift:SwiftUI
    Text("Hello, world!")
    .padding()
```
部分を削除し、代わりに、以下のImageを書き込む、

```swift:SwiftUI
Image(systemName: "heart.fill")
```

<img width="200" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/6d6a8046-d5cc-b3d7-beae-fe3fc229a9f2.png">


ちなみに、<b>fillは塗りつぶす</b>って意味で、中身の色がないアイコン使いたい場合は、fill消し。

```swift:SwiftUI
Image(systemName: "heart")
```

<h1>3.アイコンへ色々追加（サイズとか色とか）</h1>
ハート大きく、色を赤色っぽくしたい！って思ったら、

```swift:SwiftUI
Image(systemName: "heart")
    .font(.system(size: 50.0))
    .foregroundColor(.pink)
```
<img width="200" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/e2f634e9-4314-29ef-c1b8-cc4073bc4cf9.png">


<h1>4.アイコンにアニメーションつける</h1>
流れとして、ボタン押すと→アニメーションスタート→ボタン押すの大変なので繰り返し追加！＝

struct ContentView: View { ... } の中に以下追加、

```swift:SwiftUI
@State private var isAnimated = false
```
独り言：ボタン押した時の変数"isAnimated"を用意。

```swift:SwiftUI
var animation: Animation {
    Animation.easeOut
}
```
独り言：アニメーションの種類を決めたよ。


```swift:SwiftUI
VStack(spacing: 5) {
            // 1
            Button("SCALE") {
                self.isAnimated.toggle()
            }.foregroundColor(.pink)
            // 2
            Image(systemName: "heart.fill")
                .font(.system(size: 25.0))
                .foregroundColor(.pink)
                .frame(width: 200, height: 200)
                .scaleEffect(isAnimated ? 3 : 0.5)
                .animation(animation)
        }
```

独り言：”SCALE”ってボタン（Button("SCALE"部分）を設置、アイコンのスタート時のサイズを小さくして、アニメーションで大きくなるサイズも指定。

ちなみに、画像の左上　▷　ボタン押すとSCALEボタンを押すことができるよ。

[ボタン押す前] -> [ボタン押した後]
<img width="205" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/46dba543-bbc7-f3c1-e2ff-59657acb8081.png">    <img width="200" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/0e6a4e4a-ff7e-2cd8-7164-6eef135a9c3e.png">

ボタン押すと、❤️　大きくなったよ（ぱちぱち）
ドキドキ表現したいから、animationに繰り返しの呪文追加。
 (".repeatForever(autoreverses: false)")

```swift:SwiftUI
var animation: Animation {
    Animation.easeOut
    .repeatForever(autoreverses: false)
}
```

<img width="200" alt="ezgif.com-gif-maker.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/43db4afb-6e66-135e-6c1b-7d9f71924254.gif">

完成！（❤️バクバクだ！）

<h1>5.補足：アニメーションの種類</h1>
easeOut: 開始が早く最後は遅くなるアニメーション

```swift:SwiftUI
Animation.easeOut
```
easeIn: 開始が遅く徐々に早くなるアニメーション

```swift:SwiftUI
Animation.easeIn
```
easeInOut: easeInとeaseOutの良いとこどり
（＊自然な動きを見せてくれる、おすすめ）

```swift:SwiftUI
Animation.easeInOut
```

easelinear: 一定の速度で動くアニメーション

```swift:SwiftUI
Animation.linear
```

以上で❤️ハート❤️バクバク。
SF Symbolsは、いろんな使えるアイコンがあっておすすめ。
(https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/)