vue-cubic-bezier

贝赛尔曲线实现加入购物车抛物线效果（可连续多个动画，动态回收DOM）

npm install @fcli/vue-cubic-bezier --save-dev 来安装

在项目中使用
import VueCubicBezier from '@fcli/vue-cubic-bezier';
const app=createApp(App)
app.use(VueCubicBezier);

示例：

<template>
  <div class="content">
    <cubic-bezier ref="myCubic">
      测试
    </cubic-bezier>
    <button class="btn" @click="getData">开始</button>
  </div>
</template>

<script setup lang="ts">
import CubicBezier from './plugin/index.vue';
import { ref } from 'vue';
component: {
  CubicBezier
}
const myCubic = ref<any>();
const params = {
  point: { x1: 250, y1: 50, x2: 100, y2: 400 },
  time: 0.5,
  xcubic: 'linear',
  ycubic: 'cubic-bezier(0.49, -0.29, 0.75, 0.41)',
}

const getData = () => {
  myCubic.value.start(params.point, params.time, params.xcubic, params.ycubic)
}

</script>

参数说明

使用时需要调用该组件的start方法，并传对应参数即可实现一个自定义抛物线，具体使用可以参考代码示例。

| 属性 | 属性名称 | 类型 | 可选值 | | ------ | -------- | ------ | ------ | | point | 起点和结束点距离左上角的距离,(x1,y1)起点坐标，(x2,y2)结束点坐标 | object | { x1: 250, y1: 50, x2: 100, y2: 400 } | | time | 动画效果过渡时间 | number | 1 | | xcubic | 横向过渡贝赛尔动画参数 | number | linear | | ycubic | 竖向过渡贝赛尔动画参数 | number | ease-in |

slot 可自定义动画的图标或者内容