@fcli/vue-cubic-bezier v1.0.0

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方法，并传对应参数即可实现一个自定义抛物线，具体使用可以参考代码示例。

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