uni-app实现加入购物车飞入动画贝赛尔曲线

要实现加入购物车飞入动画，可以使用贝塞尔曲线来控制动画路径。具体实现步骤如下：

1. 在购买按钮点击事件中，获取购买按钮的位置和购物车图标的位置，并计算出两者之间的距离。
2. 创建一个贝塞尔曲线，控制点设置为购买按钮位置和购物车图标位置的中心点，终点设置为购物车图标位置。
3. 使用CSS3动画或JavaScript来实现动画效果，让购买按钮沿着贝塞尔曲线飞入购物车。

下面是一个简单的实现示例：

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <div class="cart-icon"></div>
    <div class="ball"></div>
  </div>
</template>

<script>
export default {
  methods: {
    addToCart() {
      const button = document.querySelector('button')
      const cartIcon = document.querySelector('.cart-icon')
      const ball = document.querySelector('.ball')
      const buttonRect = button.getBoundingClientRect()
      const cartIconRect = cartIcon.getBoundingClientRect()
      const deltaX = cartIconRect.left - buttonRect.left
      const deltaY = cartIconRect.top - buttonRect.top

      const controlPointX = (buttonRect.left + cartIconRect.left) / 2
      const controlPointY = buttonRect.top - 100

      ball.style.left = buttonRect.left + 'px'
      ball.style.top = buttonRect.top + 'px'

      const bezierPath = `M${buttonRect.left},${buttonRect.top} Q${controlPointX},${controlPointY} ${cartIconRect.left},${cartIconRect.top}`
      ball.animate(
        [
          { transform: `translate(0,0)` },
          { transform: `translate(${deltaX}px, ${deltaY}px)` }
        ],
        {
          duration: 500,
          easing: 'ease-out',
          fill: 'forwards'
        }
      )

      ball.animate(
        [
          { transform: `translate(${deltaX}px, ${deltaY}px)` },
          { transform: `translate(0,0)` }
        ],
        {
          duration: 500,
          easing: 'ease-in',
          fill: 'forwards',
          delay: 500
        }
      )

      ball.animate(
        [
          { opacity: 1 },
          { opacity: 0 }
        ],
        {
          duration: 500,
          fill: 'forwards',
          delay: 1000
        }
      )

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
      path.setAttribute('d', bezierPath)
      path.setAttribute('fill', 'none')
      path.setAttribute('stroke', 'red')
      path.setAttribute('stroke-width', '2')
      document.querySelector('.container').appendChild(path)
    }
  }
}
</script>

<style>
.cart-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: url('cart.png');
  background-size: cover;
}

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}

.container {
  position: relative;
}
</style>

这里使用了CSS3动画和JavaScript动画结合的方式来实现购买按钮飞入购物车的效果。在addToCart方法中，首先获取购买按钮和购物车图标的位置，并计算出两者之间的距离。然后根据贝塞尔曲线的控制点计算出贝塞尔曲线路径，并创建一个SVG path元素来显示路径。最后使用CSS3动画和JavaScript动画来实现购买按钮沿着贝塞尔曲线飞入购物车的效果。