2021.10.12.火曜日開発ログ

3306 ワード
flutter テキストリンク

🚪 Closed


🙆‍♀️ Exception caught by animation library


Failed assertion: line xxxx pos xx: '_lifecycleState != _ElementLifecycle.defunct': is not true.
仕事は正常ですが、その間違いは気が狂ったように降りて、たくさん食べて転がりました.そのため、consoleでログを見るのも不便です.
エラーコード部分は以下の通りです.
animation.addListener(() {
  setState(() {}); //update UI on every animation value update
});
setState()は、反応が遅い不良使用例である.
これを4つの動画に掛けて、実際に使っているのは6つで、スクロールしか食べられません.

✔️ Solved

AnimatedWidgetは、addListener()とsetStateの代わりにアニメーションを支援します.
従来のコードは6つあり、以下のPositioned()である.
Positioned(
    bottom: 10,
    right: animation.value,
    child: ClipPath(
      clipper: MyWaveClipper(),
      child: Opacity(
        opacity: 0.35,
        child: Container(
          color: EmotionColor
              .getDarkColorFor(
              randomEmotion),
          width: 900,
          height: 200,
        ),
      ),
    ),),
下図に示すように、それぞれの水波の異なる部分とアニメーションをパラメータとしたAnimatedWidgetを作成し、上のPositioned()を返します.
class AnimatedWave extends AnimatedWidget {
  final Color color;
  final double opacity;
  final double bottom;
  /// 0: left
  /// 1: right
  final int direction;

  const AnimatedWave({
    Key key,
    Animation<double> animation,
    this.bottom,
    this.opacity,
    this.color,
    this.direction,
  }): super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
  final animation = listenable as Animation<double>;
  double left, right;
  if (direction == 1) {
    right = animation.value;
  } else {
    left = animation.value;
  }
    return Positioned(
      bottom: bottom,
      left : left,
      right: right,
      child: ClipPath(
        clipper: MyWaveClipper(),
        child: Opacity(
          opacity: opacity,
          child: Container(
            color: color,
            width: 900,
            height: 200,
          ),
        ),
      ),
    );
  }
}
また、呼び出し部分では、以下の変更部分のみをコード表示に変換します.
AnimatedWave(
  animation: animation,
  bottom: 10,
  opacity: 0.35,
  color: EmotionColor.getDarkColorFor(randomEmotion),
  direction: 1,
),
今はコンソールの窓が静かになりましたハハ
(私はこれをするために、前回アニメの修正バージョンを作りました...私のBig Pictureが成功して、とても嬉しいです)

ヘルプリンク

  • Flutter Laggy Animations: How Not To setState - Medium
  • Animations tutorial(Simplifying with AnimatedWidget) - Flutter
    • アンドロイド学習ノート(二)基礎知識学習
    [チャドチップ]あなたはそれを書いた知っている.でもどこ?😬