Timer 颤振-闪烁按钮

我需要提醒用户注意一个按钮。首先想到的是添加眨眼动画。我真的不知道如何做到这一点，但我尝试使用以下代码使其工作：

Timer timer = new Timer(new Duration(seconds: 1), () {
  //basic logic to change the color variable here
  setState(() {});
});

这很简单，每秒调用

setState

，然后再次创建小部件

但它不工作，计时器只调用一次。除此之外，在

计时器中调用
setState
对我来说似乎是错误的

有更好的方法吗？
您可以使用
AnimationController
和
FadeTransition
小部件轻松实现这一点，下面是代码：

  class MyBlinkingButton extends StatefulWidget {
    @override
    _MyBlinkingButtonState createState() => _MyBlinkingButtonState();
  }

  class _MyBlinkingButtonState extends State<MyBlinkingButton>
      with SingleTickerProviderStateMixin {
    AnimationController _animationController;

    @override
    void initState() {
      _animationController =
          new AnimationController(vsync: this, duration: Duration(seconds: 1));
      _animationController.repeat(reverse: true);
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
      return FadeTransition(
        opacity: _animationController,
        child: MaterialButton(
          onPressed: () => null,
          child: Text("Text button"),
          color: Colors.green,
        ),
      );
    }

    @override
    void dispose() {
      _animationController.dispose();
      super.dispose();
    }
  }


结果:

您也可以通过这种方法实现这一点。
我的逻辑有点不同，我正在使用alternate制作动画。一旦动画在前进中完成，我就会后退

对视力有好处的

即：

向前->向后

向后->向前

等等

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Wordpress App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new BlinkAnimation(),
    );
  }
}

class BlinkAnimation extends StatefulWidget {
  @override
  _BlinkAnimationState createState() => _BlinkAnimationState();
}

class _BlinkAnimationState extends State<BlinkAnimation>
    with SingleTickerProviderStateMixin {
  Animation<Color> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    final CurvedAnimation curve =
        CurvedAnimation(parent: controller, curve: Curves.linear);
    animation =
        ColorTween(begin: Colors.white, end: Colors.blue).animate(curve);
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
      setState(() {});
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text('Blink Animation'),
      ),
      body: new Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) {
            return new Container(
              child: new RaisedButton(
                color: animation.value,
                onPressed: () {
                  controller.forward();
                },
                child: Text('Blink Animation'),
              ),
            );
          },
        ),
      ),
    );
  }

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

导入“包装：颤振/材料.省道”；
导入“package:flatter/animation.dart”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“Wordpress应用程序”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新动画（），
);
}
}
类BlinkAnimation扩展StatefulWidget{
@凌驾
_BlinkAnimationState createState（）=>\u BlinkAnimationState（）；
}
类_BlinkAnimationState扩展状态
使用SingleTickerProviderStateMixin{
动画；
动画控制器；
initState（）{
super.initState（）；
控制器=动画控制器(
持续时间：常量持续时间（毫秒：500），vsync:this；
最终曲线化曲线=
曲线动画（父对象：控制器，曲线：Curves.linear）；
动画=
ColorTween（开始：Colors.white，结束：Colors.blue）。动画（曲线）；
animation.addStatusListener（（状态）{
如果（状态==AnimationStatus.completed）{
controller.reverse（）；
}else if（状态==AnimationStatus.discomered）{
controller.forward（）；
}
setState（（）{}）；
});
controller.forward（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：新文本（“闪烁动画”），
),
正文：新中心(
子对象：动画生成器(
动画：动画，
生成器：（BuildContext上下文，小部件子项）{
退回新货柜(
孩子：新升起的按钮(
颜色：animation.value，
已按下：（）{
controller.forward（）；
},
子：文本（“闪烁动画”），
),
);
},
),
),
);
}
处置{
controller.dispose（）；
super.dispose（）；
}
}
这太棒了！非常感谢你，迭戈，坏主意。使用
AnimatedWidget
或
AnimatedBuilder
而不是执行此类
setState
调用这很完美，但我会将其与下面的答案混合使用，以获得更平滑的结果使用SingleTickerProviderStateMixin而不是TickerProviderStateMixin，因为在类只需要一个Ticker的情况下，它稍微更有效。这里，在类的生命周期中创建了一个AnimationController。使用
\u AnimationController.repeat（反向：true）可以获得更好的效果您的逻辑也非常有效。谢谢你的回答。效果很好，我认为使用Curves.easeInOut而不是Curves.linear看起来更好。但可能这只是个人喜好。请在你的答案中添加gif。与设计问题相关的答案应包括GIF和屏幕截图。根据您的需要，您可能希望对迭戈的答案应用
曲线
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Wordpress App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new BlinkAnimation(),
    );
  }
}

class BlinkAnimation extends StatefulWidget {
  @override
  _BlinkAnimationState createState() => _BlinkAnimationState();
}

class _BlinkAnimationState extends State<BlinkAnimation>
    with SingleTickerProviderStateMixin {
  Animation<Color> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    final CurvedAnimation curve =
        CurvedAnimation(parent: controller, curve: Curves.linear);
    animation =
        ColorTween(begin: Colors.white, end: Colors.blue).animate(curve);
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
      setState(() {});
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text('Blink Animation'),
      ),
      body: new Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) {
            return new Container(
              child: new RaisedButton(
                color: animation.value,
                onPressed: () {
                  controller.forward();
                },
                child: Text('Blink Animation'),
              ),
            );
          },
        ),
      ),
    );
  }

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