Flutterの物理シミュレーションで遊んでみる
飛び入り登壇、資料などない状態だったのでDartPadで遊んだ様子をお届けした。
まずは普通のアニメーション
単なるAnimationController + CurvedAnimationでフェイクの自由落下+バウンドのアニメーション。
実用上は大抵こんな感じでなんとかなる。
物理シミュレーションを適用してみる
普通のアニメーションのサンプルの controller.forward()をcontroller.animateWith()にしたサンプル。
animateWith()メソッドによって、自由落下のシミュレーションであるGravitySimulationが適用されている。
アニメーションカーブでバウンドを表現しているため、これもまだギリギリフェイクだが、まぁ動きとしてはそれっぽい。
シミュレーション単体の結果を見たいときは、animation の宣言を消すことで可視化できる。
物理シミュレーションを活用したパーティクル表現
発表内で最後に見せたアニメーション作例。
FABを押すと、画面中央上部に円が出現し、それがランダムな方向に移動しつつ自由落下していく。
物理シミュレーションを活用することで、こういったエフェクトが実装できるよ的な話をした。
おまけ
発表ではボツになった、「バウンドの表現もシミュレーションを適用したらどうなるのか?」を試した例。
当初この内容について話すつもりだったが、最初のステップでCurve付きのシミュレーション適用結果を実行してみたら、案外挙動がそれっぽかったので、そのまま「まぁこういうことができますよ☺」みたいな流れで終わらせてしまった。
またこの例を実行してみるとわかるが、少し挙動に違和感が残る結果となっている。
やっていることとしては、
自由落下のアニメーションが終わる
終わる寸前の速度を記録しておき、その速度のベクトルを逆方向に向けた状態で再度アニメーションを走らせる
反発係数を設定することでどんどん減衰していく
これでいい感じになる予定だったが、どうやってもアニメーションが終わったときに少しディレイが挟まってしまい、いい感じのバウンドにはならなかった。