Flutter实现旋转扫描效果
更新时间:2022年01月21日 10:34:10 作者:易寒
这篇文章主要介绍了通过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旋转扫描效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android Studio如何为Activity添加自定义注解信息
好久没用写文章了,今天给大家分享Android Studio如何为Activity添加自定义注解信息,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2021-06-06
Android利用SpannableString实现格式化微博内容
这篇文章主要介绍了Android利用SpannableString实现格式化微博内容的相关资料,文中介绍的非常详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。2017-03-03
AndroidStudio插件GsonFormat之Json快速转换JavaBean教程
这篇文章主要介绍了AndroidStudio插件GsonFormat之Json快速转换JavaBean教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-04-04
Android EasyPlayer声音自动停止、恢复,一键静音等功能
这篇文章主要介绍了Android EasyPlayer声音自动停止、恢复,一键静音等功能的相关资料,需要的朋友可以参考下2017-03-03


最新评论