Flutter實(shí)現(xiàn)旋轉(zhuǎn)掃描效果
效果圖:
1 .測(cè)試Demo啟動(dòng)文件
main() { runApp(MaterialApp( home: SignSwiperPage(), )); } class SignSwiperPage extends StatefulWidget { @override _SignSwiperPageState createState() => _SignSwiperPageState(); } class _SignSwiperPageState extends State<SignSwiperPage> with SingleTickerProviderStateMixin { }
接下來(lái)的代碼都在 _SignSwiperPageState中編寫(xiě)
2 .動(dòng)畫(huà)控制器用來(lái)實(shí)現(xiàn)旋轉(zhuǎn)
//動(dòng)畫(huà)控制器 AnimationController _animationController; @override void initState() { super.initState(); //創(chuàng)建 _animationController = new AnimationController( vsync: this, duration: Duration(milliseconds: 2000)); //添加到事件隊(duì)列中 Future.delayed(Duration.zero, () { //動(dòng)畫(huà)重復(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用來(lái)實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)
RotationTransition buildRotationTransition() { //旋轉(zhuǎn)動(dòng)畫(huà) return RotationTransition( //動(dòng)畫(huà)控制器 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實(shí)現(xiàn)旋轉(zhuǎn)掃描效果的文章就介紹到這了,更多相關(guān)Flutter旋轉(zhuǎn)掃描效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談Android安全風(fēng)險(xiǎn)與防范措施
這篇文章主要介紹了淺談Android安全風(fēng)險(xiǎn)與防范措施,對(duì)安全感興趣的同學(xué)可以參考下2021-04-04Android 運(yùn)用@JvmName解決函數(shù)簽名沖突問(wèn)題詳解
JvmName注解是Kotlin提供的一個(gè)可以變更編譯器輸出的注解,這里簡(jiǎn)單的介紹一下其使用規(guī)則,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-07-07android網(wǎng)絡(luò)圖片查看器簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了android網(wǎng)絡(luò)圖片查看器的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android自定義控件之三點(diǎn)循環(huán)縮放效果
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之三點(diǎn)循環(huán)縮放效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Unity同步/異步調(diào)用Android的方法實(shí)例
unity在Android端開(kāi)發(fā)的時(shí)候,免不了要調(diào)用Java,下面這篇文章主要給大家介紹了關(guān)于Unity同步/異步調(diào)用Android的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08Android自定義加載控件實(shí)現(xiàn)數(shù)據(jù)加載動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Android自定義加載控件實(shí)現(xiàn)數(shù)據(jù)加載動(dòng)畫(huà)的相關(guān)資料,仿美團(tuán)、京東數(shù)據(jù)加載動(dòng)畫(huà)、小人奔跑動(dòng)畫(huà),感興趣的小伙伴們可以參考一下2016-04-04