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

はじめに

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

＊「バレンなにがしの日」に合わせて、今回登場するアイコンは「❤️」です。
完成はこんな感じ：

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

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

1.Swift UI の準備

・Xcode（Appleが提供している総合開発環境）を開く。 （Mac持ちの人なら、アプリケーションの中に入っているかと思います。なかったら、ダウンロードしましょう。） ・”Create a new Xcode project” (簡単翻訳：新しくプロジェクトを作成しましょー) ・Appを選んで、新しいアプリを作成しよう。

新しくアプリを作るとこんなコードと画面（Xcode画面）になっていると思います。

2.アイコンの用意

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

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

SwiftUI

    Text("Hello, world!")
    .padding()

部分を削除し、代わりに、以下のImageを書き込む、

SwiftUI

Image(systemName: "heart.fill")

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

SwiftUI

Image(systemName: "heart")

3.アイコンへ色々追加（サイズとか色とか）

ハート大きく、色を赤色っぽくしたい！って思ったら、

SwiftUI

Image(systemName: "heart")
    .font(.system(size: 50.0))
    .foregroundColor(.pink)

4.アイコンにアニメーションつける

流れとして、ボタン押すと→アニメーションスタート→ボタン押すの大変なので繰り返し追加！＝

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

SwiftUI

@State private var isAnimated = false

独り言：ボタン押した時の変数"isAnimated"を用意。

SwiftUI

var animation: Animation {
    Animation.easeOut
}

独り言：アニメーションの種類を決めたよ。

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ボタンを押すことができるよ。

[ボタン押す前] -> [ボタン押した後]

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

SwiftUI

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

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

5.補足：アニメーションの種類

easeOut: 開始が早く最後は遅くなるアニメーション

SwiftUI

Animation.easeOut

easeIn: 開始が遅く徐々に早くなるアニメーション

SwiftUI

Animation.easeIn

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

SwiftUI

Animation.easeInOut

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

SwiftUI

Animation.linear

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