在javascript中形状补间

Question

有没有办法在javascript中做补间形状？使用画布可能......

Answer 1

Flash中的补间形状比补间动画和简单属性插值更难找到(如JSTweener,Tween.lib,JQuery的animate(),d3的transition(),RaphaelJS的animate()等).那些图书馆,其他答案中引用的一些,并没有形成补间.

首先需要知道是否要使用SVG或画布绘制以及要使用的库.然后,您需要一个插值器,一个计算两个给定形状之间转换的函数,可以在SVG或画布中编写正确的路径.我在D3.js中为SVG编写了一个实现,在许多不同的形状之间进行一些动画过渡(使用Gielis的超级公式),如果有人还需要一个.你可以在这里找到一个例子

Answer 2

如果您要在 HTML 5 画布元素上绘制图形，您可能需要检查Processing.js库。有一个补间库，但您可能会发现它对许多其他事情很有帮助。

Processing.js 使用 JavaScript 在 HTML 5 Canvas 元素上绘制形状和操作图像。该代码重量轻、易于学习，是可视化数据、创建用户界面和开发基于网络的游戏的理想工具。

对于补间，您可能需要查看以下内容：

• Tween.lib -Processing.js 的补间动画
• 用于Processing.js 的补间动画