【Flutter】闪烁动画提示

一、基础组件

import 'package:flutter/material.dart';

//容器闪烁
class ContainerFlash extends StatefulWidget {
  final Widget child;
  final bool play; //是否播放
  final int duration; //动画时长(毫秒)
  final double speed; //动画速度
  final Color initColor; //初始颜色
  final Color flashColor; //闪烁颜色
  final bool loop; //是否循环播放
  ContainerFlash(
      {Key key,
      this.child,
      this.play = false,
      this.duration = 2000,
      this.speed = 1.0,
      this.initColor,
      this.flashColor,
      this.loop = false})
      : super(key: key);

  @override
  _ContainerFlashState createState() => _ContainerFlashState();
}

class _ContainerFlashState extends State<ContainerFlash>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  int _singleAniPeriod; //单次动画时长

  @override
  void initState() {
    super.initState();

    //控制单次动画时长实现动画速度变化
    _singleAniPeriod = (1000 / widget.speed).truncate();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: _singleAniPeriod),
    );

    Animation curveAnimation =
        new CurvedAnimation(parent: _animationController, curve: Curves.linear);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(curveAnimation);
  }

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

  @override
  void didUpdateWidget(ContainerFlash oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
    if (_animationController != null) {
      if (widget.play) {
        this._playAnimation();
      } else {
        _animationController.stop();
        _animationController.reset();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ContainerFlashAnimation(
          _animation, widget.child, widget.initColor, widget.flashColor),
    );
  }

  //播放动画
  _playAnimation() {
    _animationController.reset();
    _animationController.repeat();
    if (widget.loop) return;
    Future.delayed(Duration(milliseconds: widget.duration), () {
      if (_animationController != null) {
        _animationController.stop();
        _animationController.reset();
      }
    });
  }
}

class ContainerFlashAnimation extends AnimatedWidget {
  final Widget child;
  final Color initColor;
  final Color flashColor;
  ContainerFlashAnimation(
      Animation animation, this.child, this.initColor, this.flashColor)
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    Animation animation = listenable;
    int numVal = (animation.value * 10).truncate();
    bool active = numVal % 2 == 1;
    Color curColor = active
        ? (flashColor != null ? flashColor : Colors.white.withOpacity(0.2))
        : (initColor != null ? initColor : Colors.transparent);
    return Container(
      padding: EdgeInsets.all(4),
      decoration: BoxDecoration(
          color: curColor, borderRadius: BorderRadius.all(Radius.circular(4))),
      child: child != null ? child : Container(),
    );
  }
}

二、组件使用

import 'package:flutter/material.dart';
import './container_flash.dart';// 引入组件

class Example extends StatefulWidget {
  const Example({Key key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  bool _flash = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('示例'),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        color: Colors.blue[900],
        width: double.infinity,
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                ContainerFlash(
                  play: _flash,
                  child: Text(
                    '请选择',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                ContainerFlash(
                  play: _flash,
                  duration: 5000, //持续时长
                  flashColor: Colors.orange.withOpacity(0.4), //闪烁颜色
                  child: Text(
                    '注意事项',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                ContainerFlash(
                  play: _flash,
                  speed: 2.0, //动画速度
                  child: FlatButton(
                    onPressed: () {},
                    color: Colors.orange,
                    child: Text('按钮'),
                  ),
                ),
                ContainerFlash(
                  play: _flash,
                  loop: true, //是否循环播放
                  child: Text(
                    '循环闪烁',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                  onPressed: () {
                    _flash = true;
                    if (mounted) {
                      setState(() {});
                    }
                  },
                  color: Colors.green,
                  child: Text('闪烁'),
                ),
                SizedBox(width: 20),
                FlatButton(
                  onPressed: () {
                    _flash = false;
                    if (mounted) {
                      setState(() {});
                    }
                  },
                  color: Colors.red,
                  child: Text('停止闪烁'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

三、效果演示