Springsでアニメーション生成

Springsでアニメーション生成

アニメーションでアプリに命を吹き込む方法を探りましょう。Springsを活用した素晴らしいアニメーションの作り方や、アプリでの活用方法をご紹介します。

関連する章
- 1:36 - Why springs
- 8:33 - How springs work
- 17:29 - How to use springs
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪
こんにちはJacobです私たちが構築するUIは変化と動きのあるよりダイナミックなものに進化し続けていますユーザーにも好評ですインターフェイスがより生き生きとし何が起きているのか理解しやすくなり UIとのインタラクションに楽しさをもたらします
このようなダイナミックインタラクションはさまざまな要素の組み合わせで実現しますあるシーンから別のシーンに移動するトランジションデバイスと直接やりとりをするジェスチャーそしてアニメーションはスクリーン上でオブジェクトを動かしたり成長させたりその視覚的特性を変化させたりしますこれらすべてが連動して流動的でインタラクティブなUI作りに役立ちます今日は優れたアニメーションの構築について深く知りましょうアニメーションの違いは微妙なものですが効果的なアニメーションはユーザーも実感できます今回紹介する方法はアプリのアニメーションをエレガントで自然にします今日は楽しいツールを1つだけ紹介しますパワフルで汎用性が高い springsです！まずspringがアニメーションに適している理由を説明しますそしてspringの仕組みについて詳しく説明しますそして最後にアプリでの springの使い方についてお話しますではなぜアニメーションに springが有用なのでしょうか？その答えとして優れたアニメーションとは何かについてまず説明します単純なトグルのあるアニメーションで見ていきましょうこのトグルに注目してみましょう
アニメーションを使う理由はいくつかありますが最も重要なことのひとつは連続性を表現することですオブジェクトがある場所で始まり突然別の場所に現れると違和感があり時には混乱も招きますもっと自然なのはオブジェクトがある場所から次の場所に移動する動きです
しかしそれは位置の問題だけではありませんオブジェクトの速度が突然変わるとそれも不自然です例えばこのトグルのノブは始まりと終わりに速度のジャンプがあり不自然ですつまり目指したいのはアニメーションの位置と速度を安定させることですいくつかのアニメーションタイプを見てその要件を見てみましょうこのトグルは完全なアニメーションの良い例ですがノブの動きだけに焦点を当てたいので 1つのアニメーションだけで見ていきますまずイーズインとイーズアウトから見ていきますこれはベジェ曲線アニメーションの一種で曲線とdurationの組み合わせで動きを定義していますこのオブジェクトの動きを見ると急激なジャンプがあるようには感じられませんこれを確かめるためにこのアニメーションの動きのチャートも見てみましょう
このチャートのいくつかを見ていくのでそれが何を示しているかを説明します横軸は時間を示し下の線はアニメーションの初期位置上の線は目標位置を示していますそしてアニメーションを繰り返し再生することでこの曲線を繰り返し進んでいきますではもう一度アニメーションを始めてみますチャートの曲線にジャンプがなく位置が一定していることに注目してください速度も表示されるようにチャートを更新すると速度にもジャンプがないことが確認できますつまり速度も一定です
リニアアニメーションの動きを見てみるとアニメーションの開始と終了時に鋭い角があり速度にジャンプがありますリニアアニメーションは特殊ツールとして便利な場合もありますが例えば回転を繰り返すインジケーターなどその他では使用に注意が必要です特に移動がある動作ではこのような非物理的な動きに注意しましょう
次にspringアニメーションの連続性をチェックしてみましょう私たちが望んでいるようにこれは位置と速度も継続しています今のところイーズイン・アウトと springアニメーションが最良に見えますが今まではアニメーションが静止位置から始まる場合のみを見てきましたジェスチャーとアニメーションを一緒に使うとどうなるか見てみましょう可動式のノブをiPad上に反映し指でドラッグしてみましょう
この2つの位置のどちらかにドロップすることができますしかし中間点でジェスチャーを終了させノブを片側に投げ出すこともできます
イーズイン・アウトのアニメーションでは最後までアニメーションしますがジェスチャーが終わると突然動きが止まります
このタイプのアニメーションは指定されたカーブを描くだけなので初速を定義する方法がありませんこれは 2次元の任意の位置にノブをドラッグできるようにするとさらに悪化します
今度はspringアニメーションで試してみましょう springはどのような初速度でも開始できるのでジェスチャーが終わった途端にアニメーションが始まるという自然な印象が得られます
これは2次元のドラッグにも効果的です
SwiftUIはジェスチャーのプロパティ変更時にいつでも自動的に速度を追跡するので余分な作業なくこの動作を得ることができますつまりspringsは静的な場合と初速がある場合の両方で連続性を維持する唯一のアニメーションのタイプです springの次の利点はその動きの形状です
springの動きと聞くとこのようなものを思い浮かべるかもしれません
しかしspringのアニメーションは弾むだけではありません確かにspringには弾みがあり素晴らしいツールですが springを使う主な理由は他にあります後ほど弾みのあるspringが有用な例も説明しますが弾みのないspringも素晴らしいものです！弾みのないspringはiOSのあらゆるアニメーションで使用されていますでは弾み以外のspringの動きの魅力は何でしょうか？もう一度シンプルなspringアニメーションとその終わり方を見てみましょう非常にゆっくりと徐々に静止していますねオブジェクトが突然終了する瞬間はありませんこれは私たちが想定する動いている物体の止まり方に近いですそしてこのバージョンがより自然に感じられるのには理由があります springアニメーションが物理的な実世界のバネを取り付けた物体の動きを参照しているので私たちの目には自然で信憑性のあるものに見えるのです springを使ったアニメーションはプロパティによって終了するタイミングが異なるというのは本当です Timing curveのアニメーションに慣れていると奇妙に思うかもしれませんすべてのアニメーションが同時に開始し同時に停止するのがよいでしょうか答えはノーです！アニメーションは私たちが慣れ親しんでいる現実世界の動きに似せたいのですそして一般的にこれらのアニメーションは摩擦によって減速されるためそれぞれのタイミングで開始したり停止したりします実際マルチプロパティアニメーションでは細かく設定すると良い場合もありますこれはiOSでアプリが起動するアニメーションです一見すると 1つの均一なアニメーションに見えますがアニメーションをスローにして見ると異なるspringと異なる開始時間と終了時間が組み合わさって驚くほど自然なアニメーションを形成しているのが分かります
springのアニメーションにおける最適性を理解したところで springの仕組みと最適な使い方について詳しく見ていきましょう springアニメーションを使用するとき私たちはバネに取り付けられた物体の動きを参照しています物理学に戻るとこの動きは 3つのプロパティによって定義されます物体のmass springのstiffness そしてdampingは周囲から物体にかかる摩擦の大きさを表します次にアニメーションの初期位置を物体の初期位置として使用しアニメーションの目標位置はバネで引っ張られた先の物体の静止位置を定義するために使用しますその後オブジェクトをリリースしてアニメーションを開始します springシステム定義用のプロパティは発生するモーションのタイプを決定しそれらを変更するとアニメーションも変更されます
そのため springアニメーションを作成する場合 massとstiffnessそしてdampingに同じプロパティを使用して springの種類を設定することができますこれらは物理的なシステムのモデル化には自然な方法ですが springアニメーションの定義としては直感的ではありません質量を持つ実際の物体も剛性を持つばねもありませんしカーブを変えるためにこれらの値を作るのは容易ではありませんそのため私たちはより理解しやすく作業しやすい springの新しい設定方法を改良してきました 2つのパラメータ durationとbounceを使いますご想像どおり durationを長くするとアニメーションが長くなります bounceを増やすとアニメーションに跳ね返りが追加されますこれらはAppleのデザインとエンジニアリング全体に採用されていますそのためspring対応のすべてのフレームワークで採用されています
これらspringパラメーターで様々なタイプの形状のカーブを見ることができます bounceが0より大きいと目標を超えて跳ねるspringになります bounceが0だと長く伸びて徐々にターゲットに向かう滑らかな曲線になりますそしてもうひとつタイプがあります一般的ではありませんが bounce値がネガティブの場合も徐々にターゲットに近づくspringでバウンス0よりも少し平坦ですバネの物理学ではこれらを不足減衰臨界減衰そして過減衰といいますでも私は弾みやすい滑らか平らと区別していますお気づきかもしれませんがこれらのbounce値はパーセンテージなので弾むspringはバウンス値が100%までで平らなspringはバウンス値が 0からマイナス100%です springについて更に掘り下げてみましょう springは時に複雑で理解が難しいように思われるかもしれませんしかし分解して見ていくと実はいくつかの単純なことが組み合わさっているだけなのです私の場合これら曲線の背後にある数学を理解することで springがより身近なものになったのでそれを共有したいと思いますしかし数学は頭を混乱させるだけだという方もご心配なくこの計算はすべて私たちが行います
では弾む曲線から始めましょうこのspringのオーバーシュートがもっと複雑なサイン波やコサイン波のように振動することに気づくかもしれませんこのバウンスを最大値の100%まで上げるとまさにコサイン波の挙動になり前後に振動していることがわかります
これを物理的に解釈するとバネには摩擦が作用しないので減速することなく永遠に振動し続け目標位置には到達しないということになります予想通りこれも数学的にはとても簡単ですコサイン曲線で時間が持続時間で割っているだけですだからこのバウンス値の持続時間は曲線の周期に正確に対応しますバウンスを小さくすることは物理的にはバネに摩擦や減衰を加えることと同じでバネの動きを遅くしますそしてまだ振動は続きます実際先ほどのコサイン曲線がまだあり上に重ねて描けばもっとはっきりしますこれは前と同じ式で定数が違って少し横にずれているだけですこれで曲線の跳ね返りは説明できますが明らかに何かが足りません元の曲線では振動の大きさが時間とともに小さくなりつまり減衰していますそれが欠けている部分ですこの追加曲線は指数関数的減衰した曲線ですそして動きの最後の徐々に静止する感覚を与える部分です
複雑な曲線に見えたのはこの2種類でできており減衰コサイン波またはサイン波と呼ばれますでもチャートをよく見るとちょっと不思議なことがありますなぜコサイン曲線の最初に凹みがあるのでしょうか？これは先ほど説明したことと関係があります速度の保持ですこの基本ケースでは最初の速度0を保持する必要があるのですつまり2つの曲線の合わせた速度は 0付近で平坦になるはずですしかし減衰曲線は上向きの傾きで始まっていますもしコサイン曲線が平坦に始まったら初速も上向きになりますそのためコサイン曲線は減衰と相殺してスタートを平坦にするために下向きにスタートするのですこのようにコサイン曲線のシフトとスケールを使い分けることで springはどんな初速にも対応できるのです
この初期速度は先ほど説明したようにジェスチャー終了時にアニメーションに引き継ぐ速度から得ることができます初速が得られる場所はもうひとつあります iPadで見てみましょうここではタップしてノブを動かしノブの画像を薄めに表示することができます分かりやすいようにゆっくりとしたspringを使いますアニメーションがまだ終わっていない間に新しいアニメーションが始まり新しい目標値に変わることがありますそのような場合 springアニメーションはリターゲットされた時の速度を新しい目的地へ向かう初速として使用しますこれによりインタラプトがスムーズで自然に感じられるようになります
これが速度保持と弾むspringの仕組みです bounceを小さくしていくと振動はどんどん離れていきバウンスが0に到達すると振動は完全になくなり減衰によって乗算された直線だけが下へ下へと遠ざかっていきますつまりこの方程式はもっとシンプルなのです線の基本方程式が必要なだけでそれに同じ指数を掛けると結果の曲線が得られます
負のバウンスを持つ扁平曲線の動きもよく似ていますが直線の代わりに 2つの指数関数を足したものを使いますこれはあまり一般的ではありませんが指数減衰だけで表されるためスクロールビューで起こるような速度減衰のモデリングに便利です
アニメーションにspringを使用する際にこう思うかもしれません springアニメーションが実際に終了するまでの時間はどれくらい？これまで見てきたようにこれは絶妙な疑問です springの指数関数的な減衰は技術的には永遠に動き続けます動きが小さくなるだけですもちろんspringアニメーションを永続させたくないのである時点で削除する必要があります UIに顕著な変化を与えなくなったときです springアニメーションが十分に完了して消せるまでの時間を settlingDurationと呼びますこれはspringを設定する durationパラメータとは異なります settlingDurationは様々な要因に左右されるため予測不可能な場合がありますが durationパラメータは知覚的であり他のパラメータが変化しても予測可能で動き回らないように選択されますその予測不可能な性質のためユーザが見る変更については settlingDurationは勧めません springがほとんど完了したときに UIを変更したい場合 perceptual durationを使った SwiftUIの新しいcompletionHandlerのサポートを使うことができます springの機能を理解したのでコード内での使用方法を見ていきましょう springはアニメーションのための素晴らしいツールなので SwiftUIのデフォルトとなっており withAnimationを呼び出すだけで始められますアニメーションのためにspringを明示的に使用することも簡単になりましたいくつかのspringプリセットを iOSで使われている springの値に基づいて組み込みましたどのようなパラメータを使用するか悩んだらこれらを使用すると良いでしょう
アニメーションが必要なところにプリセットを直接コード入力できますしかし必要なコンテキストに合わせることが重要なのでプリセットは変更を加えるスタート要素として使うこともできますプリセットを使用して持続時間を指定したりバウンス量を相対的に指定して増減することができますこれらのプリセットはアプリに springを導入する最適な方法ですさらに上を目指すのであれば .springアニメーションを使って完全にカスタマイズもできますこれによりspringの持続時間と bounceを完全に指定できますバウンス値の範囲は-1.0から1.0です同じパラメータを使用して UIKitやCore Animationで springアニメーションを作成することもできます
さらに先に進みたいのであれば別の新しいspringツールがあります SwiftUIにSpringモデル型を追加しパラメータを含むspringの表現を作成できるようにしましたこれによりパラメータを指定する異なる方法の間でパラメータをプログラムで変換できます springアニメーションとしてMassや stiffnessやdampingを設定し直接使用することもできますしかし本当に自分で変換を行いたい場合は次の方程式でbounceと持続時間の値を Massやstiffnessや dampingに変換できますパラメータを変換するだけでなく springモデルを使用して独自の高度なspring動作構築もできます springのメソッドを呼び出すことで組み込まれたspring評価計算を自分で行えます例えばvalueを呼び出して springの位置を取得できますターゲットを与えるだけですつまり springが向かっている方向と評価したい時間を指定するだけです同じ入力を velocityメソッドで使用することで springの速度を評価できます独自のコードで簡単にspringを使うことができシミュレーションやこの動画に出てきたようなグラフの値を取得するのに便利です独自のアニメーション作成もできます springモデルを呼び出して入力や出力を変更してカスタマイズできますカスタムアニメーションについては「Explore SwiftUI animation」をご視聴ください最後に説明するのは springに使用するパラメータの選び方についてですあなたのアニメーションに最適な値を選ぶにはあなたが好きなテンポのduration値を見つけると良いですそれが決まったらbounce量を調整しアニメーションの雰囲気や個性を決めます bounce値の違いによって質感が変わることがわかるでしょう 0のbounceは滑らかで緩やかな変化です 15%位の小さなbounceはあまり弾みはないですが余韻は少し勢いがあるように感じます 30％など値が大きくなると顕著な弾みが感じられさらに踏み込めばかなり極端な弾みになりますしかし0.4より高い値を使用すると UI要素としては大げさかもしれないので慎重になるべきですでは実際にどの値を使うべきでしょうか？わからない場合は 0のspringを使用しましょうこれはデフォルト値でもありますこれにより最も汎用性の高いspringができますもう少し遊び心を持たせたい場合は bounceを追加できます bounceはアニメーションをより物理的に感じさせたい場合にも良いです例えなジェスチャーの最後などですそして留意すべきことは一貫性ですあなたのアプリの個性について考えましょう真面目なのか遊び心があるのかリラックスした感じか急かしい感じなのか UIのフィーリングと一致する spring値を選択しましょう以上アニメーションでの springの説明でした弾まないspringでも素晴らしいアニメーションが作れますそのまま使える新しい springのプリセットもありますが必要な場合はdurationとbounceを使ってカスタマイズもできます大事なのは今回知った springが持つユニークな長所を活用してあなたのアプリが流動的で楽しいものになりますようにありがとう ♪ ♪

