React Animation
A simple component specific animation library for react.
Concept
- Make the component
Animatable
. Wrap around your existing component. - Create component with properties/style with
ReactAnimation.Value
instance - Create
Animation
object onReactAnimation.Value
with configurations - final value and duration. - Start the
Animation
Example
- First create an animatable component
image.js
;; /* Make a normal React Component Animatable */const AnimatableImage = ; /* Use the animatable component with ReactAnimation.Value(s) */Component { superprops; thisstate = x: propsx y: propsy this_anim = null; } { if nextPropsx != thispropsx || nextPropsy != thispropsy // Stop any previously running animation this_anim && this_anim; // Create a new animation this_anim = ReactAnimation; // Run the Animation this_animstart; } { const x y = thisstate; return <AnimatableImage ...thisprops x=x y=y /> } ;
- The Application
demo.js
/* * A simple demo that draws the image on the page and whenever the * moves, the logo moves with a timed Animation */;;; const logo = ; Component { superprops; thisstate = imgX: 0 imgY: 0 } { const node = ; this; } { return <div style= position: 'absolute' left: 0 top: 0 right: 0 bottom: 0 onMouseMove= thisrelocate > <Image x=thisstateimgX y=thisstateimgY width="100px" href=logo /> </div> ; } { console; this; } ;
TODO
Checkout https://github.com/chenglou/react-motion/blob/master/src/stepper.js to implement Spring Animation for more realistic animations.