Flutter數(shù)字切換動(dòng)畫實(shí)現(xiàn)示例詳解
效果

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

