Added test/Animations example.

examples/index.html

@@ -18,6 +18,7 @@ <h1><a href="https://github.com/pilwon/react-famous">react-famous</a> examples</
     <li>
       test
       <ul>
+        <li><a href="test/Animations">Animations</a></li>
         <li><a href="test/CommentBox">CommentBox</a></li>
         <li><a href="test/HelloWorld">HelloWorld</a></li>
         <li><a href="test/HelloWorldDynamic">HelloWorldDynamic</a></li>

examples/test/Animations/components/App.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Context from 'react-famous/core/Context';
+import Modifier from 'react-famous/core/Modifier';
+
+import BouncyBox from './BouncyBox';
+import CrazyBox from './CrazyBox';
+import DraggableBox from './DraggableBox';
+import DroppingBox from './DroppingBox';
+import RotatingBox from './RotatingBox';
+
+export default React.createClass({
+  render() {
+    return (
+      <Context>
+        <Modifier options={{align: [0.25, 0.25], origin: [0.5, 0.5]}}>
+          <DraggableBox/>
+        </Modifier>
+        <Modifier options={{align: [0.75, 0.25], origin: [0.5, 0.5]}}>
+          <BouncyBox/>
+        </Modifier>
+        <Modifier options={{align: [0.25, 0.75], origin: [0.5, 0.5]}}>
+          <RotatingBox/>
+        </Modifier>
+        <Modifier options={{align: [0.75, 0.75], origin: [0.5, 0.5]}}>
+          <CrazyBox/>
+        </Modifier>
+        <DroppingBox/>
+      </Context>
+    );
+  }
+});

examples/test/Animations/components/BouncyBox.jsx

@@ -0,0 +1,79 @@
+import Transform from 'famous/core/Transform';
+import GenericSync from 'famous/inputs/GenericSync';
+import MouseSync from 'famous/inputs/MouseSync';
+import TouchSync from 'famous/inputs/TouchSync';
+import SnapTransition from 'famous/transitions/SnapTransition';
+import Transitionable from 'famous/transitions/Transitionable';
+import React from 'react';
+import Modifier from 'react-famous/core/Modifier';
+import Surface from 'react-famous/core/Surface';
+
+GenericSync.register({
+  mouse: MouseSync,
+  touch: TouchSync
+});
+
+Transitionable.registerMethod('spring', SnapTransition);
+
+export default React.createClass({
+  componentWillMount() {
+    this._position = new Transitionable([0, 0]);
+  },
+
+  onReady() {
+    let position = this._position;
+    let surface = this.refs.surface.getFamous();
+    let sync = new GenericSync({
+      mouse: {},
+      touch: {}
+    });
+
+    sync.on('update', (data) => {
+      let currentPosition = position.get();
+      position.set([
+        currentPosition[0] + data.delta[0],
+        currentPosition[1] + data.delta[1]
+      ]);
+    });
+
+    sync.on('end', (data) => {
+      let velocity = data.velocity;
+      position.set([0, 0], {
+        method: 'spring',
+        period: 150,
+        velocity: data.velocity
+      });
+    });
+
+    surface.pipe(sync);
+  },
+
+  render() {
+    let position = this._position;
+
+    let modifierOptions = {
+      transform: () => {
+        let currentPosition = position.get();
+        return Transform.translate(currentPosition[0], currentPosition[1]);
+      }
+    };
+
+    let surfaceOptions = {
+      size: [100, 100],
+      properties: {
+        backgroundColor: '#009900',
+        color: 'white',
+        lineHeight: '100px',
+        textAlign: 'center'
+      }
+    };
+
+    return (
+      <Modifier options={modifierOptions}>
+        <Surface ref="surface" onReady={this.onReady} options={surfaceOptions}>
+          Bouncy
+        </Surface>
+      </Modifier>
+    );
+  }
+});

examples/test/Animations/components/CrazyBox.jsx

@@ -0,0 +1,50 @@
+import random from 'lodash/number/random';
+import Transform from 'famous/core/Transform';
+import Easing from 'famous/transitions/Easing';
+import TweenTransition from 'famous/transitions/TweenTransition';
+import React from 'react';
+import StateModifier from 'react-famous/modifiers/StateModifier';
+import Surface from 'react-famous/core/Surface';
+
+const EASING_NAMES = Object.keys(Easing);
+
+EASING_NAMES.forEach((name) => TweenTransition.registerCurve(name, Easing[name]));
+
+export default React.createClass({
+  onReady() {
+    let stateModifier = this.refs.stateModifier.getFamous();
+
+    function rotate() {
+      stateModifier.setTransform(Transform.rotate(Math.random(), Math.random(), Math.random()), {
+        curve: EASING_NAMES[random(EASING_NAMES.length)],
+        duration: 300
+      }, () => {
+        stateModifier.setTransform(Transform.rotate(0, 0, 0), {
+          duration: 50
+        }, rotate);
+      });
+    }
+
+    rotate();
+  },
+
+  render() {
+    let options = {
+      size: [100, 100],
+      properties: {
+        backgroundColor: '#990099',
+        color: 'white',
+        lineHeight: '100px',
+        textAlign: 'center'
+      }
+    };
+
+    return (
+      <StateModifier ref="stateModifier" onReady={this.onReady}>
+        <Surface options={options}>
+          Crazy
+        </Surface>
+      </StateModifier>
+    );
+  }
+});

