在JavaScript中的形状补间

Question

在JavaScript中的形状补间

javascriptjqueryanimationjquery-animate

10

有没有办法在JavaScript中进行形状补间动画？也许可以使用canvas...

- rizidoro

像闪电一样...我有一个正方形，可以转换成圆形例如... - rizidoro

http://www.entheosweb.com/Flash/shape_tween.asp - rizidoro

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

此外，这里有一个用于形状缓动的JavaScript库：https://github.com/jembezmamy/morpher-js - Anderson Green

5个回答

4

如果您想在HTML 5画布元素上进行图形处理，您可能需要查看Processing.js库。有一个tweening库,但您可能会发现它对于许多其他事情也很有帮助。

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

对于缓动效果，您可以查看以下内容：

- Daniel Vassallo

这些库中是否有任何一种可以将一个形状变形为另一个形状（这似乎是问题所在），还是它们只能进行运动补间？ - Anderson Green

2

这里有一些使用RaphaelJS结合运动和形状Tweening的动画示例。请查看底部的示例： http://raphaeljs.com/animation.html

- Shaun Lebron

1

如需在JavaScript中使用缓动，请使用http://coderepos.org/share/wiki/JSTweener

- Johan Dahlin

没有确切回答主要问题（因为它不执行形状补间），但它确实对我有帮助。 - enobrev

1

我使用 tween.js（http://learningthreejs.com/）这个强大的库，可以对任何东西进行缓动。如果你已经在使用jQuery，我也建议你看一下它的animate函数。

- TypingTurtle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Biovisualize · Accepted Answer

在Flash中，形状变换比运动变换和简单属性插值（如JSTweener、Tween.lib、JQuery的animate()、d3的transition()、RaphaelJS的animate()等）更难找到。这些库中有些被其他答案引用，但它们不进行形状变换。

首先，您需要确定是要使用SVG还是canvas进行绘制，以及将使用哪个库。然后，您需要一个插值器，一个函数，它将计算两个给定形状之间的过渡，并可以在SVG或canvas中编写适当的路径。我在D3.js中为SVG编写了一个实现，以在许多不同的形状之间进行一些动画转换（使用Gielis的超级公式），如果有人仍然需要，您可以在这里找到示例。