Flutter实现旋转扫描效果

这篇文章主要介绍了通过Flutter RotationTransition实现雷达旋转扫描的效果，文中的示例代码讲解详细，感兴趣的同学可以动手试一试

效果图：

1 .测试Demo启动文件

main() { runApp(MaterialApp( home: SignSwiperPage(), )); } class SignSwiperPage extends StatefulWidget { @override _SignSwiperPageState createState() => _SignSwiperPageState(); } class _SignSwiperPageState extends State 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), ]), ), ), ), ); }

到此这篇关于Flutter实现旋转扫描效果的文章就介绍到这了,更多相关Flutter旋转扫描效果内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！

以上就是Flutter实现旋转扫描效果的详细内容，更多请关注0133技术站其它相关文章！