リモート開発メインのソフトウェア開発企業のエンジニアブログです

Flutter の物理シミュレーションを理解する ‐ ③ SpringSimulation

このシリーズでは、Flutter の各種物理シミュレーションについて解説しています。

第3回となるこの記事では、ばねをシミュレートする SpringSimulation について解説します。

Playground

例によって実際に挙動を触って試すことのできるデモを用意しました。

https://dartpad.dev/?channel=main&id=6507e37ec676de3dd04c5403d06f325b

今回はより直感的にばねの挙動が理解できるように、ドラッグによるインタラクションを実装しています。

左下のテキストフィールドで調整できるパラメータについて簡単に解説します。

  • Mass (質量): この値が大きいほど、ばねについている重り (ボックス) の質量がより大きくなります。
  • Stiffness (ばね定数): ざっくり言えば、この値が大きいほどばねを伸び縮みさせるのにより大きな力が必要になります。大きいほどばねの線が太くなると考えると直感的でしょうか。
  • Damping (減衰係数): ざっくり言えば、この値が大きいほど振動がより早く減衰します。空間がなんらかの液体で満たされているとして、減衰係数が大きいほどその液体の粘度が高いと想像すると直感的でしょうか。

また、”Damping ratio” のチェックボックスをオンにすることで、”Damping” のフィールドが “Damping ratio” に変わります。こちらは減衰比 (ζ) を表すもので、

  • ζ = 0 のとき: 減衰せずに振動し続ける (不減衰振動)
  • 0 < ζ < 1 のとき: 1 に近づくほど早く減衰する (減衰振動、不足減衰)
  • ζ = 1 のとき: 振動しない (臨界減衰)
  • ζ > 1 のとき: 振動しない (過減衰)

のような挙動になります。

Moba Pro

SpringSimulation クラス

ここからはシミュレーションに用いるクラス群を紹介していきます。まずはシミュレーション自体を表す SpringSimulation です。コンストラクタ定義は以下のようになっています。

SpringSimulation(
  SpringDescription spring,
  double start,
  double end,
  double velocity, {
  bool snapToEnd = false,
  Tolerance tolerance = Tolerance.defaultTolerance,
})

spring

SpringDescription のインスタンスを渡します。詳しくは後述します。

start

シミュレーションの開始位置で、単位は任意です。「任意の単位」については第1回の記事で説明しています。

end

start と同様に、シミュレーションの終了位置です。

velocity

シミュレーション開始時の速度で、単位は L/T とされています。L は移動量の単位で、startend と同じです。T は任意の時間単位ですが、AnimationController でシミュレーションを行う場合は秒になります。

snapToEnd

比較的新しく追加されたパラメータで、記事執筆時点で stable channel のコードにはまだありません (master ブランチのコードはこちら) 。Cupertino widgets (iOS のスタイルを再現するウィジェット群) でアニメーションに SpringSimulation を取り入れて、より本家の iOS に近づけようとする動きがあったのですが、その過程でこのパラメータが追加されたようです。

このフラグが真の場合、シミュレーション終了時の値は必ず end に等しくなります。通常は、シミュレーションの都合上、終了時の値が厳密には end と等しくならないことがあります。要素の遷移アニメーションにこの SpringSimulation を利用する場合など、必ず決まった値でシミュレーションが終了してほしいときに便利かもしれません。

tolerance

tolerance (許容誤差) については第1回の記事を参照してください。

SpringDescription クラス

SpringSimulation に渡す必要のある SpringDescription は、シミュレートする『ばね』とそれに関連する要素の性質を表すクラスです。最初にお見せしたデモのテキストフィールドで調整できる値は、この SpringDescription のパラメータになっています。

コンストラクタは2種類あります。パラメータの性質についてはデモのところで説明したので、ここでは簡単に概要のみを記します。

デフォルトコンストラクタ

const SpringDescription({
  required double mass,
  required double stiffness,
  required double damping,
})
  • mass:
    • 質点の質量 (m)
    • 単位: 任意
  • stiffness:
    • ばね定数 (k)
    • 単位: M/T² (前述の質量の単位を M、時間単位を T とした時)
  • damping:
    • 減衰係数 (c)
    • 単位: M/T (前述の質量の単位を M、時間単位を T とした時)

withDampingRatio

SpringDescription.withDampingRatio({
  required double mass,
  required double stiffness,
  double ratio = 1.0,
})

デフォルトコンストラクタの damping (減衰係数 c) が、こちらでは ratio (減衰比 ζ) に入れ替わっています。ratio は単位のない比率を表します。

まとめ

この SpringSimulation は、第1回の FrictionSimulation や第2回の GravitySimulation に比べると、Flutter 特有の要素といえるものは特になく、ばねの減衰振動のメカニズムを理解していればハマりポイントはなさそうです。とはいえその減衰振動自体がそれなりに難しいものなので、実際のアプリでばねの挙動を取り入れたいと思ったときは、パラメータを変えながら色々試してみるのがよいでしょう。

次回はその他雑多なシミュレーションをまとめて紹介する予定です。

← 前の投稿

次の投稿 →

Docker コンテナのボリュームの内容をバックアップして復元する方法

コメントを残す