android - Flutter 动画不褪色(它在闪烁)

Question

我正在关注关于 flutter 的动画教程:https://flutter.io/tutorials/animation/#animationcontroller ，我正在尝试让一个图标在紫色和橙色之间淡入淡出。不幸的是，我所做的只是获取一个blink 图标，这看起来非常令人沮丧，因为这不是 ColorTween 类的定义方式。来自文档:

We recommend that you do not pass Colors.transparent as begin or end if you want the effect of fading in or out of transparent. Instead prefer null. Colors.transparent refers to black transparent and thus will fade out of or into black which is likely unwanted.

https://docs.flutter.io/flutter/animation/ColorTween/ColorTween.html

我推断这意味着衰落是“开箱即用”的。但是，我也使用 CurvedAnimation 类对此进行了测试，它仍然闪烁。我还测试了一个文本框，认为它正在加载图标的事实可能会以某种方式搞砸它。但是，文本值也在橙色和紫色之间闪烁。在下面的代码中，我将它反转动画 - 我也尝试将其撕掉，但这并不影响闪烁。我认为它可能与我设置状态的方式有关，但我不确定。

我试图将以下代码作为基础的主要教程示例来自此处:https://raw.githubusercontent.com/flutter/website/master/_includes/code/animation/animate3/main.dart .

请参阅下面的代码以了解我的实现。任何建议将不胜感激。

class CloudAnimation1 extends StatefulWidget {

  @override
  CloudAnimation1State createState() => new CloudAnimation1State();
}

class CloudAnimation1State extends State<CloudAnimation1> with SingleTickerProviderStateMixin {

  Animation<Color> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    final Animation curve = new CurvedAnimation(parent: controller, curve: Curves.easeOut);
    animation = new ColorTween(begin: Colors.orange, end: Colors.purple).animate(curve);


    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
      setState(() {
        // the animation object’s value is the changed state
      });
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Row(
        children: <Widget>[
          new Text("hello there sailor",
              style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0, color: animation.value)),
          new Icon(FontAwesomeIcons.cloud, color: animation.value, size: 40.0)
        ],
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }

}

Answer 1

您需要创建一个 AnimatedIcon 来实际处理动画状态。

class AnimatedIcon extends AnimatedWidget {
  final IconData icon;

  AnimatedIcon({Key key, Animation<Color> animation, this.icon})
      :super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<Color> animation = listenable;
    return new Row(
        children: <Widget>[
          new Text("hello there sailor",
              style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0, color: animation.value)),
          new Icon(icon, color: animation.value, size: 40.0)
        ],
      );
  }
}

然后您可以将 CloudAnimation1State 中的构建替换为

@override
Widget build(BuildContext context) {
  return new Container(
    child: new AnimatedIcon(
      animation: animation,
      icon: Icons.ac_unit,
    ),
  );
}

然后移除动画状态监听器中的空setState。

---

或者……

闪烁的原因是因为 animation.addStatusListener 仅在动画状态更改时调用，而不是在每次更新时调用。 AnimatedWidget 只是包装和抽象监听滴答声。

将以下代码添加到您的initState

animation.addListener(() => setState((){}));

此回调监听动画的每个滴答声并将导致小部件重新呈现。由于您希望在每次勾选时重绘此小部件的所有子项，因此这是有道理的。如果您只想重绘一些子项，您可能希望将它们包装在 AnimatedWidgets 中。

您仍然需要删除 addStatusListener 中的 setState，因为它对于新的监听器来说是多余的。