Skip to main content

Vue版本2

#规定空间内元素随机生成

<template>
  <div class="contain" ref="userinfo">
    <div
      v-for="(item, index) in ballList"
      :key="index"
      class="ball"
      :style="{
        top: all_y[index] + 'px',
        left: all_x[index] + 'px',
        transition: 'all 1s',
      }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ballList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //后台小球总个数
      jsonArr: [], //所有小球的集合位置
      all_x: [], //第index小球X位置
      all_y: [], //第index小球Y位置
    };
  },
  mounted() {
    //初始化：小球出现
    this.getQiu(this.ballList.length);
    //为了对应每个index小球X轴和Y轴,把随机数组中的X/Y位置进行拆分
    for (let i = 0; i < this.jsonArr.length; i++) {
      this.all_x.push(this.jsonArr[i].xStart);
      this.all_y.push(this.jsonArr[i].yStart);
    }
  },
  methods: {
    getQiu(number) {
      //小球间隔
      let iconWidth = 50;
      let iconHeight = 50;

      //浏览器（范围框）的宽高
      let targetWidth = this.$refs.userinfo.offsetWidth;
      let targetHeight = this.$refs.userinfo.offsetHeight;

      //计算X轴和Y轴放置元素的个数
      var xNum = parseInt(targetWidth / iconWidth, 10);
      var yNum = parseInt(targetHeight / iconHeight, 10);
      var allNum = xNum * yNum; //浏览器窗口内总共可以放置元素的个数
      console.log(allNum); //共40个小球
      //当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时，则返回
      if (number >= allNum) {
        return false;
      }

      //存放小球
      let tmpArray = [];
      for (let i = 0; i < allNum; i++) {
        tmpArray.push(i);
      }
      console.log(tmpArray); //[0,1,2,...,39]//依次序铺满屏幕共40个

      while (number) {
        //随机取出小球pointer
        var pointer = Math.floor(Math.random() * allNum);
        //删除数组tmpArray中第pointer值
        delete tmpArray[pointer];
        //根据随机小球索引 =》 计算固定小球原本位置，存放到jsonArr生成随机数组[0:{y:50,x:450},1:{y:0,x:200}]
        this.jsonArr.push({
          yStart: parseInt(pointer / xNum, 10) * iconWidth, //y位置(向下取整 3.8取3)
          xStart: (pointer % xNum) * iconHeight, //x位置（取余数 19/10余数9）
        });
        number--; //跳出判断
      }
    },
  },
};
</script>
<style>
.contain {
  border: 1px solid red;
  position: relative;
  width: 500px;
  height: 200px;
}

.ball {
  width: 50px;
  height: 50px;
  background: grey;
  border-radius: 100%;
  line-height: 50px;
  position: absolute;
  animation: identifier 1s alternate infinite;
}
</style>

数据源​

data() {
  return {
      ballList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //后台小球总个数
      jsonArr: [], //所有小球的集合位置
      all_x: [], //把jsonArr拆分=》第index小球X位置
      all_y: [], //把jsonArr拆分=》第index小球Y位置
  }
}

笔记​

  • mounted挂载周期
    • 获取所有随机小球位置数据 jsonArr
    • jsonArr 单独拆分 X 轴和 Y 轴
  mounted() {
    //初始化：获取所有随机小球位置数据
    this.getQiu(this.ballList.length);
    //为了对应每个index小球X轴和Y轴,把随机数组中的X/Y位置进行拆分
    for (let i = 0; i < this.jsonArr.length; i++) {
      this.all_x.push(this.jsonArr[i].xStart);
      this.all_y.push(this.jsonArr[i].yStart);
    }
  },
  • 小球间隔
let iconWidth = 50;
let iconHeight = 50;
  • 通过ref获取当前设备宽高（规定的范围）
let targetWidth = this.$refs.userinfo.offsetWidth;
let targetHeight = this.$refs.userinfo.offsetHeight;
  • 计算范围内防止元素的个数
var xNum = parseInt(targetWidth / iconWidth, 10);
var yNum = parseInt(targetHeight / iconHeight, 10);
var allNum = xNum * yNum; //范围内总共可以放置元素的个数
console.log(allNum); //共40个小球
  • 当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时，则返回
if (number >= allNum) {
   return false;
}
  • 存放小球数组
let tmpArray = [];
for (let i = 0; i < allNum; i++) {
    tmpArray.push(i)
}
console.log(tmpArray); //[0,1,2,...,39]//依次序铺满屏幕共40个
  • 计算随机小球的位置放置到是jsonArr数组
while (number) {
    //随机取出小球pointer
    var pointer = Math.floor(Math.random() * allNum);
    //删除数组tmpArray中第pointer值
    delete tmpArray[pointer];
    //根据随机小球索引 =》 计算固定小球原本位置，存放到jsonArr生成随机数组[0:{y:50,x:450},1:{y:0,x:200}]
    this.jsonArr.push({
       yStart: parseInt(pointer / xNum, 10) * iconWidth, //y位置(向下取整 3.8取3)
       xStart: (pointer % xNum) * iconHeight, //x位置（取余数 19/10余数9）
     });
     number-- //跳出判断
}

