Flutter數(shù)字切換動畫實現(xiàn)示例詳解
更新時間:2023年08月03日 10:27:57 作者:龍之音
這篇文章主要為大家介紹了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)示例詳解的詳細內(nèi)容,更多關于Flutter數(shù)字切換動畫的資料請關注腳本之家其它相關文章!
相關文章
Android BLE 藍牙開發(fā)之實現(xiàn)掃碼槍基于BLESSED開發(fā)
這篇文章主要介紹了Android BLE 藍牙開發(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-02Android為應用添加數(shù)字角標的簡單實現(xiàn)
應用的角標是用來標記有多少條提醒沒讀,本篇文章主要介紹了Android為應用添加角標的簡單實現(xiàn),有興趣的可以了解一下。2017-04-04Android仿Flipboard動畫效果的實現(xiàn)代碼
這篇文章主要介紹了Android仿Flipboard動畫效果的實現(xiàn)代碼,本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下2018-01-01