关于flutter:Android进阶Flutter-雷达扫描效果Flutter旋转扫描

效果图：

1 .测试Demo启动文件

main() {  runApp(MaterialApp(    home: SignSwiperPage(),  ));}class SignSwiperPage extends StatefulWidget {  @override  _SignSwiperPageState createState() => _SignSwiperPageState();}class _SignSwiperPageState extends State<SignSwiperPage>    with SingleTickerProviderStateMixin {}

接下来的代码都在 _SignSwiperPageState中编写

2 .动画控制器用来实现旋转

//动画控制器  AnimationController _animationController;  @override  void initState() {    super.initState();    //创立    _animationController = new AnimationController(        vsync: this, duration: Duration(milliseconds: 2000));    //增加到事件队列中    Future.delayed(Duration.zero, () {      //动画反复执行      _animationController.repeat();    });  }  @override  void dispose() {    //销毁    _animationController.dispose();    super.dispose();  }

3 .旋转扫描成果

@override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Swiper Demo"),      ),      backgroundColor: Colors.white,      //居中      body: Center(        //层叠布局        child: Stack(          children: [            //第一层的背景 圆形剪裁            ClipOval(              child: Container(                width: 200,                height: 200,                color: Colors.green,              ),            ),            //第二层的扫描            buildRotationTransition(),          ],        ),      ),    );  }

RotationTransition用来实现旋转动画

RotationTransition buildRotationTransition() {    //旋转动画     return RotationTransition(      //动画控制器      turns: _animationController,      //圆形裁剪      child: ClipOval(        //扫描突变        child: Container(          width: 200,          height: 200,          decoration: BoxDecoration(            //扫描突变            gradient: SweepGradient(colors: [              Colors.white.withOpacity(0.2),              Colors.white.withOpacity(0.6),            ]),          ),        ),      ),    );  }