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旋转扫描效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Kotlin中常见内联扩展函数的使用方法教程

    Kotlin中常见内联扩展函数的使用方法教程

    在Kotlin中,使用inline修饰符标记内联函数,既会影响到函数本身, 也影响到传递给它的Lambda表达式,这两者都会被内联到调用处。下面这篇文章主要给大家介绍了关于Kotlin中常见内联扩展函数的使用方法,需要的朋友可以参考下。
    2017-12-12
  • Android Studio如何为Activity添加自定义注解信息

    Android Studio如何为Activity添加自定义注解信息

    好久没用写文章了,今天给大家分享Android Studio如何为Activity添加自定义注解信息,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-06-06
  • Android下拉阻尼效果实现原理及简单实例

    Android下拉阻尼效果实现原理及简单实例

    这篇文章主要为大家详细介绍了Android下拉阻尼效果实现原理及简单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Android利用SpannableString实现格式化微博内容

    Android利用SpannableString实现格式化微博内容

    这篇文章主要介绍了Android利用SpannableString实现格式化微博内容的相关资料,文中介绍的非常详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • AndroidStudio插件GsonFormat之Json快速转换JavaBean教程

    AndroidStudio插件GsonFormat之Json快速转换JavaBean教程

    这篇文章主要介绍了AndroidStudio插件GsonFormat之Json快速转换JavaBean教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-04-04
  • Android 有道词典的简单实现方法介绍

    Android 有道词典的简单实现方法介绍

    本篇文章小编为大家介绍,Android 有道词典的简单实现方法介绍。需要的朋友参考下
    2013-04-04
  • Android实现系统消息推送

    Android实现系统消息推送

    这篇文章主要为大家详细介绍了Android实现系统消息推送,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 深入剖析Android的Volley库中的图片加载功能

    深入剖析Android的Volley库中的图片加载功能

    这篇文章主要介绍了Android的Volley框架中的图片加载功能,从源码剖析了Volley加载图片时的请求队列处理等方面,需要的朋友可以参考下
    2016-04-04
  • Android EasyPlayer声音自动停止、恢复,一键静音等功能

    Android EasyPlayer声音自动停止、恢复,一键静音等功能

    这篇文章主要介绍了Android EasyPlayer声音自动停止、恢复,一键静音等功能的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android Compose实现联系人列表流程

    Android Compose实现联系人列表流程

    声明式UI,更简单的自定义,实时带交互的预览功能Compose并不是类似于Recyclerview的高级控件,而是直接抛弃了View,ViewGroup那套东西,从上到下鲁了一套全新的框架,直白点说就是它的渲染机制,布局机制,触摸算法,以及UI具体写法全都是新的
    2023-03-03

最新评论