Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Flutter红包动画

Flutter实现红包动画效果的示例代码

作者:天选的打工人

这篇文章主要为大家详细介绍了如何利用Flutter实现红包的动画效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下

前言

红包动画效果实现,如图:

该效果的实现难道其实比较简单,就是基础的平移、旋转和缩放动画,但比较麻烦的就是需要写很多小动画组合,共由11个小动画组合而成。

动画拆解

红包显示动画

红包显示时的动画,由0到1的放大。

late AnimationController controller;
late Animation<double> animation;
///红包展开动画
controller = AnimationController(
    duration: const Duration(milliseconds: 200), vsync: this);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  controller.forward();
});
animation = Tween(begin: 0.0, end: 1.0).animate(controller);

红包未开前,平移动画

红包未开前,整体微微上下平移

late AnimationController bgController;
late Animation<Offset> bgAnimation;
///红包背景上下平移动画
bgController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
bgAnimation = Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
    .animate(bgController);

红包未开前,”开“按钮缩放动画

"开"按钮缩放动画,由1到0.8,动画循环执行。

late AnimationController openBtController;
late Animation<double> openBtAnimation;
///红包未开时,按钮缩放动画
openBtController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
openBtAnimation = Tween(begin: 1.0, end: 0.8).animate(openBtController);

红包开启后,背景光显示动画

开红包后,会显示背景光

late AnimationController openLightScaleController;
late Animation<double> openLightScaleAnimation;
///开红包后,显示背景光
openLightScaleController = AnimationController(
    duration: const Duration(milliseconds: 200), vsync: this);
openLightScaleAnimation =
    Tween(begin: 0.4, end: 1.0).animate(openLightScaleController);

红包开启后,背景光放大动画

开红包后,背景光微微放大1.2倍,动画循环执行。

late AnimationController lightScaleController;
late Animation<double> lightScaleAnimation;
///背景光放大动画,只放大1.2倍
lightScaleController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
lightScaleAnimation =
    Tween(begin: 1.0, end: 1.2).animate(lightScaleController);

红包开启后,背景光旋转动画

开红包后,背景光微微旋转,只旋转0.02的弧度,动画循环执行。

late AnimationController lightRotateController;
late Animation<double> lightRotateAnimation;
///背景光旋转动画,微微旋转,只旋转0.02的弧度
lightRotateController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
lightRotateAnimation =
    Tween(begin: 0.0, end: 0.02).animate(lightRotateController);

红包开启后,新背景放大动画

开红包后,原红包背景缩小至不见,新红包背景显示

late AnimationController openController;
late Animation<double> openAnimation;
///开红包 背景放大动画
openController = AnimationController(
    duration: const Duration(milliseconds: 200), vsync: this);
openAnimation = Tween(begin: 0.4, end: 1.0).animate(openController);

红包开启后,新背景平移动画

开红包后,新背景也微微上下平移

late AnimationController openBgController;
late Animation<Offset> openBgAnimation;
///红包背景上下平移动画
openBgController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
openBgAnimation =
    Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
        .animate(openBgController);

红包开启后,”立即使用“按钮缩放动画

开红包后,”立即使用“按钮缩放动画,由1到0.9,动画循环执行。

late AnimationController useBtController;
late Animation<double> useBtAnimation;
///立即使用按钮缩放动画
useBtController = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this)
  ..repeat(reverse: true);
useBtAnimation = Tween(begin: 1.0, end: 0.9).animate(useBtController);

红包开启后,金额显示的卡片上移动画

开红包后,显示金额的卡片上移

late final AnimationController offsetTopController;
late final Animation<Offset> offsetTopAnimation;
///卡片上移动画
offsetTopController = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
);
offsetTopAnimation = Tween<Offset>(
  begin: const Offset(0, 0.6),
  end: const Offset(0, 0),
).animate(CurvedAnimation(
  parent: offsetTopController,
  curve: Curves.easeInOutCubic,
));

红包开启后,金额显示的动画

