Flutter實現(xiàn)旋轉(zhuǎn)掃描效果

更新時間：2022年01月21日 10:34:10 作者：易寒

這篇文章主要介紹了通過Flutter RotationTransition實現(xiàn)雷達旋轉(zhuǎn)掃描的效果，文中的示例代碼講解詳細，感興趣的同學(xué)可以動手試一試

效果圖：

1 .測試Demo啟動文件

main() {
  runApp(MaterialApp(
    home: SignSwiperPage(),
  ));
}

class SignSwiperPage extends StatefulWidget {
  @override
  _SignSwiperPageState createState() => _SignSwiperPageState();
}

class _SignSwiperPageState extends State<SignSwiperPage>
    with SingleTickerProviderStateMixin {

}

接下來的代碼都在 _SignSwiperPageState中編寫

2 .動畫控制器用來實現(xiàn)旋轉(zhuǎn)

//動畫控制器
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    //創(chuàng)建
    _animationController = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));
    //添加到事件隊列中
    Future.delayed(Duration.zero, () {
      //動畫重復(fù)執(zhí)行
      _animationController.repeat();
    });
  }

  @override
  void dispose() {
    //銷毀
    _animationController.dispose();
    super.dispose();
  }

3 .旋轉(zhuǎn)掃描效果

@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用來實現(xiàn)旋轉(zhuǎn)動畫

RotationTransition buildRotationTransition() {
    //旋轉(zhuǎn)動畫 
    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),
            ]),
          ),
        ),
      ),
    );
  }

到此這篇關(guān)于Flutter實現(xiàn)旋轉(zhuǎn)掃描效果的文章就介紹到這了,更多相關(guān)Flutter旋轉(zhuǎn)掃描效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: