使用贝塞尔曲线实现元素沿曲线运动

Jun 1, 20227 min read

此文最后修改于 751 天前,可能包含很多不再适用的废话,阅读需谨慎~

业务场景

最近业务中遇到了一个点赞需求,就很常见的那种直播点赞,设计上要求点赞气泡随机沿着弧线运动路径向上飞,简单点可以把关键帧动画硬编码,但是我感觉那么做不是很完美,就想到了用贝塞尔曲线来实现这个功能

贝塞尔算法

贝塞尔曲线知识就不科普了,我也不咋懂,一般也就用二阶或者三阶贝塞尔,直接上代码,也可以使用现成库

TS

先写个 demo 测试一下算法

用 canvas 测试一下上边的算法是否可用,贝塞尔函数中的参数 t 可以理解为进度(0 ~ 1),所以曲线精度完全取决于每次的 t 值间隔

Code Playground

玩点炫的(情人节限定版)

这里为了方便我使用了 Web Animations API,贝塞尔曲线只是个算法,你完全可以使用任何你想要的方式调用它

Code Playground

以上 demo 都可以实时编辑

浏览量

最后修改于

Jun 1, 2022
Made withbyXiaojun Zhou