こんにちは EveryDaySoft代表の永田です。
2月の3連休はFlutterの自作グラフライブラリーの調査、実装をしていました。
グラフアニメーションを実装する上で、AnimationControllerという機能を使用しています。
今回記事にする内容はアニメーションを行うスピード設定です。
なおVersion、環境の違いで同じ挙動にならない場合はご了承願います。iOS、Androidの各挙動で同じ動作を確認しています。
アニメーションを行うにはAnimationController内にあるdurationというプロパティに値を設定します。
値はDuration型で、minutes、seconds、milliseconds、microsecondsを選択し設定します。
0.1秒の設定
0.000001秒の設定
0.1秒での動作
正しく動作する挙動
対応したコード
アニメーションが終わったら、reset関数を実行してます。animationControllerのvalueに値を設定しても同じ挙動になります。valueに1.0の値を代入すると、もう一度、forward関数で再生実行してもアニメーションしません。完了した値になるからです。reset関数はスーパークラスでは0.0の値を設定してます。スーパークラスのコメントにはこのような挙動になるとは書いてませんが、アニメーション完成後、値を代入すると、キューに残っているデータが表示できるのではないか？と考えています。なので、さらにvalueに0.0の値を設定するとグラフUIはクリアーされ、画面には灰色のUIのみなります。
アニメーションが終わったら、残っているデータを表示する方法で上手くいきました。幸いアニメーションの時間が長い方法でも上手くいきました。
通常はアニメーション中に表示内容をどうするか？考えると思いますが、データの書き込みは必ずしてくれているので、その内容をどのように表示するかを工夫して考えてこの発想になりました。アニメーションスピードで上手くいかない場合は参考になればと思います。
貴重なお時間お読み下さいまして、誠にありがとうございます。