Shape Tween In Javascript

Is there a way to do a shape tween in javascript? Using canvas maybe...

Solution 1:

Shape tween as in Flash is harder to find than motion tween and simple attributes interpolation (like in JSTweener, Tween.lib, JQuery's animate(), d3's transition(), RaphaelJS's animate(), etc.). Those libraries, some cited in the other answers, don't do shape tweening.

You first need to know if you want to draw with SVG or with canvas and what library you will be using. Then, you need an interpolator, a function that will compute the transition between two given shapes, that can write a proper path in SVG or canvas. I wrote an implementation for SVG in D3.js to do some animated transitions between a lot of different shapes (using Gielis's superformula), if someone still need one. You can find an example here

Solution 2:

If you will be doing graphics on the HTML 5 canvas element, you may want to check the Processing.js library. There is a tweening library, but you will probably find it helpful for many other things.

Processing.js uses JavaScript to draw shapes and manipulate images on the HTML 5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

For tweening, you may want to have a look at the following:

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

Solution 3:

Some animated examples here combine motion|shape tweening using RaphaelJS. Check out the ones on the bottom: http://raphaeljs.com/animation.html

Solution 4:

For tweens in Javascript use http://coderepos.org/share/wiki/JSTweener

Solution 5:

I use tween.js (http://learningthreejs.com/) a great library that will tween anything. If you already use jQuery I would also recommend looking into it's animate function.