Flutter 动画示例之呼吸灯效果

2019/12/13 19:38
阅读数 867

效果图


代码

    
  
  
  1. class MutipleWidget extends StatefulWidget {

  2. final double bigRadius;

  3. final Color color;

  4. final String label;


  5. const MutipleWidget({Key key, this.bigRadius, this.color, this.label})

  6. : super(key: key);


  7. @override

  8. _MutipleWidgetState createState() => _MutipleWidgetState();

  9. }


  10. class _MutipleWidgetState extends State<MutipleWidget>

  11. with SingleTickerProviderStateMixin {

  12. double bigRadios;


  13. AnimationController _animationController;


  14. Animation<double> _radioAnimation;


  15. Animation<double> _colorAnimation;


  16. double _begin = 1;


  17. double _end = 0.3;


  18. @override

  19. void initState() {

  20. // TODO: implement initState

  21. super.initState();

  22. bigRadios = this.widget.bigRadius;


  23. _animationController = new AnimationController(

  24. vsync: this, duration: Duration(milliseconds: 1000));


  25. _colorAnimation = new Tween<double>(begin: _begin, end: _end).animate(

  26. CurvedAnimation(parent: _animationController, curve: Curves.easeIn))

  27. ..addListener(() {

  28. setState(() {});

  29. });


  30. _radioAnimation = new Tween<double>(begin: 0, end: -60).animate(

  31. CurvedAnimation(parent: _animationController, curve: Curves.easeIn))

  32. ..addListener(() {

  33. setState(() {});

  34. })

  35. ..addStatusListener((sataus) {

  36. if (sataus == AnimationStatus.completed) {

  37. Future.delayed(new Duration(milliseconds: 0)).then((value) {

  38. _animationController.reverse();

  39. });

  40. } else if (sataus == AnimationStatus.dismissed) {

  41. _animationController.forward();

  42. }

  43. });


  44. _animationController.forward();

  45. }


  46. @override

  47. void deactivate() {

  48. // TODO: implement deactivate

  49. super.deactivate();

  50. _animationController.stop();

  51. }


  52. @override

  53. void dispose() {

  54. // TODO: implement dispose

  55. super.dispose();

  56. _animationController.dispose();

  57. }


  58. @override

  59. Widget build(BuildContext context) {

  60. return Container(

  61. height: bigRadios,

  62. width: bigRadios,

  63. child: Stack(

  64. alignment: Alignment.center,

  65. children: <Widget>[

  66. //运动的圆

  67. Container(

  68. height: bigRadios + _radioAnimation.value,

  69. width: bigRadios + _radioAnimation.value,

  70. decoration:

  71. BoxDecoration(shape: BoxShape.circle, color: Colors.white10),

  72. child: Container(

  73. margin: EdgeInsets.all(40),

  74. decoration: BoxDecoration(

  75. shape: BoxShape.circle,

  76. color: _animationController.status == AnimationStatus.forward

  77. ? this.widget.color.withOpacity(_colorAnimation.value)

  78. : this.widget.color),

  79. ),

  80. ),


  81. //定死不动的的圆

  82. Container(

  83. height: _getSmall(bigRadios),

  84. width: _getSmall(bigRadios),

  85. decoration:

  86. BoxDecoration(shape: BoxShape.circle, color: Colors.white24),

  87. child: Padding(

  88. padding: EdgeInsets.all(15),

  89. child: Container(

  90. decoration: BoxDecoration(

  91. shape: BoxShape.circle,

  92. color: this.widget.color.withOpacity(0.5)),

  93. ),

  94. ),

  95. ),

  96. ],

  97. ),

  98. );

  99. }


  100. double _getSmall(double radios) {

  101. return radios - 40;

  102. }

  103. }


本文分享自微信公众号 - Flutter学习簿(gh_d739155d3b2c)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部