js手机端商品飞入购物车效果

<button id="addToCart">添加到购物车</button>
<div id="cartIcon">🛒</div>
<div id="product" class="product">商品</div>

.product {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

#cartIcon {
  position: absolute;
  top: 200px;
  right: 200px;
  font-size: 30px;
}

document.getElementById('addToCart').addEventListener('click', function() {
  var product = document.getElementById('product');
  var cartIcon = document.getElementById('cartIcon');
  
  var startX = product.offsetLeft;
  var startY = product.offsetTop;
  var endX = cartIcon.offsetLeft + 15; // 购物车图标中心位置
  var endY = cartIcon.offsetTop - 15; // 购物车图标中心位置
  
  product.style.transition = 'none';
  product.style.left = startX + 'px';
  product.style.top = startY + 'px';
  
  requestAnimationFrame(function animate(time) {
    var timeFraction = (time - startTime) / duration;
    if (timeFraction > 1) timeFraction = 1;
    
    var progress = easeInOutQuad(timeFraction);
    
    product.style.left = startX + (endX - startX) * progress + 'px';
    product.style.top = startY + (endY - startY) * progress + 'px';
    
    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    } else {
      product.style.display = 'none'; // 隐藏商品元素
    }
  });
});

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}