效果圖
代碼
class MutipleWidget extends StatefulWidget { final double bigRadius; final Color color; final String label; const MutipleWidget({Key key, this.bigRadius, this.color, this.label}) : super(key: key); @override _MutipleWidgetState createState() => _MutipleWidgetState();}class _MutipleWidgetState extends State<MutipleWidget> with SingleTickerProviderStateMixin { double bigRadios; AnimationController _animationController; Animation<double> _radioAnimation; Animation<double> _colorAnimation; double _begin = 1; double _end = 0.3; @override void initState() { // TODO: implement initState super.initState(); bigRadios = this.widget.bigRadius; _animationController = new AnimationController( vsync: this, duration: Duration(milliseconds: 1000)); _colorAnimation = new Tween<double>(begin: _begin, end: _end).animate( CurvedAnimation(parent: _animationController, curve: Curves.easeIn)) ..addListener(() { setState(() {}); }); _radioAnimation = new Tween<double>(begin: 0, end: -60).animate( CurvedAnimation(parent: _animationController, curve: Curves.easeIn)) ..addListener(() { setState(() {}); }) ..addStatusListener((sataus) { if (sataus == AnimationStatus.completed) { Future.delayed(new Duration(milliseconds: 0)).then((value) { _animationController.reverse(); }); } else if (sataus == AnimationStatus.dismissed) { _animationController.forward(); } }); _animationController.forward(); } @override void deactivate() { // TODO: implement deactivate super.deactivate(); _animationController.stop(); } @override void dispose() { // TODO: implement dispose super.dispose(); _animationController.dispose(); } @override Widget build(BuildContext context) { return Container( height: bigRadios, width: bigRadios, child: Stack( alignment: Alignment.center, children: <Widget>[ //運動的圓 Container( height: bigRadios + _radioAnimation.value, width: bigRadios + _radioAnimation.value, decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.white10), child: Container( margin: EdgeInsets.all(40), decoration: BoxDecoration( shape: BoxShape.circle, color: _animationController.status == AnimationStatus.forward ? this.widget.color.withOpacity(_colorAnimation.value) : this.widget.color), ), ), //定死不動的的圓 Container( height: _getSmall(bigRadios), width: _getSmall(bigRadios), decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.white24), child: Padding( padding: EdgeInsets.all(15), child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: this.widget.color.withOpacity(0.5)), ), ), ), ], ), ); } double _getSmall(double radios) { return radios - 40; }}
ios
微信
ide
學習
flex
ui
this
spa
.net
code
本文分享自微信公衆號 - Flutter學習簿（gh_d739155d3b2c）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。