0Pricing
Swift Academy · レッスン

暗黙的アニメーションと明示的アニメーション

.animation()モディファイアとwithAnimation {}ブロックを用途に応じて使い分けます。

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

2種類のアニメーション

SwiftUIは、暗黙的アニメーション（.animationモディファイア）と明示的アニメーション（withAnimationクロージャ）をサポートしています。

struct Demo: View {
  @State private var scale = 1.0
  var body: some View {
    Circle().scaleEffect(scale)
  }
}

.animationによる暗黙的アニメーション

ビューに.animation(_:value:)を付けると、バインドされた値が変化するたびにビューがアニメーションします。

Circle()
  .scaleEffect(scale)
  .animation(.easeInOut(duration: 0.3), value: scale)

暗黙的アニメーションをトリガーする

ビューに影響する状態変更が発生すると、そのビューに定義された暗黙的アニメーションが自動的にトリガーされます。

Button("Grow") {
  scale = 2.0  // .animation fires automatically
}

withAnimationによる明示的アニメーション

withAnimationは状態の変更をラップし、その結果生じるすべてのビュー変更を同時にアニメーションします。

Button("Animate") {
  withAnimation(.spring()) {
    scale = 2.0
    offset = 50
  }
}

複数のプロパティをアニメーションする

複数の状態変更を1つのトランザクションとして同期させてアニメーションしたい場合は、withAnimationが適しています。

withAnimation(.easeOut(duration: 0.5)) {
  isExpanded = true
  rotation = 90
  opacity = 0.5
}

アニメーションの種類

Swiftには、spring、easeIn、easeOut、easeInOut、linear、およびカスタムタイミングカーブのアニメーションが用意されています。

.spring(response: 0.4, dampingFraction: 0.6)
.easeInOut(duration: 0.3)
.linear(duration: 0.5)
.timingCurve(0.2, 0.8, 0.2, 1.0, duration: 0.4)

アニメーションを無効にする

.animation(.none, value:)を渡すか、変更処理をwithAnimation(nil)でラップすると、アニメーションを選択的に無効化できます。

Circle()
  .scaleEffect(scale)
  .animation(.none, value: scale)  // no animation

アニメーションの優先順位

明示的なwithAnimationは、子ビューに設定された暗黙的な.animationモディファイアより優先されます。

withAnimation(.linear) {
  value = true  // linear wins over any .animation on subviews
}

アニメーションを繰り返す

パルス効果のようなループアニメーションには、.repeatForeverまたは.repeatCountを使用します。

.animation(
  .easeInOut(duration: 0.8).repeatForever(autoreverses: true),
  value: pulsing
)

遅延と速度

アニメーションの値に.delayと.speedモディファイアを適用して、アニメーションを組み合わせます。

.animation(.spring().delay(0.2).speed(1.5), value: flag)

暗黙的アニメーションと明示的アニメーションの使い分け

1つの値に結び付いた単一ビューのアニメーションには暗黙的アニメーションを使用し、複数のプロパティやビューを調整する場合は明示的アニメーションを使用してください。

// Implicit: simple, single view
.animation(.easeIn, value: isVisible)
// Explicit: multi-property or cross-view
withAnimation { a = 1; b = 2 }

理解度チェック

複数の状態プロパティを同時にアニメーションさせるには、どのアプローチが最適ですか？

レッスンのまとめ

暗黙的なアニメーション（.animation(_:value:)）は、単一のビューの値の変化に自動的に反応します。明示的なアニメーション（withAnimation {}）は、複数の変更をまとめて調整します。.delay、.speed、.repeatForeverを組み合わせると、複雑な効果を作成できます。

よくある質問

「暗黙的アニメーションと明示的アニメーション」レッスンは無料ですか？

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

「暗黙的アニメーションと明示的アニメーション」で何を学びますか？

.animation()モディファイアとwithAnimation {}ブロックを用途に応じて使い分けます。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「暗黙的アニメーションと明示的アニメーション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. 暗黙的アニメーションと明示的アニメーション
  2. ヒーロートランジションのためのmatchedGeometryEffect
  3. カスタムAnimatableModifierとAnimatable
  4. 高パフォーマンス描画のためのTimelineViewとCanvas
← Swift Academyに戻る