Shape tween in javascript - javascript

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

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

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

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

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

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.

Related

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

Javascript animate line and image - library

I have been researching a way to simultaneously animate a line and images.
see gif example here:
but I can not find any library to do this easily. I have attempted to use raw javascript but its too complicated and not working smooth. Do you have any libraries that can accomplish the animation shown in the gif? thanks
Probably the first example of animating a line like this is from Jake Archibald, who used SVG with a dashed stroke length that varied over time. This could be the basis of your vertical line. With a bit of modification it could use the scroll position instead of time.
There is a library specifically for this line animation technique called Vivus.
But if you're looking for a more full-featured SVG library that would give you a lot more options you could look at SnapSVG, Bonsai and Velocity.

Which js library to use for creating not complicated animation with html5 canvas?

I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.
There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)
For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.

Basics of 3d to draw Rubik's Cube

I'd like to draw a Rubik's Cube on html canvas element with some perspective, but I've never had any experience with 3d graphics, perspective etc. so I'm looking for all helpful resources to achieve this. The only helpful link I've found is for this demo :
http://oos.moxiecode.com/js_canvas/3d_cube/index.html
You can certainly create 3-d models with canvas using webGL or 3-d javascript libraries, but I would personally use CSS3 transforms and translations instead if you're wanting to create a rubix cube (I promise, it would be MUCH LESS code). Check this out and you'll be inspired:
http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
This demo is using linear rotations, but if you use ease-in-out rotations, the rotations will look much more natural.
I wrote this awhile back
http://www.pascarello.com/canvas/rubikscube/
It has issues when you start to mix up colors, but you can play with the code.

Using JavaScript to model 3D polyhedra

Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?
Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.
Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.
Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.

Categories