Flutter - 利用贝塞尔曲线实现添加购物车效果

🥦 前言 - 关于贝塞尔曲线

贝塞尔曲线，这个词大家都不陌生，特别是在前端里面，没用过相信也都听过。

我这里也继续啰嗦一下，贝塞尔曲线的知识：

贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线^[1]。在历史上，研究贝塞尔曲线的人最初是按照已知曲线参数方程^[2]来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”，也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。- 百度百科

它的出现为计算机矢量图形学奠定了基础，那么我们能用它做什么？

有的人说了，网上一搜一大把，这是必须的，「波浪形状」、「抛物线效果」等等等等。

🍋 贝塞尔曲线的效果和计算公式

这里我就不讲各阶贝塞尔曲线的区别了，直接把效果和公式贴上来。

一阶贝塞尔曲线

二阶贝塞尔曲线

三阶贝塞尔曲线

剩下的还有高阶，就不多赘述了，可推断公式如下：