Having little experience with D3 animations I’m not sure if it is easy to do animations with D3.
However the great thing about
react-art is that in order to animate you follow the same pattern you do for any other rendering, just
Animations in CSS3 are different in that a particular element has a defined location and you tell the browser the new location. The inbetween animation state from point a => b over a period of time is automatically handled for you.
In our canvas/svg world we need to
tween between states. That just means based on a defined time frame (500ms? 1s? 2s?) we need to move an item form
x/y to a new
Shifty.js helps do that in an efficient manner on the web. The reason
shifty.js works well with React is that it doesn’t mutate DOM but just provides you the ability to modify numbers across a space of time. Additionally it provides out of the box easing effects like
cubic and other movements.
This article is less about
react-art and more about just how to use
react-art is just an extension of
react, and if you know the fundamental concepts of
react then you can do just about anything.
Example of a basic tween movement
1 2 3 4 5 6 7 8 9 10 11 12 13
We are saying move from
1000ms (1 second).
Shifty.js will chunk each step from
1000ms and provide us which each step.
Yes this looks very much like
jQuery and it’s animate function. They are essentially doing the same thing except
jQuery modifies the DOM for you and we are just adjusting a number.
Shifty is just one that I happened to pull up, but there are many other tweening libraries that could be used easily.
That’s the basics, in a later blog post I’ll get into some more complex animations. However any tweening library/phsyics engine that is divorced from the DOM will allow you to maniuplate your data and make your
react-art very versatile.