效果图：
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),
]),
),
),
),
);
}到此这篇关于Flutter实现旋转扫描效果的文章就介绍到这了,更多相关Flutter旋转扫描效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
