效果图

代码

1. class MutipleWidget extends StatefulWidget {

2. final double bigRadius;

3. final Color color;

4. final String label;

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

7. : super(key: key);

9. @override

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

11. }

13. class _MutipleWidgetState extends State<MutipleWidget>

14. with SingleTickerProviderStateMixin {

15. double bigRadios;

17. AnimationController _animationController;

19. Animation<double> _radioAnimation;

21. Animation<double> _colorAnimation;

23. double _begin = 1;

25. double _end = 0.3;

27. @override

28. void initState() {

29. // TODO: implement initState

30. super.initState();

31. bigRadios = this.widget.bigRadius;

33. _animationController = new AnimationController(

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

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

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

38. ..addListener(() {

39. setState(() {});

40. });

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

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

44. ..addListener(() {

45. setState(() {});

46. })

47. ..addStatusListener((sataus) {

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

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

50. _animationController.reverse();

51. });

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

53. _animationController.forward();

54. }

55. });

57. _animationController.forward();

58. }

60. @override

61. void deactivate() {

62. // TODO: implement deactivate

63. super.deactivate();

64. _animationController.stop();

65. }

67. @override

68. void dispose() {

69. // TODO: implement dispose

70. super.dispose();

71. _animationController.dispose();

72. }

74. @override

75. Widget build(BuildContext context) {

76. return Container(

77. height: bigRadios,

78. width: bigRadios,

79. child: Stack(

80. alignment: Alignment.center,

81. children: <Widget>[

82. //运动的圆

83. Container(

84. height: bigRadios + _radioAnimation.value,

85. width: bigRadios + _radioAnimation.value,

86. decoration:

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

88. child: Container(

89. margin: EdgeInsets.all(40),

90. decoration: BoxDecoration(

91. shape: BoxShape.circle,

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

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

94. : this.widget.color),

95. ),

96. ),

98. //定死不动的的圆

99. Container(

100. height: _getSmall(bigRadios),

101. width: _getSmall(bigRadios),

102. decoration:

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

104. child: Padding(

105. padding: EdgeInsets.all(15),

106. child: Container(

107. decoration: BoxDecoration(

108. shape: BoxShape.circle,

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

110. ),

111. ),

112. ),

113. ],

114. ),

115. );

116. }

118. double _getSmall(double radios) {

119. return radios - 40;

120. }

121. }

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