欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter數(shù)字切換動畫的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論