vue3中web前端JS动画案例（二）多物体运动-多值运动

<script setup>
import { ref, onMounted, watch } from 'vue'
// ----------------------- 01 js 动画介绍---------------------
// 1、匀速运动
// 2、缓动运动（常见）
// 3、透明度运动
// 4、多物体运动
// 5、多值动画

// 6、自己的动画框架
// css3属性的transition 和 animation 可以实现运动

window.onload = () => {

  // ----------------- 05 多物体动画 --------------------
  // 鼠标移入移出
  // 使用 querySelectorAll 获取所有的 .mul 元素
  const mulElements = boxDom4?.value?.querySelectorAll('.mul');
  for (let i = 0; i < mulElements.length; i++) {
    if (i === 0) {
      mulElements[i].onmouseover = () => {
        allBoxAnimation(mulElements[i], 'height', 300)
      }
      mulElements[i].onmouseout = () => {
        allBoxAnimation(mulElements[i], 'height', 150)
      }
    } else if (i === 1) {
      mulElements[i].onmouseover = () => {
        allBoxAnimation(mulElements[i], 'width', 600)
      }
      mulElements[i].onmouseout = () => {
        allBoxAnimation(mulElements[i], 'width', 300)
      }
    } else if (i === 2) {
      mulElements[i].onmouseover = () => {
        allBoxAnimation(mulElements[i], 'opacity', 30)
      }
      mulElements[i].onmouseout = () => {
        allBoxAnimation(mulElements[i], 'opacity', 100)
      }
    }
  }
}


// ------------------05 多物体运动-------多值运动（添加形参attr)--------
const boxDom4 = ref(null)
let speed1 = 0
const allBoxAnimation = (dom, attr, endTarget) => {
  // 注意：针对于多物体运动，定时器的返回值要绑定当前的对象中。offsetWidth获取的是包括border的宽度,所以这里使用getComputed获取width
  clearInterval(dom.timer)
  dom.timer = setInterval(() => {
    let cur = 0
    // 0 获取样式属性
    // 透明度变化处理
    if (attr === 'opacity') {
      // 求透明度的变化速度，注意！小数需要取整
      cur = Math.round(parseFloat(getStyle(dom, attr)) * 100)
    } else {
      // 获取dom宽度或高度等
      cur = parseInt(getStyle(dom, attr))
    }

    // 1、求速度
    speed1 = (endTarget - cur) / 20
    speed1 = endTarget > cur ? Math.ceil(speed1) : Math.floor(speed1)

    // 2、临界处理
    if (endTarget === cur) {
      clearInterval(dom.timer)
      return
    }
    // 3、运动起来
    if (attr === 'opacity') {
      dom.style[attr] = `alpha(opacity=${cur + speed1})`
      dom.style[attr] = (cur + speed1) / 100
    } else {
      dom.style[attr] = cur + speed1 + 'px'
    }
  }, 30)
}

// dom 是对象, attr 是什么属性
// 获取元素属性的方法
const getStyle = (dom, attr) => {
  if (dom.currentStyle) {
    // 针对IE浏览器
    return dom.currentStyle[attr]
  } else {
    // 针对 Firefox浏览器
    return getComputedStyle(dom, null)[attr]
  }
}

onMounted(() => {
})
</script>

<template>
  <div class="main">
    <!-- 05多物体运动 -->
    <div id="box4" ref="boxDom4">
      <div class="mul"></div>
      <div class="mul"></div>
      <div class="mul"></div>
    </div>
  </div>


</template>

<style scoped lang="less">
.main {
  display: flex;
  flex-direction: column;

  // 多物体运动
  #box4 {
    .mul {
      width: 300px;
      height: 50px;
      background-color: rgb(111, 60, 253);
      margin: 20px 0;
      border: 4px solid #000;
    }
  }
}
</style>