• 如何用Vue3实现加入购物车显示抛物线动画功能?
  • 发布于 2个月前
  • 158 热度
    0 评论
  • 果酱
  • 20 粉丝 42 篇博客
  •   
前言
在前几天的一次迭代中,我遇到了这么一个需求,模仿支付宝首页应用中心的编辑功能,支持编辑首页展示的应用,在支付宝应用首页编辑功能中,我注意到一种独特而细致的设计。无论是增加还是移除某个应用,都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作用,使得操作更加流畅,为整个过程增添了趣味性。不由地想起我们在使用各种购物外卖软件时,添加商品到购物车也有这么一个抛物线的动画效果。因此,决定手动造轮子,封装一个通用的抛物线组件。该组件已开源上传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移动到起点,执行动画到末点,并在动画结束后销毁节点
//堆代码 duidaima.com
//开始执行动画
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`;
            //动画结束回收dom
            removeDom(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>
参数说明
属性 属性名称 类型 可选值
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
用户评论