# vue-cubic-bezier

**Repository Path**: fcli/vue-cubic-bezier

## Basic Information

- **Project Name**: vue-cubic-bezier
- **Description**: 贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件（可连续多个动画，动态回收DOM）
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 5
- **Created**: 2023-09-22
- **Last Updated**: 2024-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-09-22 10:32:08
 * @FilePath: /vue-cubic-bezier/README.md
 * @Description: 
-->

# vue-cubic-bezier

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

```bash
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**
可自定义动画的图标或者内容