Swift Academy · レッスン

カスタムAnimatableModifierとAnimatable

AnimatableとAnimatableModifierに適合させ、カスタム描画コンテンツをアニメーション化します。

レッスン 3/413 ステップ

「カスタムAnimatableModifierとAnimatable」はCoddyKit上の無料Swift Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

Animatableプロトコル

Animatableは、アニメーション中に型をどのように補間するかをSwiftUIに伝えます。Shapeは自動的にこれに準拠します。

struct Wave: Shape, Animatable {
  var amplitude: Double
  var animatableData: Double {
    get { amplitude }
    set { amplitude = newValue }
  }
  func path(in rect: CGRect) -> Path { Path() }
}

animatableDataプロパティ

SwiftUIは各アニメーションフレームでanimatableDataを読み書きし、開始値と終了値の間を補間します。

struct GrowingCircle: Shape {
  var radius: Double
  var animatableData: Double {
    get { radius }
    set { radius = newValue }
  }
  func path(in rect: CGRect) -> Path {
    Path(ellipseIn: CGRect(x: rect.midX-radius, y: rect.midY-radius, width: radius*2, height: radius*2))
  }
}

複数の値に対するAnimatablePair

AnimatablePairを使うと、独立した2つの値を同時にアニメーションさせられます。

struct Sector: Shape {
  var startAngle: Double, endAngle: Double
  var animatableData: AnimatablePair<Double, Double> {
    get { AnimatablePair(startAngle, endAngle) }
    set { startAngle = newValue.first; endAngle = newValue.second }
  }
  func path(in rect: CGRect) -> Path { Path() }
}

ViewModifierとAnimatable

ViewModifierをAnimatableに準拠させると、任意の視覚効果をアニメーションさせられます。

struct Shake: ViewModifier, Animatable {
  var animatableData: Double = 0
  func body(content: Content) -> some View {
    content.offset(x: sin(animatableData * .pi * 4) * 8)
  }
}

アニメーションの駆動

withAnimation内でアニメーション可能な値を変更すると、SwiftUIはanimatableDataを使って補間します。

struct ShakeView: View {
  @State private var shakes = 0.0
  var body: some View {
    Text("Hello")
      .modifier(Shake(animatableData: shakes))
      .onTapGesture {
        withAnimation(.linear(duration: 0.5)) { shakes += 1 }
      }
  }
}

AnimatableModifier（非推奨）とAnimatable + ViewModifier

AnimatableModifierは後のSDKでは非推奨です。代わりに、ViewModifierを直接Animatableに準拠させてください。

// Modern approach:
struct MyMod: ViewModifier, Animatable { ... }
// Avoid (deprecated):
// struct MyMod: AnimatableModifier { ... }

animatableDataとしてのカスタム数値型

VectorArithmeticに準拠する任意の型をanimatableDataにできます。SwiftのCGFloat、Double、AnimatablePairはいずれも条件を満たします。

extension MyColor: VectorArithmetic {
  static func += (lhs: inout MyColor, rhs: MyColor) { ... }
  mutating func scale(by rhs: Double) { ... }
  var magnitudeSquared: Double { ... }
}

進行度ベースのモディファイア

よく使われるパターンは、progressの値を0から1までアニメーションさせ、モディファイア内で視覚的なプロパティを計算する方法です。

struct FillModifier: ViewModifier, Animatable {
  var progress: Double
  var animatableData: Double { get { progress } set { progress = newValue } }
  func body(content: Content) -> some View {
    content.overlay(Color.blue.opacity(progress))
  }
}

.animationとの連結

アニメーションを追加すると、状態の変更時にアニメーション可能なモディファイアのprogress値を自動的に更新できます。

Text("Loading")
  .modifier(FillModifier(progress: isLoaded ? 1 : 0))
  .animation(.easeInOut(duration: 1.0), value: isLoaded)

カスタムShapeのアニメーション

最も強力な用途は、animatableDataを使って制御点を補間し、2つのパスShape間でモーフィングすることです。

struct Blob: Shape, Animatable {
  var bulge: Double
  var animatableData: Double { get { bulge } set { bulge = newValue } }
  func path(in rect: CGRect) -> Path {
    // compute bezier with bulge-adjusted control points
    Path()
  }
}

パフォーマンス

SwiftUIはアニメーションの各フレームでモディファイアのbodyを呼び出します。滑らかな60/120 fpsを実現するため、body内の計算は最小限に抑えてください。

// OK: simple math in body
// AVOID: network calls, heavy computation in animated body

理解度チェック

カスタムのアニメーション可能な型を補間するために、SwiftUIが各アニメーションフレームで読み書きするものは何ですか？

対話的なレッスンで答える

レッスンのまとめ

Shapeまたはview modifierをAnimatableに準拠させ、VectorArithmetic値であるanimatableDataを公開します。SwiftUIはこれを各フレームで補間します。2つの値にはAnimatablePairを使います。withAnimationまたは.animationでアニメーションを駆動します。

無料で開始

AI チューターと学ぶ Swift — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 122
レッスン: 409

無料で学習を始めるコース全体を表示

よくある質問

「カスタムAnimatableModifierとAnimatable」レッスンは無料ですか？

はい。「カスタムAnimatableModifierとAnimatable」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「カスタムAnimatableModifierとAnimatable」で何を学びますか？

AnimatableとAnimatableModifierに適合させ、カスタム描画コンテンツをアニメーション化します。ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「カスタムAnimatableModifierとAnimatable」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Swift Academyに戻る