Flutter數(shù)字切換動(dòng)畫(huà)實(shí)現(xiàn)示例詳解
效果
需求
- 數(shù)字切換時(shí)新數(shù)字從上往下進(jìn)入,上個(gè)數(shù)字從上往下出
- 新數(shù)字進(jìn)入時(shí)下落到位置并帶有回彈效果
- 上個(gè)數(shù)字及新輸入切換時(shí)帶有透明度和縮放動(dòng)畫(huà)
實(shí)現(xiàn)
AnimatedSwitcher
主要采用AnimatedSwitcher實(shí)現(xiàn)需求,代碼比較簡(jiǎn)單,直接擼
import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_xy/widgets/xy_app_bar.dart'; class NumAnimPage extends StatefulWidget { const NumAnimPage({super.key}); @override State<NumAnimPage> createState() => _NumAnimPageState(); } class _NumAnimPageState extends State<NumAnimPage> { int _currentNum = 0; // 數(shù)字文本隨機(jī)顏色 Color get _numColor { Random random = Random(); int red = random.nextInt(256); int green = random.nextInt(256); int blue = random.nextInt(256); return Color.fromARGB(255, red, green, blue); } // 數(shù)字累加 void _addNumber() { setState(() { _currentNum++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: XYAppBar( title: "數(shù)字動(dòng)畫(huà)", ), body: Center( child: _bodyWidget(), ), ); } Widget _bodyWidget() { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedSwitcher( duration: const Duration(milliseconds: 500), transitionBuilder: (Widget child, Animation<double> animation) { Offset startOffset = animation.status == AnimationStatus.completed ? const Offset(0.0, 1.0) : const Offset(0.0, -1.0); Offset endOffset = const Offset(0.0, 0.0); return SlideTransition( position: Tween(begin: startOffset, end: endOffset).animate( CurvedAnimation(parent: animation, curve: Curves.bounceOut), ), child: FadeTransition( opacity: Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation(parent: animation, curve: Curves.linear), ), child: ScaleTransition( scale: Tween(begin: 0.5, end: 1.0).animate( CurvedAnimation(parent: animation, curve: Curves.linear), ), child: child, ), ), ); }, child: Text( '$_currentNum', key: ValueKey<int>(_currentNum), style: TextStyle(fontSize: 100, color: _numColor), ), ), const SizedBox(height: 80), ElevatedButton( onPressed: _addNumber, child: const Text( '數(shù)字動(dòng)畫(huà)', style: TextStyle(fontSize: 25, color: Colors.white), ), ), ], ); } }
具體見(jiàn)github:github.com/yixiaolunhui/flutter_xy
以上就是Flutter數(shù)字切換動(dòng)畫(huà)實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter數(shù)字切換動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 詳解如何使用Flutter動(dòng)畫(huà)魔法使UI元素活起來(lái)
- Flutter?文字中劃線(xiàn)動(dòng)畫(huà)StrikeThroughTextAnimation
- Flutter Component動(dòng)畫(huà)的顯和隱最佳實(shí)踐
- Flutter封裝組動(dòng)畫(huà)混合動(dòng)畫(huà)AnimatedGroup示例詳解
- Flutter在項(xiàng)目中使用動(dòng)畫(huà)不使用包實(shí)現(xiàn)詳解
- Flutter繪制3.4邊形及多邊形漸變動(dòng)畫(huà)實(shí)現(xiàn)示例
- Flutter Flar動(dòng)畫(huà)使用實(shí)戰(zhàn)示例
相關(guān)文章
關(guān)于A(yíng)ndroid實(shí)現(xiàn)簡(jiǎn)單的微信朋友圈分享功能
這篇文章主要介紹了關(guān)于A(yíng)ndroid實(shí)現(xiàn)簡(jiǎn)單的微信朋友圈分享功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-02-02Android網(wǎng)絡(luò)編程之簡(jiǎn)易新聞客戶(hù)端
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)編程之簡(jiǎn)易新聞客戶(hù)端的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Android png透明圖片轉(zhuǎn)jpg時(shí)背景變黑的解決方法
這篇文章主要介紹了Android png透明圖片轉(zhuǎn)jpg時(shí)背景變黑的解決方法,需要的朋友可以參考下2017-12-12Android BLE 藍(lán)牙開(kāi)發(fā)之實(shí)現(xiàn)掃碼槍基于BLESSED開(kāi)發(fā)
這篇文章主要介紹了Android BLE 藍(lán)牙開(kāi)發(fā)之實(shí)現(xiàn)掃碼槍基于BLESSED開(kāi)發(fā),示例代碼介紹了第三方庫(kù)BLESSED for Android的使用,需要的朋友可以參考下2022-03-03Android Webview滑進(jìn)出屏幕閃爍的解決方法
這篇文章主要給大家介紹了關(guān)于A(yíng)ndroid Webview滑進(jìn)出屏幕閃爍的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Android自定義View——扇形統(tǒng)計(jì)圖的實(shí)現(xiàn)代碼
本篇文章主要介紹了Android自定義View——扇形統(tǒng)計(jì)圖的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02跨平臺(tái)移動(dòng)WEB應(yīng)用開(kāi)發(fā)框架iMAG入門(mén)教程
這篇文章主要介紹了跨平臺(tái)移動(dòng)WEB應(yīng)用開(kāi)發(fā)框架iMAG入門(mén)教程,iMAG最大的特點(diǎn)是生成各移動(dòng)平臺(tái)的原生代碼,需要的朋友可以參考下2014-07-07Android為應(yīng)用添加數(shù)字角標(biāo)的簡(jiǎn)單實(shí)現(xiàn)
應(yīng)用的角標(biāo)是用來(lái)標(biāo)記有多少條提醒沒(méi)讀,本篇文章主要介紹了Android為應(yīng)用添加角標(biāo)的簡(jiǎn)單實(shí)現(xiàn),有興趣的可以了解一下。2017-04-04Android仿Flipboard動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android仿Flipboard動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼,本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01