Flutter數(shù)字切換動畫實現(xiàn)示例詳解
效果
需求
- 數(shù)字切換時新數(shù)字從上往下進入,上個數(shù)字從上往下出
- 新數(shù)字進入時下落到位置并帶有回彈效果
- 上個數(shù)字及新輸入切換時帶有透明度和縮放動畫
實現(xiàn)
AnimatedSwitcher
主要采用AnimatedSwitcher實現(xià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ù)字文本隨機顏色 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ù)字動畫", ), 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ù)字動畫', style: TextStyle(fontSize: 25, color: Colors.white), ), ), ], ); } }
具體見github:github.com/yixiaolunhui/flutter_xy
以上就是Flutter數(shù)字切換動畫實現(xiàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter數(shù)字切換動畫的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于Android實現(xiàn)簡單的微信朋友圈分享功能
這篇文章主要介紹了關(guān)于Android實現(xiàn)簡單的微信朋友圈分享功能,非常不錯,具有參考借鑒價值,需要的的朋友參考下2017-02-02Android網(wǎng)絡(luò)編程之簡易新聞客戶端
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)編程之簡易新聞客戶端的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Android png透明圖片轉(zhuǎn)jpg時背景變黑的解決方法
這篇文章主要介紹了Android png透明圖片轉(zhuǎn)jpg時背景變黑的解決方法,需要的朋友可以參考下2017-12-12Android BLE 藍(lán)牙開發(fā)之實現(xiàn)掃碼槍基于BLESSED開發(fā)
這篇文章主要介紹了Android BLE 藍(lán)牙開發(fā)之實現(xiàn)掃碼槍基于BLESSED開發(fā),示例代碼介紹了第三方庫BLESSED for Android的使用,需要的朋友可以參考下2022-03-03Android自定義View——扇形統(tǒng)計圖的實現(xiàn)代碼
本篇文章主要介紹了Android自定義View——扇形統(tǒng)計圖的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02跨平臺移動WEB應(yīng)用開發(fā)框架iMAG入門教程
這篇文章主要介紹了跨平臺移動WEB應(yīng)用開發(fā)框架iMAG入門教程,iMAG最大的特點是生成各移動平臺的原生代碼,需要的朋友可以參考下2014-07-07Android為應(yīng)用添加數(shù)字角標(biāo)的簡單實現(xiàn)
應(yīng)用的角標(biāo)是用來標(biāo)記有多少條提醒沒讀,本篇文章主要介紹了Android為應(yīng)用添加角標(biāo)的簡單實現(xiàn),有興趣的可以了解一下。2017-04-04Android仿Flipboard動畫效果的實現(xiàn)代碼
這篇文章主要介紹了Android仿Flipboard動畫效果的實現(xiàn)代碼,本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01