examples/test/Animations/components/DraggableBox.jsx

@@ -0,0 +1,62 @@
+import Transform from 'famous/core/Transform';
+import GenericSync from 'famous/inputs/GenericSync';
+import MouseSync from 'famous/inputs/MouseSync';
+import TouchSync from 'famous/inputs/TouchSync';
+import React from 'react';
+import Modifier from 'react-famous/core/Modifier';
+import Surface from 'react-famous/core/Surface';
+
+GenericSync.register({
+  mouse: MouseSync,
+  touch: TouchSync
+});
+
+export default React.createClass({
+  componentWillMount() {
+    this._position = [0, 0];
+  },
+
+  onReady() {
+    let position = this._position;
+    let surface = this.refs.surface.getFamous();
+    let sync = new GenericSync({
+      mouse: {},
+      touch: {}
+    });
+
+    sync.on('update', (data) => {
+      position[0] += data.delta[0];
+      position[1] += data.delta[1];
+    });
+
+    surface.pipe(sync);
+  },
+
+  render() {
+    let position = this._position;
+
+    let modifierOptions = {
+      transform: () => {
+        return Transform.translate(position[0], position[1]);
+      }
+    };
+
+    let surfaceOptions = {
+      size: [100, 100],
+      properties: {
+        background: '#990000',
+        color: 'white',
+        lineHeight: '100px',
+        textAlign: 'center'
+      }
+    };
+
+    return (
+      <Modifier options={modifierOptions}>
+        <Surface ref="surface" options={surfaceOptions} onReady={this.onReady}>
+          Draggable
+        </Surface>
+      </Modifier>
+    );
+  }
+});

examples/test/Animations/components/DroppingBox.jsx

@@ -0,0 +1,44 @@
+import Transitionable from 'famous/transitions/Transitionable';
+import React from 'react';
+import Modifier from 'react-famous/core/Modifier';
+import Surface from 'react-famous/core/Surface';
+
+export default React.createClass({
+  componentWillMount() {
+    this._transitionable = new Transitionable([0, 0]);
+  },
+
+  onReady() {
+    this._transitionable.set([0, 1], {
+      duration: 1000,
+      curve: 'easeInOut'
+    });
+  },
+
+  render() {
+    let transitionable = this._transitionable;
+
+    let modifierOptions = {
+      align: () => transitionable.get(),
+      origin: () => transitionable.get()
+    };
+
+    let surfaceOptions = {
+      size: [undefined, 50],
+      properties: {
+        backgroundColor: '#333',
+        color: 'white',
+        lineHeight: '50px',
+        textAlign: 'center'
+      }
+    };
+
+    return (
+      <Modifier ref="modifier" options={modifierOptions}>
+        <Surface options={surfaceOptions} onReady={this.onReady}>
+          Dropping
+        </Surface>
+      </Modifier>
+    );
+  }
+});

examples/test/Animations/components/RotatingBox.jsx

@@ -0,0 +1,36 @@
+import Transform from 'famous/core/Transform';
+import React from 'react';
+import Modifier from 'react-famous/core/Modifier';
+import Surface from 'react-famous/core/Surface';
+
+export default React.createClass({
+  onReady() {
+    let modifier = this.refs.modifier.getFamous();
+    let angle = 0;
+
+    modifier.transformFrom(() => {
+      angle += 0.03;
+      return Transform.rotateZ(angle);
+    });
+  },
+
+  render() {
+    let options = {
+      size: [100, 100],
+      properties: {
+        backgroundColor: '#000099',
+        color: 'white',
+        lineHeight: '100px',
+        textAlign: 'center'
+      }
+    };
+
+    return (
+      <Modifier ref="modifier" onReady={this.onReady}>
+        <Surface options={options}>
+          Rotating
+        </Surface>
+      </Modifier>
+    );
+  }
+});

examples/test/Animations/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Animations</title>
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <script src="/_assets/test/Animations.js"></script>
+</body>
+</html>

examples/test/Animations/index.js

@@ -0,0 +1,6 @@
+import 'famous/core/famous.css';
+import React from 'react';
+
+import App from './components/App';
+
+React.render(React.createElement(App), document.body);