uniapp 加入购物车实现贝塞尔曲线(仅支持H5, APP没测试)

前言:

在移动端电商应用中，一个流畅而美观的购物车添加动画能够显著提升用户体验，增加用户对商品的购买决策。特别是在 Uni-app 这样的跨平台开发框架下，如何实现这样的购物车动画成为了开发者关注的重要问题。

Uni-app 是基于 Vue.js 的一款跨平台应用开发框架，它支持一次编写多端运行，包括小程序、H5 网页和App等。在这篇博客中，我们将探讨如何利用 Uni-app 实现购物车动画效果，重点是实现仿美团添加购物车时的贝塞尔曲线动画效果。

本文将介绍实现购物车动画效果的基本思路和技术细节，通过 Vue 组件和动画特性来展示如何创建流畅且有趣的购物体验。让我们一起开始探索吧！

实现步骤:

简单来说就说就是知道三个元素的位置: 一是点击加号的按钮, 二是购物车的位置, 三是点击加号的icon, 下面来看代码 。

代码实现: (没有封装组件,正在做,嘻嘻~)

首先是HTML 部分:

// 点击加号的部分

 <view
    class="addToCart_item"
    :id="`id_${item.id}`"
     @click.stop="(e) => {addToCart(item, e)}"
   >
      <image
        src="/static/image/addition.png"
        mode="scaleToFill"
       />
 </view>

// 底部购物车部分
<view class="left_icon">
    <text
       class="icon_num"
       v-show="total > 0"
     >{{ total }}</text>
</view>

这是JavaScript 的部分:

// 加一件商品到购物车
addToCart(item, event) {
  // 获取点击按钮和购物车图标元素
  const btn = document.querySelector(`#id_${item.id}`); // 点击的加入购物车按钮
  const car = document.querySelector('.left_icon'); // 购物车图标

  const PLUS_SIZE = 30; // 加号图标尺寸

  // 创建一个动画元素（用于动画效果）
  const div = document.createElement('div');
  div.className = 'plus';
  div.innerHTML = `<div class="plus_icon"></div>`;

  // 获取点击按钮的位置信息
  const target = btn;
  const btnRect = target.getBoundingClientRect();
  const left = btnRect.left + btnRect.width / 2 - PLUS_SIZE / 2; // 计算动画元素的初始左偏移
  const top = btnRect.top - PLUS_SIZE; // 计算动画元素的初始上偏移

  // 获取购物车图标的位置信息
  const carRect = car.getBoundingClientRect();
  const x = carRect.left + carRect.width / 2 - PLUS_SIZE / 2 - left; // 计算动画元素的终点水平偏移
  const y = carRect.top - PLUS_SIZE - top; // 计算动画元素的终点垂直偏移

  // 设置动画元素的初始位置和终点位置
  div.style.setProperty('--left', `${left}px`);
  div.style.setProperty('--top', `${top}px`);
  div.style.setProperty('--x', `${x}px`);
  div.style.setProperty('--y', `${y}px`);

  // 监听动画结束事件，移除动画元素
  div.addEventListener('animationend', () => {
    div.remove();
  });

  // 将动画元素添加到页面中（购物车动画效果）
  document.querySelector('.index').appendChild(div);

  /*********  下面是自己添加购物车的逻辑，具体逻辑可以根据需求自行添加 *********/
},

 最后是css3 的部分:

.plus {
  position: fixed;
  top: var(--top);
  left: var(--left);
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  .plus_icon {
    width: 100%;
    height: 100%;
    background-color: #16b29d;
    border-radius: 50%;

    color: #fff;
  }
}
.plus {
  animation: moveY 0.5s cubic-bezier(0.5, -0.5, 1, 1);
}
.plus_icon {
  animation: moveX 0.5s linear;
}

@keyframes moveX {
  to {
    transform: translateX(var(--x));
  }
}

@keyframes moveY {
  to {
    transform: translateY(var(--y));
  }
}

注: uniapp 使用css 的时候不能放当前页面,只能放app.vue 页面 (原理: 小博主也不知道为啥)

如有不懂的, 欢迎大家在下面评论,小博主会好好仔细的回答你们的问题啦,如有更简单的方法, 也请大家告诉我这个练习一坤年的小菜鸟前端啦, 哈哈哈~