标签：style 晃动 const dom 小球 购物车 else ballDom

抛出小球加到地方对应元素晃动(加入购物车动画)

/** *
 * 横向抛小球到购物车
 * @param addBtnDom 增加按钮的dom元素或者选择器，初始位置
 * @param shopCarDom 购物车的dom元素或选择器，结束位置
 * @param shopImg 购物车需要晃动的元素
 */
export default function controllPath(addBtn, shopCar, shopImg) {
  // 获取小球初始元素和最终到达元素
  let addBtnDom = null
  let shopCarDom = null
  if (typeof addBtn === 'string') {
    addBtnDom = document.querySelector(addBtn)
  } else if (addBtn instanceof HTMLElement) {
    addBtnDom = addBtn
  } else {
    console.error('加入购物车动画传入的参数错误： 第一个参数应为增加按钮的dom元素或该元素的选择器。')
    return
  }
  if (typeof shopCar === 'string') {
    shopCarDom = document.querySelector(shopCar)
  } else if (shopCar instanceof HTMLElement) {
    shopCarDom = shopCar
  } else {
    console.error('加入购物车动画传入的参数错误： 第二个参数应为增加按钮的dom元素或该元素的选择器。')
    return
  }

  // 获取两个dom的位置
  const addBtnposition = addBtnDom.getBoundingClientRect()
  const shopCarPosition = shopCarDom.getBoundingClientRect()
  const addBtnCenterX = (addBtnposition.left + addBtnposition.right) / 2
  const addBtnCenterY = (addBtnposition.top + addBtnposition.bottom) / 2
  const shopCarCenterX = (shopCarPosition.left + shopCarPosition.right) / 2
  const shopCarCenterY = (shopCarPosition.top + shopCarPosition.bottom) / 2
  // 计算增加按钮 是在 相对于购物车的 左边还是右边（用于控制后面的移动方向）
  const relativePosition = addBtnCenterX > shopCarCenterX ? -1 : 1

  // 获取连个dom之间的横向和纵向距离
  const xDistance = Math.abs(addBtnCenterX - shopCarCenterX)
  const yDistance = Math.abs(addBtnCenterY - shopCarCenterY)

  // 绘制小球并设置其初始位置
  const ballDom = drawBall()
  ballDom.style.top = addBtnCenterY + 'px'
  ballDom.style.left = addBtnCenterX + 'px'
  document.body.appendChild(ballDom)
  
  // 小球的横纵坐标，需要加上的偏移
  let xAbscissa = 0; let yAbscissa = 0  

  const addCount = xDistance / 10 // 计算变化次数
  let curCount = 0 // 当前变化次数
  const onceY = 40 / (addCount / 2) // 每次Y轴移动大小
  // 设置移动路径
  const ballTimer = setInterval(function() {
    curCount += 1
    // 每次重新坐标
    xAbscissa += 10 * relativePosition
    // if ()
    // 实际应该除以2，但为了动画效果更好，改为1.8
    if (curCount <= addCount / 1.8) {
      yAbscissa -= onceY
    } else {
      yAbscissa += onceY
    }
    ballDom.style.top = addBtnCenterY + yAbscissa + 'px'
    ballDom.style.left = addBtnCenterX + xAbscissa + 'px'
    // 检查是否到达终点
    const surplusDistance = parseInt(ballDom.style.left) - shopCarCenterX
    // const surplusDistanceY = parseInt(ballDom.style.top) - shopCarCenterY
    if (Math.abs(surplusDistance) <= 10) {
      clearInterval(ballTimer)
      document.body.removeChild(ballDom)
    }
  }, 50)

  let shopImgDom = null // 购物车图片
  if (typeof shopImg === 'string') {
    shopImgDom = document.querySelector(shopImg)
  } else if (shopImg instanceof HTMLElement) {
    shopImgDom = shopImg
  } else {
    console.log('加入购物车动画传入的参数错误： 第三个参数应为增加按钮的dom元素或该元素的选择器。')
    return
  }
  let rotateCount = 4 // 购物车图片左右晃动次数
  let rotateVal = 0 // 晃动角度
  const rotateInterval = setInterval(() => {
    if (rotateCount < 0) clearInterval(rotateInterval)
    else rotateCount--
    if (rotateCount === -1) rotateVal = 0 // 结束时摆正
    else rotateVal = 10 * Math.pow(-1, rotateCount) // 晃动角度10，一正一负
    shopImgDom.style.transform = 'rotate(' + rotateVal + 'deg)' // 设置css样式
  }, 100)
}

/*
* 绘制小球
* */
function drawBall() {
  const ballDom = document.createElement('div')
  ballDom.style.width = '20px'
  ballDom.style.height = '20px'
  ballDom.style.border = '1px solid #ccc'
  ballDom.style.background = '#fa5151'
  ballDom.style.borderRadius = '50%'
  ballDom.style.position = 'absolute'
  ballDom.style.zIndex = 99999
  return ballDom
}

• 传入的dom参数的样式需要自己先写好，抛出的路线和晃动次数与角度可以自己调整

标签：style,晃动,const,dom,小球,购物车,else,ballDom
来源： https://www.cnblogs.com/jia-zq/p/16659575.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。