还在为丢失源码烦恼？这份美团购物车小球动画完整代码让你效率翻倍

前言

最近做了一个小需求，记得之前写过这个美团购物车小球动画效果还发在csdn里面了，但需要的时候却找不到，不知道什么时候给删了，今天再给大家分享一下这个功能的源码，以便以后的使用。

先来看看效果

具体实现逻辑

每次点击时，拿到点击的位置作为小球的开始位置，再获取到购物车的结束位置。确定了两端位置之后，给小球设置css的path路径（使用贝塞尔曲线），最后通过animate方法执行动画效果，即可实现。

核心代码

// 小球的css设置
.ball {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #ff3000, #ff9000);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  right: 0;
}
// 添加购物车方法
const addToCart = (item, event) => {
   cart.count++;
   cart.total += item.price;
   // 获取点击位置
   const startX = event.clientX;
   const startY = event.clientY;
   createBall(startX, startY);
 };
 // 创建小球
 const createBall = (startX, startY) => {
   let endEle = document
     .querySelector(".cart")
     .getBoundingClientRect();
   let endX = Math.floor(endEle.left + endEle.width / 2);
   let endY = Math.floor(endEle.top + endEle.height / 2);
   let fatherEle = document.querySelector(".container");
   let ball = document.createElement("div");
   ball.classList.add("ball");
   ball.style.left = startX + "px";
   ball.style.top = startY + "px";
   // 贝塞尔曲线路径
   ball.style.offsetPath = `path('M${0} ${0} C${100} ${-100}, ${
     endX - startX
   } ${endY - startY}, ${endX - startX} ${endY - startY}')`;
   fatherEle.appendChild(ball);
   setTimeout(() => {
     fatherEle.removeChild(ball);
   }, Number(animationSpeed.value) - 100);
   ball.animate(
     // 将偏移路径动画化
     { offsetDistance: [0, "100%"] },
     {
       duration: Number(animationSpeed.value),
       iterations: 1,
       easing: "cubic-bezier(.667,0.01,.333,.99)",
       direction: "alternate",
     }
   );
 };