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

Last Updated: June 1, 2022 · 3 min read

业务场景

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

贝塞尔算法

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

typescript

先写个 demo 测试一下算法

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

html

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

这里为了方便我使用了 web animation api,贝塞尔曲线只是个算法,如果你愿意,你完全可以使用任意你想要的方式

html

以上 demo 都可以实时编辑


©2022xiaojun1994
 0   0