javascript中的形状补间

Posted 2023-05-08

【中文标题】javascript中的形状补间

【英文标题】：Shape tween in javascript

【发布时间】：2011-01-12 06:54:17

【问题描述】：

有没有办法在 javascript 中进行形状补间？ 使用画布也许......

【问题讨论】：

像flash...例如我有一个正方形并转换成圆形...

entheosweb.com/Flash/shape_tween.asp

JavaScript 中形状补间的演示可以在这里找到：jembezmamy.github.com/morpher-js/demos.html

另外，这里有一个用于形状补间的 JavaScript 库：github.com/jembezmamy/morpher-js

【参考方案1】：

Flash 中的形状补间比动画补间和简单的属性插值（如 JSTweener、Tween.lib、JQuery 的 animate()、d3 的 transition()、RaphaelJS 的 animate() 等）更难找到。那些在其他答案中引用的库不进行形状补间。

您首先需要知道您是要使用 SVG 还是使用画布进行绘制，以及您将使用什么库。然后，您需要一个插值器，该函数将计算两个给定形状之间的过渡，它可以在 SVG 或画布中编写正确的路径。如果有人仍然需要，我在 D3.js 中为 SVG 编写了一个实现，以在许多不同形状之间进行一些动画转换（使用 Gielis 的superformula）。你可以找到一个例子here

【讨论】：

很好的答案和演示！我喜欢补间圆上点的径向距离的简单解决方案。

那个演示太棒了！正是我正在寻找的！谢谢！

【参考方案2】：

如果您要在 HTML 5 画布元素上绘制图形，您可能需要查看 Processing.js 库。有一个tweening library，但您可能会发现它很有帮助for many other things。

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

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

Tween.lib - Motion Tweening for Processing.js Motion Tweening for Processing.js

【讨论】：

是否可以使用这些库中的任何一个将一个形状变形为另一种形状（这似乎是问题所要问的），还是它们只做补间动画？

【参考方案3】：

这里的一些动画示例使用 RaphaelJS 结合了运动|形状补间。查看底部的那些： http://raphaeljs.com/animation.html

【参考方案4】：

对于 Javascript 中的补间使用 http://coderepos.org/share/wiki/JSTweener

【讨论】：

没有完全回答主要问题（因为它不做补间形状），但它确实帮助了我。

【参考方案5】：

我使用 tween.js (http://learningthreejs.com/) 一个很棒的库，可以补间任何东西。如果您已经使用 jQuery，我还建议您研究一下它的动画功能。