18:00 - Spring Preset
```
withAnimation(.snappy) {
  // Changes
}
```
18:15 - Spring Preset with Custom Duration
```
withAnimation(.snappy(duration: 0.4)) {
  // Changes
}
```

18:21 - Spring Preset with Custom Bounce

withAnimation(.snappy(extraBounce: 0.1)) {
  // Changes
}

18:37 - Custom Spring

withAnimation(.spring(duration: 0.6, bounce: 0.2)) {
  // Changes
}

// UIKit
UIView.animate(duration: 0.6, bounce: 0.2) {
  // Changes
}

// Core Animation
let animation = CASpringAnimation(perceptualDuration: 0.6, bounce: 0.2)

18:57 - Spring Model

let mySpring = Spring(duration: 0.5, bounce: 0.2)
let (mass, stiffness, damping) = (mySpring.mass, mySpring.stiffness, mySpring.damping)

19:16 - Spring Model Animation

let otherSpring = Spring(mass: 1, stiffness: 100, damping: 10)
withAnimation(.spring(otherSpring)) {
    // Changes
}

19:26 - Spring Parameter Conversion

mass = 1

stiffness = (2π ÷ duration)^2

damping = 1 - 4π × bounce ÷ duration, bounce ≥ 0
          4π ÷ (duration + 4π × bounce), bounce < 0

19:35 - Evaluating Spring Model

let mySpring = Spring(duration: 0.4, bounce: 0.2)
let value = mySpring.value(target: 1, time: time)
let velocity = mySpring.velocity(target: 1, time: time)

20:15 - Custom Spring Animation

func animate<V: VectorArithmetic>(
    value: V, time: Double, context: inout AnimationContext<V>
) -> V? {
    spring.value(
        target: value, initialVelocity: context.initialVelocity,
        time: effectiveTime(time: time, context: context))
}

20:34 - Spring with No Bounce

withAnimation(.spring(duration: 0.5)) {
    isActive.toggle()
}

21:07 - Spring with Small Bounce

withAnimation(.spring(duration: 0.5, bounce: 0.15)) {
    isActive.toggle()
}

21:14 - Spring with Large Bounce

withAnimation(.spring(duration: 0.5, bounce: 0.3)) {
    isActive.toggle()
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23