Vue 仿蚂蚁森林能量球生成&获取组件-CSDN博客

本文链接：https://blog.csdn.net/lavendersue/article/details/114966214

本文介绍了一个使用 Vue 开发的组件，该组件模仿了蚂蚁森林中能量球的生成和领取过程。作者在实现过程中遇到网上资料稀缺的问题，因此决定分享自己的代码。文章详细说明了Y轴和X轴的计算逻辑，并提供了组件代码`sun.vue`的使用示例。虽然存在一些限制，如最大显示数量需要手动调整，动效固定等，但对于想在此基础上进行扩展和优化的开发者来说，这是一个不错的起点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编最近刚刚结束了一个需求，需求是这样的：通过做任务生成一定的太阳，领取太阳后达到一定等级树苗进行生长。嗯？听起来是不是觉得很熟悉？是的，小编就想到了蚂蚁森林，不知道各位同学获取到多少个证书了呢？这些证书花了你们多少毛爷爷呢？
原本小编不想自己实现的，奈何网上资料太少，所以小编只能自己动手了，代码奉上，有需要的童鞋自取哦~

大致方案如下图所示：
（有些文字打错了，但请不要注意这些细节，图只是为了方便了解代码逻辑而已）
一、 Y轴计算
1、总数为奇数
在这里插入图片描述
2、总数为偶数

二、 X轴计算
1、总数为奇数

在这里插入图片描述
2、总数为偶数

组件代码如下：命名为sun.vue

<template>
  <div class="sun-container">
    <ul>
      <li
        v-for="(item, index) in actualSunData"
        :key="index"
        :style="sunStyle(item)"
        :class="isNoMore ? 'transition' : 'opacity'"
        @click="handleReceiveSun(item, index)"
      >
        <img :src="imgUrl" class="sun-img" :style="sunImg" ref="sunImg" />
        <p
          v-if="isShowCountDown && sunCountDownData[index]"
          class="surplus-time"
        >
          {
  { sunCountDownData[index] }}<br />消失
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import sunImgUrl from "@/img/sun-img@2x.png";
export default {
  props: {
    //太阳的图片地址
    imgUrl: {
      type: String,
      default: sunImgUrl,
    },
    //太阳的样式
    sunImgStyle: {
      type: Object,
      default: function () {
        return {
          width: "60px",
          height: "60px",
        };
      },
    },
    //太阳总个数
    allSunCount: {
      type: Number,
      default: 0,
    },
    //太阳能显示的最大个数
    sunCountMax: {
      type: Number,
      default: 6,
    },
    //太阳附带的数据
    sunData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    //是否显示倒计时
    isShowCountDown: {
      type: Boolean,
      default: true,
    },
    //Y轴基线坐标
    yBase: {
      type: Number,
      default: 0,
    },
    //Y轴太阳与太阳之间间隔
    ySpace: {
      type: Number,
      default: 0,
    },
    //X轴太阳与太阳之间间隔
    xSpace: {
      type: Number,
      default: 5,
    },
    //太阳动效到达X轴位置
    xMoveEnd: {
      type: Number,
      default: document.body.clientWidth / 2,
    },
    //太阳动效到达的Y轴位置
    yMoveEnd: {
      type: Number,
      default: 400,
    },
  },
  data() {
    return {
      //实际能显示的太阳个数
      sunCount: 0,
      //X轴基线坐标
      xBase: 0,
      //X轴太阳与太阳之间间隔
      xSpaceNum: 0,
      //Y轴太阳与太阳之间间隔
      ySpaceNum: 0,
      //记录被领取的太阳的X轴坐标
      oldX: 0,
      //记录被领取的太阳的Y轴坐标
      oldY: 0,
      //太阳动效到达X轴位置
      xMove: 0,
      //太阳动效到达Y轴位置
      yMove: 0,
      //当前页面body 默认字体大小，用于px转换rem
      fontSize: 0,
      //屏幕倍数
      clientMultiple: document.body.clientWidth / 375,
      //是否存在备用太阳数据
      isNoMore: true,
      //渲染的太阳数据
      actualSunData: [],
      //未渲染的太阳数据即备用数据
      moreSunData: [],
      //太阳图片实际样式
      sunImg: {},
      //太阳的半径
      sunR: 30,
      //倒计时
      countDownTimer: null,
      //倒计时数据
      sunCountDownData: [],
    };
  },
  created() {
    this.init();
  },
  watch: {
    sunData(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.handleCountDownInterval();
    },
  },
  methods: {
    //初始化
    init() {
      this.initData();
      this.calcXBase();
      this