Q

javascript中的形状变形

2010-02-02 140 views 10 likes

10

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

2010-02-02 rizidoro

+2

什么是补间形状？ – Anonymous 2010-02-02 18:09:03

+0

像闪光灯...我有一个正方形，并转化为一个圆圈，例如... – rizidoro 2010-02-02 18:10:31

+0

http://www.entheosweb.com/Flash/shape_tween.asp – rizidoro 2010-02-02 18:11:14

A

回答

4

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

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

对于补间，你可能想看看以下内容：

2010-02-02 18:11:58

+0

是否可以使用这些库中的任何一个将一个形状变形为另一个形状（问题似乎在问什么），还是只进行补间动画？ – 2013-03-28 01:42:12

1

JavaScript中充斥着使用http://coderepos.org/share/wiki/JSTweener

2010-02-02 18:12:58

+0

没有完全回答主要问题（因为它没有形成补间），但它确实帮助了我。 – enobrev 2011-06-16 11:20:59

6

形状补间为在Flash中很难找到比补间动画和简单的（如JSTweener，Tween.lib，JQuery的animate（），d3的transition（），RaphaelJS的animate（）等）。那些图书馆，在其他答案中引用的一些图书馆并没有进行补间。

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

2011-06-01 19:46:52 Biovisualize

+0

很棒的答案和演示！我喜欢补间圆上点的径向距离的简单解决方案。 – 2011-06-17 06:23:08

+0

该演示非常棒！正是我在寻找的东西！谢谢！ – chbdetta 2015-05-09 13:21:18

2

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

2011-06-21 12:15:13

1

我使用tween.js（http://learningthreejs.com/）一个很好的库，它可以调整任何东西。如果你已经使用jQuery，我也建议看看它的动画功能。

2011-08-19 20:07:27 TypingTurtle

+0

谢谢兄弟!!!! – rizidoro 2013-04-03 17:49:20

相关问题