Q

javascript中的形狀變形

2010-02-02 167 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

相關問題