动效学问大！原来H5、小程序商品加入购物车的抛物线动画是这样实现的！

前端

2023-12-28 03:02:03

在电商类H5、小程序中，商品加入购物车的抛物线动画是一种常见的交互效果。这种动画不仅能让用户在购物时获得愉悦的体验，还能增加商品的点击率和转化率。下面，我们就来介绍一下这种动画的实现方法。

实现原理

抛物线动画的实现原理并不复杂，它主要利用了CSS3的transform属性和transition属性。transform属性可以对元素进行平移、旋转、缩放等操作，而transition属性可以为元素的属性变化添加过渡效果。

具体来说，抛物线动画的实现过程如下：

首先，我们需要在页面中创建一个商品元素和一个购物车元素。
然后，我们需要为商品元素添加一个事件监听器，当用户点击商品元素时，触发该事件监听器。
在事件监听器中，我们需要使用transform属性将商品元素从当前位置移动到购物车元素的位置。同时，我们还需要使用transition属性为商品元素的移动添加过渡效果。
最后，我们需要在购物车元素中添加一个事件监听器，当商品元素移动到购物车元素的位置时，触发该事件监听器。在事件监听器中，我们需要将商品元素添加到购物车元素中。

实现步骤

下面，我们就来详细介绍一下抛物线动画的实现步骤。

在页面中创建一个商品元素和一个购物车元素。

<div class="product">
  <img src="product.png">
</div>

<div class="cart">
  <img src="cart.png">
</div>

为商品元素添加一个事件监听器，当用户点击商品元素时，触发该事件监听器。

document.querySelector('.product').addEventListener('click', function() {
  // 触发抛物线动画
  startParabolaAnimation(this);
});

在事件监听器中，我们需要使用transform属性将商品元素从当前位置移动到购物车元素的位置。同时，我们还需要使用transition属性为商品元素的移动添加过渡效果。

function startParabolaAnimation(productElement) {
  // 获取商品元素的坐标
  var productRect = productElement.getBoundingClientRect();

  // 获取购物车元素的坐标
  var cartRect = document.querySelector('.cart').getBoundingClientRect();

  // 计算商品元素移动的距离
  var dx = cartRect.left - productRect.left;
  var dy = cartRect.top - productRect.top;

  // 计算商品元素移动的时间
  var duration = Math.sqrt(dx * dx + dy * dy) / 1000;

  // 将商品元素移动到购物车元素的位置
  productElement.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';

  // 为商品元素的移动添加过渡效果
  productElement.style.transition = 'transform ' + duration + 's ease-in-out';
}

最后，我们需要在购物车元素中添加一个事件监听器，当商品元素移动到购物车元素的位置时，触发该事件监听器。在事件监听器中，我们需要将商品元素添加到购物车元素中。

document.querySelector('.cart').addEventListener('transitionend', function() {
  // 将商品元素添加到购物车元素中
  this.appendChild(document.querySelector('.product'));
});