js实现动画效果基础

<template>
  <div>
    <div class="video-water" ref="video-water">
      <div class="container-video" ref="container"></div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imgList: [],
      showImgIndex: 0
    }
  },

  mounted() {
    this.imgList = this.dataList

    // this.getInfo()
    this.goAnimation()
  },

  computed: {
    dataList() {
      return  [
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oubUP.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1ou9BV.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1ou4Zo.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1ou0xY.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oubV4.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oueqf.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oueqi.img',
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1ou0y1.img',
      ]
    }
  },




  methods: {
    goAnimation() {
      if (!this.imgList.length) return this.$emit("openAllWork");
      this.getInfo();
    },
    getInfo() {
      const randomIndex = Math.floor(Math.random() * this.imgList.length);
      const spliceItem = this.imgList[randomIndex];
      this.imgList.splice(randomIndex, 1);
      this.imgList.forEach((item,) => {
        const img = document.createElement("img");
        img.src = item;
        img.className = `v-waterfall-item`;
        this.$refs["container"].appendChild(img);
        this.handleContainer(img);
      });
      // 中间展示图片
      this.handleCenterImg(spliceItem);
    },

    handleCenterImg(spliceItem) {
      const img = document.createElement("img");
      img.src = spliceItem;
      img.className = `v-waterfall-item`;
      this.$refs["container"].appendChild(img);
      this.handleContainer(img, true);
      this.centerImage = img;
    },

    async handleContainer(img, isScale=false) {
      // img.style.cursor = "pointer";

      const videoWater = this.$refs["video-water"];
      // 创建元素的宽高等
      let origin = {
        X: 0,
        Y: 0,
        scale: 1,
        opacity: 0,
        width: videoWater.offsetWidth * 0.05,
        height: videoWater.offsetWidth * 0.05 * 0.6,
      };
      // x移动范围
      const Xorigin = videoWater.offsetWidth / 2 - origin.width;
      const cw = origin.width * 3;
      const Yorigin = videoWater.offsetHeight / 2 - origin.height;
      const ch = origin.height * 2;
      // 正方向
      const ZXSize = Math.round(Math.random() * (Xorigin - cw) + cw);
      // y移动范围// 正方向
      const ZYSize = Math.round(Math.random() * (Yorigin - ch) + ch);
      console.log(`
      大盒子半径宽:${videoWater.offsetWidth / 2},高:${
          videoWater.offsetHeight / 2
      },
      小盒子宽：${origin.width}, 高:${origin.height}
        正x轴max:${Xorigin},min:${cw},
        正y轴max:${Yorigin},min:${ch},
        反x轴max:${Xorigin},min:${-cw},
        反y轴max:${Yorigin},min:${-ch},
        `);
      const azimuthType = {
        0: {
          x: -1,
          y: 1,
        },
        1: {
          x: 1,
          y: 1,
        },
        2: {
          x: 1,
          y: -1,
        },
        3: {
          x: -1,
          y: -1,
        },
      };
      const azimuthRandom = Math.floor(Math.random() * 4);
      const XSize = azimuthType[azimuthRandom].x * ZXSize;
      const YSize = azimuthType[azimuthRandom].y * ZYSize;
      let timer = await setInterval(() => {
        let isReturnX = XSize > 0 ? origin.X > XSize : origin.X < XSize;
        let isReturnY = YSize > 0 ? origin.Y > YSize : origin.Y < YSize;

        if (isReturnX || isReturnY || (isScale && origin.scale >= 2)) {
          img.style.left = isScale ? 0 : XSize + "px";
          img.style.top = isScale ? 0 : YSize + "px";
          img.style.opacity = 1;
          img.style.scale = isScale ? '3': '1';
          img.style.zIndex = isScale ? 999 : "";
          return clearInterval(timer);
        } // 2 秒后结束动画
        origin = {
          X: XSize > 0 ? origin.X + 1 : origin.X - 1,
          Y: YSize > 0 ? origin.Y + 1 : origin.Y - 1,
          opacity: origin.opacity === 1 ? 1 : origin.opacity + 0.1,
          scale: origin.scale === 3 ? 3 : origin.scale + 0.1,
          width: origin.width,
          height: origin.height,
        };
        origin.X = isScale ? 0 : origin.X;
        origin.Y = isScale ? 0 : origin.Y;
        img.style.opacity = origin.opacity;
        img.style.scale = isScale ? origin.scale : 1;
        img.style.left = origin.X + "px";
        img.style.top = origin.Y + "px";
      }, 1);
      img.addEventListener("click", (e) => {
        const transfromUrl = this.centerImage.src;
        this.centerImage.src = e.target.src;
        e.target.src = transfromUrl;

        this.$refs["container"].removeChild(
            this.$refs["container"].children[
            this.$refs["container"].children.length - 1
                ]
        );
        this.handleCenterImg(this.centerImage.src);
      });
    },
  }
}
</script>

<style scoped>

.video-water {
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: #000;
  min-height: 600px;
  overflow: hidden;

  .container-video {
    position: relative;
    .v-waterfall-item {
      position: absolute;
      width: 100px;
      height: 60px;
      opacity: 0;
      transition-duration: 3s;
      cursor: pointer;
      object-fit: contain;
    }
  }
}
</style>