关于flutter:Android进阶Flutter-雷达扫描效果Flutter旋转扫描

效果图:

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),
            ]),
          ),
        ),
      ),
    );
  }

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据