Flutter实现旋转扫描效果
作者：易寒
这篇文章主要介绍了通过Flutter RotationTransition实现雷达旋转扫描的效果，文中的示例代码讲解详细，感兴趣的同学可以动手试一试
效果图：
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旋转扫描效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！