开红包后,金额会从某个数值自增至实际金额数值

late AnimationController priceController;
late Animation<double> priceAnimation;
///金额变换效果
price = widget.price;
double startPrice = 0;
if (price <= 100) {
  ///小于100的金额从0开始自增
  startPrice = 0;
} else {
  ///大于100的金额对半开始自增
  startPrice = price / 2;
}
priceController = AnimationController(
    duration: const Duration(milliseconds: 600), vsync: this);
priceAnimation =
    Tween(begin: startPrice, end: price).animate(priceController);

资源文件

class ImageAssets{
  static const String homeIcRed1Webp = 'assets/home/ic-red-1.webp';
  static const String homeIcRedBgWebp = 'assets/home/ic-red-bg.webp';
  static const String homeIcRedLightWebp = 'assets/home/ic-red-light.webp';
  static const String homeIcRedOpenWebp = 'assets/home/ic-red-open.webp';
  static const String homeIcRed2BgWebp = 'assets/home/ic-red2-bg.webp';
  static const String homeIcRed2BottomWebp = 'assets/home/ic-red2-bottom.webp';
  static const String homeIcRed2BtWebp = 'assets/home/ic-red2-bt.webp';
  static const String homeIcRed2TopBgWebp = 'assets/home/ic-red2-top-bg.webp';
  static const String homeIcRed2TopWebp = 'assets/home/ic-red2-top.webp';
  static const String homeIcCloseWhiteWebp = 'assets/home/ic-close-white.webp';
}

homeIcRedBgWebp :

homeIcRed1Webp:

homeIcRedLightWebp:

homeIcRedOpenWebp:

homeIcRed2BgWebp:

homeIcRed2BottomWebp:

homeIcRed2BtWebp:

homeIcRed2TopBgWebp:

homeIcRed2TopWebp:

完整代码

