【SwiftUI】KeyframeAnimation使ってみた

はじめに

iOS17から使えるKeyframeAnimationを調べならが使ってみたのでちょっとまとめたのを投稿しておきます。

最小単位のサンプル

import SwiftUI

//　`KeyframeAnimationValues`で指定した値を`keyframeAnimator`で使用できる
struct KeyframeAnimationValues {
    var scale = 1.0
}

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "heart.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 100)
                .foregroundStyle(.red)
                .keyframeAnimator(
                    initialValue: KeyframeAnimationValues()
                ) { content, value in
                    // `value`は`KeyframeAnimationValues`
                    content.scaleEffect(value.scale)
                } keyframes: { _ in
                    // `scale`を1秒間かけて0.5にする
                    KeyframeTrack(\.scale) {
                        CubicKeyframe(0.5, duration: 1)
                    }
                }
        }
    }
}

実行するとこうなる

疑問

KeyframeTrackの中のCubicKeyframeは何？

答え → KeyframeTrackContent

KeyframeTrackContentって何があるの？

以下の4種類があります。

• CubicKeyframe
• LinearKeyframe
• MoveKeyframe
• SpringKeyframe

CubicKeyframe

3次曲線を使用して値間を滑らかに補間するキーフレーム。

LinearKeyframe

単純な線形補間を使用したキーフレーム。

MoveKeyframe

補間することなく、指定された値に即座に移動するキーフレーム。

SpringKeyframe

スプリング関数を使用して、指定された値に補間するキーフレーム。

複数条件

複数条件を実行させて心臓の鼓動を完成させる

import SwiftUI

struct KeyframeAnimationValues {
    var scale = 1.0
    var opacity = 1.0
}

struct ContentView: View {
    var body: some View {
        Image(systemName: "heart.fill")
            .resizable()
            .scaledToFit()
            .frame(width: 100)
            .foregroundStyle(.red)
            .keyframeAnimator(
                initialValue: KeyframeAnimationValues()
            ) { content, value in
                content
                    .scaleEffect(value.scale)
                    .opacity(value.opacity)
            } keyframes: { _ in
                KeyframeTrack(\.scale) {
                    CubicKeyframe(0.8, duration: 0.3)
                    CubicKeyframe(0.6, duration: 0.3)
                    CubicKeyframe(1.0, duration: 0.3)
                }

                KeyframeTrack(\.opacity) {
                    CubicKeyframe(0.8, duration: 0.3)
                    CubicKeyframe(0.6, duration: 0.3)
                    CubicKeyframe(1.0, duration: 0.3)
                }
            }
    }
}

おわり

KeyframeTrackContentの各種動きの違いなどを調べたい
KeyframeAnimationに入門はできたので色々試して記事書いていく

参考記事