Flutter旋转扫描效果
易寒 人气:0效果图:
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), ]), ), ), ), ); }
加载全部内容