Flutter_AnimationController_Pause

こんにちはEveryDaySoft代表の永田です。

今回はAnimationControllerのアニメーション中に一時停止する実装紹介とFlutterのcanvasで発生しているBugに対応するための取り組みを紹介します。

bugはなんなのか？画像の0度付近に青い色の値が表示されていますが、これがFlutter Canvasに発生しているbugです。

対応した挙動は、0度付近に色を上書きしていますが、記載したコードのように配列要素を回転数に応じて、設定しています。

    
    Paint circleStrokePainter = Paint()
      ..strokeWidth = data.circleStrokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.square
      ..shader = SweepGradient(colors: [
        colorSet,
        setCircleValue >= 1
            ? colorSet
            : data.circleRoundColor
      ]).createShader(
          Rect.fromCircle(center: size.center(Offset.zero),
                          radius: size.width / 2));

コード補完して、見た目上わからないようにしました。

コード補完前提の元に、逆回転のreverseも考慮した1millisecondsを多重回転で賄おうとすると、とても複雑化するので、？？*色の要素数millisecondsで対応するようにしました。といってもそんなめちゃくちゃ速いアニメーションはもはやアニメーションではありませんが、、。

高速スピードで一時停止させるかというと、以前の記事に記載している通り、スピードが速すぎると、値が飛び飛びになるので、アイデアとしては、一時停止したい付近の値になったら、指定した値を代入します。

挙動はこちら。値を様々に確認しましたが対応できていました。

先日まではbug補完している影響で、１ピクセル単位でアニメーションしたデザインがズレる挙動でした。調律する部分は使用側が設定する作りでしたが、内部ロジックで円の大きさによって自動的に調律するようにしました。高速スピードと多重回転、補完を入れた多重円の影響でライブラリー内のロジックは複雑化してしまいましたが、殆どの要件は賄えたと思います。

    if (controller.status == AnimationStatus.completed) {
      canvas.drawArc(
          Rect.fromCircle(
              center: size.center(Offset.zero),
              radius: size.width / 2),
          startAngle,
          (pi * 2 * value) -(tuningValue/data.circleSizeValue),
          false,
          paint);
    } else {
      canvas.drawArc(
          Rect.fromCircle(
              center: size.center(Offset.zero), radius: size.width / 2),
          startAngle,
          time <= data.circleLabelValue
              ? pi * 2 * (data.circleLabelValue >= 1 ?
          (data.circleLabelValue-data.circleLabelValue.floor()) :
          data.circleLabelValue) - (tuningValue/data.circleSizeValue)
              : pi * 2 * animation.value,
          false,
          paint);
    }

この円グラフは
ベース円(今回は灰色)
多重アニメーションに用いる２つの円
０度を補完するロジックの４重構造で対応しています。

罫線や、放物線アニメーションも考えていたのですが、2月〜は決算報告なども重なり内部ロジックの最適化を実施しました。縦横グラフも最適化し、縦横グラフに罫線UIを実装し、折れ線グラフも作成したら、ライブラリーとして公開しようと思います。

貴重なお時間お読みくださいまして、誠にありがとうございます。