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拖拽助手ViewDragHelper的创建与使用实例

    Android拖拽助手ViewDragHelper的创建与使用实例

    ViewDragHelper是针对 ViewGroup 中的拖拽和重新定位 views 操作时提供了一系列非常有用的方法和状态追踪,下面这篇文章主要给大家介绍了关于Android拖拽助手ViewDragHelper的创建与使用的相关资料,需要的朋友可以参考下
    2022-05-05
  • Android progressbar实现带底部指示器和文字的进度条

    Android progressbar实现带底部指示器和文字的进度条

    这篇文章主要为大家详细介绍了Android progressbar实现带底部指示器和文字的进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • Android性能调优利器StrictMode应用分析

    Android性能调优利器StrictMode应用分析

    StrictMode意思为严格模式,是用来检测程序中违例情况的开发者工具。最常用的场景就是检测主线程中本地磁盘和网络读写等耗时的操作。这篇文章给大家介绍Android性能调优利器StrictMode应用分析,感兴趣的朋友一起看看吧
    2018-01-01
  • android简单自定义View实现五子棋

    android简单自定义View实现五子棋

    这篇文章主要为大家详细介绍了android简单自定义View实现五子棋,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Android顶部状态栏透明化并释放空间的两种实现方法

    Android顶部状态栏透明化并释放空间的两种实现方法

    这篇文章主要介绍了Android顶部状态栏透明化并释放空间的两种实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Android实现在TextView文字过长时省略部分或滚动显示的方法

    Android实现在TextView文字过长时省略部分或滚动显示的方法

    这篇文章主要介绍了Android实现在TextView文字过长时省略部分或滚动显示的方法,结合实例形式分析了Android中TextView控件文字显示及滚动效果相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解

    Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解

    Android 模拟器一直以速度奇慢无比著称,基本慢到不可用。本文介绍我一直在用的 Genymotion,速度不亚于真机。而且功能齐全,使用简单。下面这篇文章主要介绍了Ubuntu 14.04下创建Genymotion虚拟机的步骤,需要的朋友可以参考下。
    2017-03-03
  • 详谈Android ListView的选择模式

    详谈Android ListView的选择模式

    下面小编就为大家带来一篇详谈Android ListView的选择模式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Android实现扫描二维码功能

    Android实现扫描二维码功能

    这篇文章主要为大家详细介绍了Android实现扫描二维码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 深入探讨Android卡顿的原因以及解决方法

    深入探讨Android卡顿的原因以及解决方法

    在移动应用开发中,Android卡顿是一个常见但令人讨厌的问题,它可能导致用户体验下降,甚至失去用户,本文将深入探讨Android卡顿的原因,以及如何通过代码优化和性能监测来提高应用的性能
    2023-10-10

最新评论