スプリングとカスタムタイミング曲線
スプリングとイージングで動きを調整します。
「スプリングとカスタムタイミング曲線」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
動きの印象
アニメーションがどのように加速し、収束するかによって、その個性が決まります。timing curveが、動きをきびきび、滑らか、または弾むように感じさせるかを決めます。
Linear は一定
linearカーブは、開始から終了まで一定の速度で動きます。機械的に感じることがあるため、UI よりもプログレスバーに適しています。
.animation(.linear, value: x)Ease In と Out
easeInOutカーブはゆっくり始まり、加速した後、穏やかに停止します。多くの UI にとって最も自然な選択です。
.animation(.easeInOut, value: x)Ease In と Ease Out の違い
穏やかに始めたいときはeaseIn、穏やかに止めたいときはeaseOutを使い、動きのどちら側を柔らかくするかを選びます。
Spring を使う
springアニメーションは現実の物理法則をモデルにしており、少し行き過ぎてから収束します。そのため、生き生きとして反応のよい動きになります。
.animation(.spring, value: x)弾み方を調整する
bounceパラメーターで、動きの弾み具合を設定します。0 なら滑らかで、値を大きくすると遊び心のあるオーバーシュートが加わります。
.spring(duration: 0.5, bounce: 0.3)Response と Damping
Spring は、速度を決めるresponseと、弾みがどれだけ早く収まるかを決める damping でも調整できます。
.interpolatingSpring(
stiffness: 170, damping: 15)カスタム Bezier カーブ
完全に制御したい場合は、timingCurveを使って、独自の制御点と時間によるカスタム bezier を定義できます。
.timingCurve(0.2, 0.8, 0.2, 1,
duration: 0.5)遅延を追加する
任意のアニメーションに.delayを連結すると、開始前に待機できます。複数の要素を時間差で動かすのに最適です。
.animation(.spring.delay(0.1), value: x)動きを繰り返す
repeatForeverまたは repeatCount を使うと、アニメーションを繰り返せます。点滅するドットや読み込み表示に適しています。
.easeInOut.repeatForever(
autoreverses: true)速度を上げる、または下げる
.speed modifier を使うと、カーブや時間を書き換えずに、アニメーションの速度を速くしたり遅くしたりできます。
.animation(.default.speed(2), value: x)簡単な確認
日常的な UI の動きに最も自然なカーブはどれですか？
復習：カーブと Spring
linear から easeInOut までのtiming curves、bounce のある生き生きとした Spring、カスタム bezier、遅延、繰り返しについて学びました。これで動きに個性を加えられます。🚀
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「スプリングとカスタムタイミング曲線」レッスンは無料ですか？
はい。「スプリングとカスタムタイミング曲線」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「スプリングとカスタムタイミング曲線」で何を学びますか？
スプリングとイージングで動きを調整します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「スプリングとカスタムタイミング曲線」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 暗黙的アニメーション
- withAnimationによる明示的アニメーション
- 挿入と削除のトランジション
- スプリングとカスタムタイミング曲線