Shape tweening | Benbinbin | Observable
•ojs
•ojs
•ojs
•ojs
Comments (1)
Benbinbin
Aug 28, 2024
该 Notebook 演示了如何将多边形切换为圆形 多边形是基于一系列的地理坐标值(经过转换)绘制而成的,它边上的数据点(在页面上的坐标)都是已知的 在该示例中限定了多边形与圆形的中心位置(对于多边形而言是指质心/重心,对于圆形而言是指圆心)和面积大小是一样的 要创建从多边形切换为圆形的补间动画,核心是求出切换过程中的一系列中间状态的形状(也就是中间状态各个数据点的坐标位置) 从圆周上进行采样,得到与多边形相同数量的数据点,并与多边形上的数据点一一对应,则可以把多边形上的数据点作为起始值,把圆形上的数据点作为结束值 基于各个数据点的起始值和结束值对它们分别进行插值,就可以得到这些数据点的一系列中间状态的坐标值,将它们连起来可以得到一系列多边形,在切换过程依次渲染出这些多边形就构成了补间动画 注意:这里用于实现形状切换补间动画的方法,仅适用于该示例(多边形变换为圆形),并不是通用解决方案,如果要在两个复杂的形状之间切换,路径的插值计算可以使用 flubber 库
https://github.com/veltman/flubber/tree/master
Reply
Add comment
Subscribe to notifications
Observable
Sign in
Benbinbin
0
Reply
Add comment
Subscribe to notifications
0
Shape tweening | Benbinbin | Observable