uni-app 飞入购物车抛物线插件（最好可自定义抛出小球的图片）

在 uni-app 中实现一个飞入购物车的抛物线动画插件，可以通过自定义动画和抛出小球图片来完成。以下是一个简单的实现示例，包括如何自定义抛出小球的图片。

首先，确保你的项目中已经安装了 uni-app 并配置好了开发环境。

1. 准备图片资源： 将你需要的小球图片放置在 static 目录下，例如 static/images/ball.png。

2. 创建自定义组件： 创建一个自定义组件 CartBall.vue 来实现抛物线动画。

<template>
  <view class="container">
    <image :src="ballImage" class="ball" :style="ballStyle"></image>
  </view>
</template>

<script>
export default {
  props: {
    ballImage: {
      type: String,
      default: '/static/images/ball.png'
    },
    startX: {
      type: Number,
      required: true
    },
    startY: {
      type: Number,
      required: true
    },
    endX: {
      type: Number,
      required: true
    },
    endY: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      ballStyle: {}
    };
  },
  mounted() {
    this.animateBall();
  },
  methods: {
    animateBall() {
      let startTime = null;
      const animate = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const progress = timestamp - startTime / this.duration;
        const t = Math.min(progress, 1);
        const easeOutQuad = t * (2 - t);

        const newX = this.startX + (this.endX - this.startX) * easeOutQuad;
        const newY = this.startY - (this.startY - this.endY) * easeOutQuad * 0.5 + (this.endY - this.startY) * 0.5 * Math.pow(easeOutQuad, 2); // Parabolic equation adjustment

        this.ballStyle = {
          transform: `translate3d(${newX}px, ${newY}px, 0)`,
          transition: `transform ${this.duration}ms ease-out`
        };

        if (t < 1) {
          requestAnimationFrame(animate);
        } else {
          this.ballStyle = { display: 'none' }; // Hide the ball after animation
        }
      };
      requestAnimationFrame(animate);
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ball {
  width: 50px;
  height: 50px;
}
</style>

1. 使用组件： 在你的页面中使用 CartBall 组件，并传递相应的参数。

<template>
  <view>
    <CartBall 
      :ballImage="'/static/images/ball.png'" 
      :startX="100" 
      :startY="300" 
      :endX="300" 
      :endY="100" 
      :duration="2000" 
    />
  </view>
</template>

<script>
import CartBall from '@/components/CartBall.vue';

export default {
  components: {
    CartBall
  }
};
</script>

以上代码展示了如何在 uni-app 中实现一个带有自定义图片的抛物线动画组件，并将其集成到页面中。你可以根据需要调整动画的起始和结束位置、持续时间等参数。