购物车加入动画，美观酷炫的视觉享受

2023-09-07 19:00:09

微信小程序加入购物车动画的实现（向上、向下）

随着微信小程序的蓬勃发展，小程序已经成为企业和个人进行推广和销售的重要平台。为了提升用户体验，许多小程序都加入了购物车功能。为了让购物车更加美观和实用，我们可以为其添加加入动画。

实现流程

获取屏幕的高度大小。
获取点击的位置（购物车的位置我们定为最上方或者最下方），定义移动距离。
在 CSS 里调用 Bezier 函数 aCartScale 是，在曲线的最后，实现了个购物车抖动的动作。

具体步骤

在 CSS 中创建动画样式。

.cart-animation {
  animation: cart-scale 1s ease-in-out;
}

@keyframes cart-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

在 HTML 中添加购物车元素。

<div class="cart-animation">
  <img src="cart.png" alt="购物车">
</div>

在 JavaScript 中添加事件监听器。

document.addEventListener('click', function(e) {
  // 获取点击的位置
  var clickX = e.clientX;
  var clickY = e.clientY;

  // 获取屏幕的高度
  var screenHeight = document.documentElement.clientHeight;

  // 定义移动距离
  var moveDistance = screenHeight - clickY;

  // 添加动画样式
  document.querySelector('.cart-animation').classList.add('cart-scale');

  // 延迟一段时间后移除动画样式
  setTimeout(function() {
    document.querySelector('.cart-animation').classList.remove('cart-scale');
  }, 1000);
});