#能量收集

<template>
  <div class="contain" ref="userinfo">
    <div
      v-for="(item, index) in ballList"
      :key="index"
      class="ball"
      :class="item.type ? 'hide' : ''"
      :style="{
        top: all_y[index] + 'px',
        left: all_x[index] + 'px',
        animationName:item.type ? 'hide' : 'bottleFade',
        animationDuration:'1s',
        animationDirection:'alternate',
        animationIterationCount:item.type ? '1' : 'infinite',
        animationDelay:item.type ? '0s' : index*0.1+'s',
        animationTimingFunction:'ease-in-out',
      }"
      @click="toggle(item)"
    >
        {{ item.name }}
    </div>
    <div
      class="tree"
      :class="inAnimation ? 'Anim' : ''"
      @animationend="inAnimation = false"
    >
      tree
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      ballList: [
        { id: "1", name: "1g", type: false },
        { id: "2", name: "2g", type: false },
        { id: "3", name: "3g", type: false },
        { id: "4", name: "4g", type: false },
        { id: "5", name: "5g", type: false },
      ], //后台小球总个数
      jsonArr: [], //所有小球的集合位置
      all_x: [], //第index小球X位置
      all_y: [], //第index小球Y位置
      inAnimation: false,
    };
  },
  mounted() {
    //初始化：小球出现
    this.getQiu(this.ballList.length);
    //为了对应每个index小球X轴和Y轴,把随机数组中的X/Y位置进行拆分
    for (let i = 0; i < this.jsonArr.length; i++) {
      this.all_x.push(this.jsonArr[i].xStart);
      this.all_y.push(this.jsonArr[i].yStart);
    }
  },
  methods: {
    //随机初始化小球
    getQiu(number) {
      //小球间隔
      let iconWidth = 60;
      let iconHeight = 60;

      //浏览器（范围框）的宽高
      let targetWidth = this.$refs.userinfo.offsetWidth;
      let targetHeight = this.$refs.userinfo.offsetHeight;

      //计算X轴和Y轴放置元素的个数
      var xNum = parseInt(targetWidth / iconWidth, 10);
      var yNum = parseInt(targetHeight / iconHeight, 10);
      var allNum = xNum * yNum; //浏览器窗口内总共可以放置元素的个数
      console.log(allNum); //共40个小球
      //当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时，则返回
      if (number >= allNum) {
        return false;
      }

      //存放小球
      let tmpArray = [];
      for (let i = 0; i < allNum; i++) {
        tmpArray.push(i);
      }
      console.log(tmpArray); //[0,1,2,...,39]//依次序铺满屏幕共40个

      while (number) {
        //随机取出小球pointer
        var pointer = Math.floor(Math.random() * allNum);
        //删除数组tmpArray中第pointer值
        delete tmpArray[pointer];
        //根据随机小球索引 =》 计算固定小球原本位置，存放到jsonArr生成随机数组[0:{y:50,x:450},1:{y:0,x:200}]
        this.jsonArr.push({
          yStart: parseInt(pointer / xNum, 10) * iconWidth, //y位置(向下取整 3.8取3)
          xStart: (pointer % xNum) * iconHeight, //x位置（取余数 19/10余数9）
        });
        number--; //跳出判断
      }
    },
    toggle(e) {
      let id = e.id
      this.ballList.forEach((item) => {
        if (id === item.id) {
          e.type = true;
        }
      });
      this.inAnimation = true;
    },
  },
};
</script>
<style>
.contain {
  border: 1px solid red;
  position: relative;
  width: 500px;
  height: 200px;
}
.tree {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  z-index: -1;
  cursor: pointer;
  transform-origin: bottom;
}

.Anim {
  animation: treeScale 0.7s alternate ease-in-out;
  animation-delay: 0.5s;
}

@keyframes treeScale {
  0% {
    transform: scaleY(1);
  }

  25% {
    transform: scaleY(0.9);
  }
  50% {
    transform: scaleY(1.2);
  }
  75% {
    transform: scaleY(0.9);
  }
  100% {
    transform: scaleY(1);
  }
}
.ball {
  width: 50px;
  height: 50px;
  background: grey;
  border-radius: 100%;
  line-height: 50px;
  position: absolute;
  cursor: pointer;
}

@keyframes bottleFade {
  from {
    transform: translate(0, 0px);
  }
  to {
    transform: translate(0, 5px);
  }
}

.hide {
  animation: hide 1s forwards;
}
@keyframes hide {
  to {
    top: 100%;
    left: 50%;
    opacity: 0;
  }
}
</style>

笔记​

  • 点击一次元素播放一次动画（树缩放）
.Anim {
  animation: treeScale 0.7s alternate ease-in-out;
  animation-delay: 0.5s;
}

@keyframes treeScale {
  0% {
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(0.9);
  }
  50% {
    transform: scaleY(1.2);
  }
  75% {
    transform: scaleY(0.9);
  }
  100% {
    transform: scaleY(1);
  }
}