Shape tween in javascript

问题:

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

回答1:

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

回答2:

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

回答3:

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

回答4:

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

回答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.