项目用到了GetX,需要注意导入。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
///新人红包
class RedEnvelopeDialog extends StatefulWidget {
  double price;
  RedEnvelopeDialog({Key? key, required this.price}) : super(key: key);
  @override
  _PageState createState() => _PageState();
}
class _PageState extends State<RedEnvelopeDialog>
    with TickerProviderStateMixin {
  double width = 0;
  double height = 0;
  double openSize = 0;
  double btBgTopMargin = 0;
  double openBgBottomMargin = 0;
  double openBgTopMargin = 0;
  double openTopBgHeight = 0;
  double openBottomBgHeight = 0;
  double openTopBgBottomMargin = 0;
  double moveHeight = 0;
  double openHeight = 0;
  double useBtWidth = 0;
  late AnimationController controller;
  late Animation<double> animation;
  late AnimationController openBtController;
  late Animation<double> openBtAnimation;
  late AnimationController lightScaleController;
  late Animation<double> lightScaleAnimation;
  late AnimationController lightRotateController;
  late Animation<double> lightRotateAnimation;
  late AnimationController openLightScaleController;
  late Animation<double> openLightScaleAnimation;
  late AnimationController bgController;
  late Animation<Offset> bgAnimation;
  late AnimationController openController;
  late Animation<double> openAnimation;
  late AnimationController openBgController;
  late Animation<Offset> openBgAnimation;
  late AnimationController useBtController;
  late Animation<double> useBtAnimation;
  late final AnimationController offsetTopController;
  late final Animation<Offset> offsetTopAnimation;
  late AnimationController priceController;
  late Animation<double> priceAnimation;
  RxBool showOpen = false.obs;
  double price = 0;
  @override
  void initState() {
    super.initState();
    ///根据设计稿比例计算实际数值
    width = Get.width - 100;
    height = (332 / 273) * width;
    openSize = (78 / 332) * height;
    btBgTopMargin = (20 / 332) * height;
    openHeight = (332 / 273) * width;
    openBgBottomMargin = (12 / 273) * width;
    openBgTopMargin = (50 / 273) * width;
    openTopBgHeight = (194 / 273) * width;
    openBottomBgHeight = (189 / 273) * width;
    openTopBgBottomMargin = (138 / 273) * width;
    moveHeight = (143 / 273) * width;
    useBtWidth = (178 / 273) * width;
    ///红包展开动画
    controller = AnimationController(
        duration: const Duration(milliseconds: 200), vsync: this);
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      controller.forward();
    });
    animation = Tween(begin: 0.0, end: 1.0).animate(controller);
    ///开按钮缩放动画
    openBtController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    openBtAnimation = Tween(begin: 1.0, end: 0.8).animate(openBtController);
    ///背景光显示动画
    openLightScaleController = AnimationController(
        duration: const Duration(milliseconds: 200), vsync: this);
    openLightScaleAnimation =
        Tween(begin: 0.4, end: 1.0).animate(openLightScaleController);
    ///背景光放大动画,只放大1.2倍
    lightScaleController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    lightScaleAnimation =
        Tween(begin: 1.0, end: 1.2).animate(lightScaleController);
    ///背景光旋转动画,微微旋转,只旋转0.02的弧度
    lightRotateController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    lightRotateAnimation =
        Tween(begin: 0.0, end: 0.02).animate(lightRotateController);
    ///红包背景上下平移动画
    bgController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    bgAnimation = Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
        .animate(bgController);
    ///开红包 背景放大动画
    openController = AnimationController(
        duration: const Duration(milliseconds: 200), vsync: this);
    openAnimation = Tween(begin: 0.4, end: 1.0).animate(openController);
    ///开红包背景上下平移动画
    openBgController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    openBgAnimation =
        Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -10))
            .animate(openBgController);
    ///开按钮缩放动画
    useBtController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..repeat(reverse: true);
    useBtAnimation = Tween(begin: 1.0, end: 0.9).animate(useBtController);
    ///卡片上移动画
    offsetTopController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    offsetTopAnimation = Tween<Offset>(
      begin: const Offset(0, 0.6),
      end: const Offset(0, 0),
    ).animate(CurvedAnimation(
      parent: offsetTopController,
      curve: Curves.easeInOutCubic,
    ));
    ///金额变换效果
    price = widget.price;
    double startPrice = 0;
    if (price <= 100) {
      ///小于100的金额从0开始自增
      startPrice = 0;
    } else {
      ///大于100的金额对半开始自增
      startPrice = price / 2;
    }
    priceController = AnimationController(
        duration: const Duration(milliseconds: 600), vsync: this);
    priceAnimation =
        Tween(begin: startPrice, end: price).animate(priceController);
  }
  @override
  void dispose() {
    controller.dispose();
    openBtController.dispose();
    lightScaleController.dispose();
    lightRotateController.dispose();
    openLightScaleController.dispose();
    bgController.dispose();
    openController.dispose();
    openBgController.dispose();
    useBtController.dispose();
    offsetTopController.dispose();
    priceController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Stack(
                alignment: Alignment.center,
                children: [
                  ///背景光
                  Obx(
                    () => Visibility(
                      visible: showOpen.value,
                      child: AnimatedBuilder(
                        animation: openLightScaleAnimation,
                        builder: (context, child) {
                          return Transform.scale(
                            scale: openLightScaleAnimation.value,
                            child: AnimatedBuilder(
                              animation: lightScaleAnimation,
                              builder: (context, child) {
                                return Transform.scale(
                                  scale: lightScaleAnimation.value,
                                  child: AnimatedBuilder(
                                    animation: lightRotateAnimation,
                                    builder: (context, child) {
                                      return Transform.rotate(
                                        angle: lightRotateAnimation.value,
                                        child: Image.asset(
                                          ImageAssets.homeIcRedLightWebp,
                                          width: double.infinity,
                                          fit: BoxFit.fitWidth,
                                        ),
                                      );
                                    },
                                  ),
                                );
                              },
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  ///开红包前
                  AnimatedBuilder(
                      animation: animation,
                      builder: (context, child) {
                        return Transform.scale(
                            scale: animation.value,
                            child: Container(
                              margin: EdgeInsets.all(50),
                              child: AnimatedBuilder(
                                animation: bgAnimation,
                                builder: (context, child) {
                                  return Transform.translate(
                                    offset: bgAnimation.value,
                                    child: Stack(
                                      children: [
                                        Image.asset(
                                          ImageAssets.homeIcRedBgWebp,
                                          width: double.infinity,
                                          fit: BoxFit.fitWidth,
                                        ),
                                        SizedBox(
                                          height: height,
                                          width: width,
                                          child: Column(
                                            children: [
                                              Expanded(
                                                child: Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.center,
                                                  children: [
                                                    Text(
                                                      "新人见面礼",
                                                      style: TextStyle(
                                                          fontSize: 30,
                                                          color: const Color(
                                                              0xFFFFDC81)),
                                                    ),
                                                    SizedBox(
                                                      height: 10,
                                                    ),
                                                    Text(
                                                      "$priceRellyStr元",
                                                      style: TextStyle(
                                                          fontSize: 30,
                                                          color: const Color(
                                                              0xFFFFBB81)),
                                                    ),
                                                    SizedBox(
                                                      height: 5,
                                                    ),
                                                    Container(
                                                      padding:
                                                          EdgeInsets.symmetric(
                                                              horizontal: 12,
                                                              vertical: 4),
                                                      decoration: BoxDecoration(
                                                        color: const Color(
                                                            0xFFDC1215),
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(6),
                                                      ),
                                                      child: Text(
                                                        "无门槛",
                                                        style: TextStyle(
                                                            fontSize: 15,
                                                            color: const Color(
                                                                0xFFFF862F)),
                                                      ),
                                                    )
                                                  ],
                                                ),
                                                flex: 173,
                                              ),
                                              Expanded(
                                                child: Stack(
                                                  alignment:
                                                      Alignment.topCenter,
                                                  children: [
                                                    Container(
                                                      height: double.infinity,
                                                      alignment: Alignment
                                                          .bottomCenter,
                                                      margin: EdgeInsets.only(
                                                          bottom: 20),
                                                      child: Text(
                                                        "新人专享\u3000福利大派送",
                                                        style: TextStyle(
                                                            fontSize: 14,
                                                            color: const Color(
                                                                0xFFFF6571)),
                                                      ),
                                                    ),
                                                    Padding(
                                                      padding: EdgeInsets.only(
                                                          top: btBgTopMargin),
                                                      child: Image.asset(
                                                        ImageAssets
                                                            .homeIcRed1Webp,
                                                        width: double.infinity,
                                                        fit: BoxFit.fitWidth,
                                                      ),
                                                    ),
                                                    GestureDetector(
                                                      child: AnimatedBuilder(
                                                        animation:
                                                            openBtAnimation,
                                                        builder:
                                                            (context, child) {
                                                          return Transform
                                                              .scale(
                                                            scale:
                                                                openBtAnimation
                                                                    .value,
                                                            child: Image.asset(
                                                              ImageAssets
                                                                  .homeIcRedOpenWebp,
                                                              width: openSize,
                                                              height: openSize,
                                                            ),
                                                          );
                                                        },
                                                      ),
                                                      onTap: () {
                                                        controller.reverse();
                                                        showOpen.value = true;
                                                        openController
                                                            .forward();
                                                        openLightScaleController
                                                            .forward();
                                                        offsetTopController
                                                            .forward()
                                                            .whenComplete(() =>
                                                                offsetTopController
                                                                    .stop());
                                                        priceController
                                                            .forward()
                                                            .whenComplete(() =>
                                                                priceController
                                                                    .stop());
                                                      },
                                                    )
                                                  ],
                                                ),
                                                flex: 159,
                                              )
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  );
                                },
                              ),
                            ));
                      }),
                  ///开红包后
                  Obx(() => Visibility(
                      visible: showOpen.value,
                      child: AnimatedBuilder(
                          animation: openAnimation,
                          builder: (context, child) {
                            return Transform.scale(
                                scale: openAnimation.value,
                                child: AnimatedBuilder(
                                    animation: openBgAnimation,
                                    builder: (context, child) {
                                      return Transform.translate(
                                          offset: openBgAnimation.value,
                                          child: Container(
                                            height: openHeight,
                                            margin: EdgeInsets.all(50),
                                            child: Stack(
                                              alignment: Alignment.bottomCenter,
                                              children: [
                                                Padding(
                                                  padding: EdgeInsets.only(
                                                      bottom:
                                                          openBgBottomMargin,
                                                      top: openBgTopMargin),
                                                  child: Image.asset(
                                                    ImageAssets
                                                        .homeIcRed2BgWebp,
                                                    width: double.infinity,
                                                    fit: BoxFit.fitWidth,
                                                  ),
                                                ),
                                                Padding(
                                                  padding: EdgeInsets.only(
                                                      bottom:
                                                          openTopBgBottomMargin),
                                                  child: SlideTransition(
                                                      position:
                                                          offsetTopAnimation,
                                                      child: Stack(
                                                        alignment:
                                                            Alignment.center,
                                                        children: [
                                                          Image.asset(
                                                            ImageAssets
                                                                .homeIcRed2TopBgWebp,
                                                            height:
                                                                openTopBgHeight,
                                                            fit:
                                                                BoxFit.fitWidth,
                                                          ),
                                                          Container(
                                                              height:
                                                                  openTopBgHeight,
                                                              width: double
                                                                  .infinity,
                                                              alignment:
                                                                  Alignment
                                                                      .center,
                                                              child: Column(
                                                                mainAxisAlignment:
                                                                    MainAxisAlignment
                                                                        .center,
                                                                crossAxisAlignment:
                                                                    CrossAxisAlignment
                                                                        .center,
                                                                children: [
                                                                  Expanded(
                                                                    child:
                                                                        Column(
                                                                      children: [
                                                                        Stack(
                                                                          alignment:
                                                                              Alignment.center,
                                                                          children: [
                                                                            Image.asset(
                                                                              ImageAssets.homeIcRed2TopWebp,
                                                                              height: (30 / 273) * width,
                                                                              fit: BoxFit.fitHeight,
                                                                            ),
                                                                            Container(
                                                                              width: (184 / 273) * width,
                                                                              alignment: Alignment.center,
                                                                              padding: EdgeInsets.symmetric(horizontal: 8),
                                                                              child: Text(
                                                                                "开门红包",
                                                                                style: TextStyle(
                                                                                  fontSize: 16,
                                                                                  color: const Color(0xFFBA683D),
                                                                                ),
                                                                                maxLines: 1,
                                                                                overflow: TextOverflow.ellipsis,
                                                                              ),
                                                                            )
                                                                          ],
                                                                        ),
                                                                        Expanded(
                                                                            child:
                                                                                Container(
                                                                          alignment:
                                                                              Alignment.center,
                                                                          child:
                                                                              Row(
                                                                            crossAxisAlignment:
                                                                                CrossAxisAlignment.end,
                                                                            mainAxisAlignment:
                                                                                MainAxisAlignment.center,
                                                                            children: [
                                                                              AnimatedBuilder(
                                                                                animation: priceController,
                                                                                builder: (BuildContext context, Widget? child) {
                                                                                  return Text(
                                                                                    priceStr,
                                                                                    style: TextStyle(fontSize: 48, color: const Color(0xFFF30313), height: 1, fontWeight: FontWeight.bold),
                                                                                  );
                                                                                },
                                                                              ),
                                                                              Text(
                                                                                '元',
                                                                                style: TextStyle(fontSize: 20, height: 2, color: Color(0xFF141414)),
                                                                              )
                                                                            ],
                                                                          ),
                                                                        ))
                                                                      ],
                                                                    ),
                                                                    flex: 128,
                                                                  ),
                                                                  Expanded(
                                                                    child:
                                                                        Column(
                                                                      children: [
                                                                        Expanded(
                                                                          child:
                                                                              Container(
                                                                            alignment:
                                                                                Alignment.bottomCenter,
                                                                            child: Text("永久有效",
                                                                                textAlign: TextAlign.center,
                                                                                style: TextStyle(
                                                                                  fontSize: 12,
                                                                                  color: const Color(0xFF8A8A8A),
                                                                                  height: 1,
                                                                                )),
                                                                          ),
                                                                          flex:
                                                                              2,
                                                                        ),
                                                                        Expanded(
                                                                          child:
                                                                              const SizedBox(),
                                                                          flex:
                                                                              3,
                                                                        )
                                                                      ],
                                                                    ),
                                                                    flex: 65,
                                                                  )
                                                                ],
                                                              ))
                                                        ],
                                                      )),
                                                ),
                                                Image.asset(
                                                  ImageAssets
                                                      .homeIcRed2BottomWebp,
                                                  width: double.infinity,
                                                  fit: BoxFit.fitWidth,
                                                ),
                                                Column(
                                                  children: [
                                                    Expanded(
                                                      child: const SizedBox(),
                                                      flex: 143,
                                                    ),
                                                    Expanded(
                                                      child: Container(
                                                          alignment:
                                                              Alignment.center,
                                                          child: Column(
                                                            mainAxisAlignment:
                                                                MainAxisAlignment
                                                                    .center,
                                                            children: [
                                                            SizedBox(
                                                            height: 20),
                                                              AnimatedBuilder(
                                                                  animation:
                                                                      useBtAnimation,
                                                                  builder:
                                                                      (context,
                                                                          child) {
                                                                    return Transform.scale(
                                                                        scale: useBtAnimation.value,
                                                                        child: GestureDetector(
                                                                            onTap: () {
                                                                              //todo 点击事件
                                                                            },
                                                                            child: Stack(
                                                                              alignment: Alignment.center,
                                                                              children: [
                                                                                Image.asset(
                                                                                  ImageAssets.homeIcRed2BtWebp,
                                                                                  width: useBtWidth,
                                                                                  fit: BoxFit.fitWidth,
                                                                                ),
                                                                                Text("立即领取", style: TextStyle(fontSize: 16, color: const Color(0xFFFFF0E1))),
                                                                              ],
                                                                            )));
                                                                  }),
                                                              SizedBox(
                                                                height: ((30 /
                                                                        273) *
                                                                    width),
                                                              ),
                                                              Text(
                                                                "可在“我的-优惠券”中查看",
                                                                style: TextStyle(
                                                                    fontSize:
                                                                        12,
                                                                    color: const Color(
                                                                        0xFFFF6571)),
                                                              ),
                                                            ],
                                                          )),
                                                      flex: 189,
                                                    ),
                                                  ],
                                                )
                                              ],
                                            ),
                                          ));
                                    }));
                          })))
                ],
              )
            ],
          ),
          //关闭按钮
          GestureDetector(
              onTap: () {
                Get.back();
              },
              child: Container(
                margin: EdgeInsets.only(bottom: height * 1.5, left: width),
                child: Image.asset(
                  ImageAssets.homeIcCloseWhiteWebp,
                  width: 21,
                  height: 21,
                ),
              ))
        ],
      ),
    );
  }
  ///金额数值变化
  String get priceStr {
    if (price % 1 == 0) {
      return (priceAnimation.value.toInt()).toString();
    } else {
      return priceAnimation.value.toStringAsFixed(2);
    }
  }
  ///小数据点后没有尾数则不显示
  String get priceRellyStr {
    if (price % 1 == 0) {
      return (price.toInt()).toString();
    } else {
      String pr = price.toStringAsFixed(2);
      if (pr.endsWith("0")) {
        return pr.substring(0, pr.length - 1);
      }
      return price.toStringAsFixed(2);
    }
  }
}

以上就是Flutter实现红包动画效果的示例代码的详细内容,更多关于Flutter红包动画的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文