Flutterの物理シミュレーションで遊んでみる

飛び入り登壇、資料などない状態だったのでDartPadで遊んだ様子をお届けした。

まずは普通のアニメーション

実用上は大抵こんな感じでなんとかなる。

物理シミュレーションを適用してみる

アニメーションカーブでバウンドを表現しているため、これもまだギリギリフェイクだが、まぁ動きとしてはそれっぽい。

物理シミュレーションを活用したパーティクル表現

発表内で最後に見せたアニメーション作例。

FABを押すと、画面中央上部に円が出現し、それがランダムな方向に移動しつつ自由落下していく。

物理シミュレーションを活用することで、こういったエフェクトが実装できるよ的な話をした。

おまけ

発表ではボツになった、「バウンドの表現もシミュレーションを適用したらどうなるのか？」を試した例。

当初この内容について話すつもりだったが、最初のステップでCurve付きのシミュレーション適用結果を実行してみたら、案外挙動がそれっぽかったので、そのまま「まぁこういうことができますよ☺」みたいな流れで終わらせてしまった。

またこの例を実行してみるとわかるが、少し挙動に違和感が残る結果となっている。

やっていることとしては、

自由落下のアニメーションが終わる

終わる寸前の速度を記録しておき、その速度のベクトルを逆方向に向けた状態で再度アニメーションを走らせる

反発係数を設定することでどんどん減衰していく

これでいい感じになる予定だったが、どうやってもアニメーションが終わったときに少しディレイが挟まってしまい、いい感じのバウンドにはならなかった。