日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

Flutter實現旋轉掃描效果_Android

作者:易寒 ? 更新時間: 2022-04-03 編程語言

效果圖:

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

原文鏈接:https://segmentfault.com/a/1190000041318733

欄目分類
最近更新