贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件

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

前言

在前几天的一次迭代中，我遇到了这么一个需求，模仿支付宝首页应用中心的编辑功能，支持编辑首页展示的应用，在支付宝应用首页编辑功能中，我注意到一种独特而细致的设计。无论是增加还是移除某个应用，都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作用，使得操作更加流畅，为整个过程增添了趣味性。不由地想起我们在使用各种购物外卖软件时，添加商品到购物车也有这么一个抛物线的动画效果。因此，决定手动造轮子，封装一个通用的抛物线组件。该组件已开源上传npm，可以直接安装使用，源码已上传Git，地址在文尾。

贝赛尔曲线

贝塞尔曲线（Bezier curve）是应用于二维图形应用程序的数学曲线，在矢量图形软件中，贝塞尔曲线被广泛用于精确画出曲线，它也是计算机图形学中相当重要的参数曲线。

CSS中的贝塞尔曲线主要应用在动画和过渡中，可以使用cubic-bezier函数来创建自定义动画的速度曲线。使用transition-timing-function和animation-timing-function属性来定义贝塞尔曲线，这个函数接收四个参数，cubic-bezier(n,n,n,n)，这四个点定义了一条贝塞尔曲线，其中n是一个0到1之间的数值。CSS提供了几个预定义的函数：ease, linear, ease-in, ease-out, ease-in-out。

实现思路

了解了Css中的贝赛尔曲线使用方法后，我们实现一个抛物线也就简单了，只用控制一个dom节点，在x轴和y轴上分别用不同的过度动画效果，改变dom节点left和top的位置，这样就能得到一个抛物线运动轨迹的动画效果了。在运动结束后我们将operaty设为0以达到动画结束隐藏节点。

优化
但是在实际使用时，如果我们不断地创造节点增加动画效果，那么就会有无数个dom节点冗余，大大降低了浏览器性能，因此，在动画结束还需要考虑回收dom，将不需要的dom节点移除，这样就大功告成，具体实现请看代码。

主要实现代码

1、定义一个基础dom结构，用slot以支持自定义不同的动画节点

<template><div class="cubic-bezier-ball" v-for="item in ballList" :ref="(el) => setRefAction(el, item)" :key="item"><slot></slot></div>
</template>

2、执行动画效果处理，将dom移动到起点，执行动画到末点，并在动画结束后销毁节点

//开始执行动画
const start = (point: any, time = 1, xcubic = 'linear', ycubic = 'ease-in') => {const nowTime = new Date().getTime();//新增一个动画节点ballList.value.push(nowTime);//dom渲染后增加动画效果nextTick(() => {const ele = ballRef.value[nowTime];ele.style.left = `${point.x1}px`;ele.style.top = `${point.y1}px`;ele.style.opacity = 1;setTimeout(() => {ele.style.left = `${point.x2}px`;ele.style.top = `${point.y2}px`;ele.style.transition = `left ${time}s ${xcubic}, top ${time}s ${ycubic}`;})setTimeout(() => {ele.style.opacity = 0;ele.style.left = `${point.x1}px`;ele.style.top = `${point.y1}px`;//动画结束回收domremoveDom(nowTime);}, time * 1000)})
}

3、保留每个Dom引用，移除dom

//将循环ref放入到数组中
const setRefAction = (el: any, item: number) => {ballRef.value[item] = el;
}//动画结束回收dom
const removeDom = (nowTime: number) => {ballList.value = ballList.value.filter((item: number) => {return item != nowTime;})
}

使用示例

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

Git地址：https://gitee.com/fcli/vue-cubic-bezier.git