美文网首页
flutter 收金币效果

flutter 收金币效果

作者: 罐罐金 | 来源:发表于2024-11-20 16:07 被阅读0次
class CoinAnimationItem extends StatefulWidget {
  final Offset startOffset, endOffset;///开始结束位置
  final Function(LandAllModel allModel)? onTap;///点击金币回调  可调用回收接口
  final LandAllModel allModel;///所需数据

  const CoinAnimationItem(this.allModel, this.endOffset, this.startOffset, {super.key, this.onTap});

  @override
  State<StatefulWidget> createState() {
    return CoinAnimationItemState();
  }
}

class CoinAnimationItemState extends State<CoinAnimationItem> with SingleTickerProviderStateMixin {
  double top = 0;
  double left = 0;

  AnimationController? _controller;
  Animation? _animation;
  ///是否结束,如果结束就消失整个coinAnimationItem
  bool finish = false;
  ///默认显示小手,点击瞬间小手消失,只有果实动画
  bool begin = false;


  ///开始动画只动一次
  forwardAction() {
    _controller?.forward();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    _animation = Tween(begin: 0, end: 1.0).animate(_controller!)
      ..addListener(() {
        if (_animation?.value > 0.99) {
          _controller?.stop();
          finish = true;

        }
        if (_animation?.value > 0.01) {
          begin = true;
        }
        setState(() {});
      })
      ..addStatusListener((AnimationStatus status) {
        if (status == AnimationStatus.completed) {
          _controller?.stop();

        }
      });
  }

  @override
  void dispose() {
    _controller?.dispose();
    _animation = null;
    _controller = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 1. about start
    var startX = widget.startOffset.dx;
    var startY = widget.startOffset.dy;

    // 2. about end
    var endX = widget.endOffset.dx;
    var endY = widget.endOffset.dy;

    // 3. calculate
    var x = startX + (endX - startX) * _animation?.value;
    var y = startY + (endY - startY) * _animation?.value;

    top = y;
    left = x;

    return warpString(widget.allModel.member_mill?.can_receive) == "1"
    // return (!CommonUtils.isEmpty(widget.allModel.member_mill?.id))
        ? Positioned(
            top: top,
            left: left,
            child: (finish == false)
                ? TextButton(
                    onPressed: () {
                      widget.onTap?.call(widget.allModel);

                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Stack(
                          alignment: Alignment.centerLeft,
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                color: AppColors.white.withAlpha(100),
                                borderRadius: const BorderRadius.all(Radius.circular(90)),
                                border: Border.all(color: AppColors.yellow, width: 1.w),
                              ),
                              padding: EdgeInsets.only(left: 20.w, right: 5.w, top: 1.w, bottom: 1.w),
                              child: Center(
                                child: Row(
                                  children: [
                                    NoneText(
                                      widget.allModel.member_mill?.receive_amount,
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                          color: AppColors.mainColor, fontSize: 11.sp, fontWeight: FontWeight.bold),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Image.asset(
                              "images/g1.png",
                              width: 18.w,
                              height: 18.w,
                              fit: BoxFit.cover,
                            ),
                          ],
                        ),
                        if (begin == false)
                          Image.asset(
                            "images/keshouhuo.png",
                            width: 40.w,
                            // height: width ?? 98.w,
                          ),
                      ],
                    ),
                  )
                : const SizedBox(),
          )
        : const SizedBox();
  }
}

使用方法

 CoinAnimationItem(
          landList[2],
          Offset(40.w, 10.w),
          Offset(36.w, 165.w),
          onTap: (model) {

//调用接口
          },
          key: guoshiAnimationItemStateList[2],
        ),
326441734681763_.pic.jpg

相关文章

  • 淘金币变现之道

    收淘金币的小姐姐又来了 Vx-18295846539 淘金币10000/10元 5000起收 天猫积分1000...

  • iOS 金币入袋(收金币)动画

    前言 碰到个需求,做一个金币入袋的动画,如下图这种效果,因为用的地方比较多,所以我把它进行了封装,使用起来比较方便...

  • 随手笔记

    Flutter Android工程中嵌入Flutter工程 使用Flutter实现Toast效果 Flutter与...

  • Flutter 仿抖音效果 (二) 界面布局

    Flutter 仿抖音效果 (一) 全屏点爱星Flutter 仿抖音效果 (二) 界面布局[Flutter 仿抖音...

  • flutter常用控件用法收藏

    flutter圆角效果实现 outlineButton 头部折叠动画效果 flutter按钮shape设置 Flu...

  • 撒金币-粒子效果

    话不多说,项目改版,旧的功能需要移除,拆分出来记录一下以便需要时回顾。 https://github.com/ty...

  • Unity中,飞金币效果

    需求 从a点生成一些金币飞往b点。a、b可以是3D世界中的点,也可以是UI中的点。 用途:获得金币后,出现金币效果...

  • 算法——模拟

    金币 题目描述 国王将金币作为工资,发放给忠诚的骑士。第一天,骑士收到一枚金币;之后两天(第二天和第三天),每天收...

  • Flutter如何实现视差滚动?

    Flutter如何实现视差滚动? 效果如下: 在Flutter 中实现视差滚动,非常简单,Flutter已经提供相...

  • 背景半弧形界面绘制

    效果图: 利用flutter canvas绘制

网友评论

      本文标题:flutter 收金币效果

      本文链接:https://www.haomeiwen.com/subject/uspvjjtx.html