reboundjs

rebound.jsx

import React from 'react'

import rebound from 'rebound'

var springSystem = new rebound.SpringSystem();
var spring = springSystem.createSpring(50, 3);/* 50---3 */



function setSpring(el) {
    spring.addListener({
        onSpringUpdate: function (spring) {
            var val = spring.getCurrentValue();
            val = rebound.MathUtil
                .mapValueInRange(val, 0, 1, 1, 0.5);
            scale(el, val);
        }
    });

    function scale(el, val) {
        el.style.mozTransform =
            el.style.msTransform =
            el.style.webkitTransform =
            el.style.transform = 'scale3d(' +
            val + ', ' + val + ', 1)';
    }
}
class App extends React.Component {
    componentDidMount() {
        var box = this.refs['wrapper'];
        setSpring(box)
        box.addEventListener('mousedown', function () {
            spring.setEndValue(1);
        })

        box.addEventListener('mouseup', function () {
            spring.setEndValue(0);
        });
    }
    render() {
        return <div ref="wrapper"
            style={{
                width: 100,
                height: 100
            }}
        >
            helloarebound.jsx
        </div>
    }
}

export default App

rebound1.jsx

import React from 'react'

import rebound from 'rebound'

var springSystem = new rebound.SpringSystem();
var spring = springSystem.createSpring(50, 3);/* 50---3 */



function setSpring(el) {
    spring.addListener({
        onSpringUpdate: function (spring) {
            var val = spring.getCurrentValue();
            val = rebound.MathUtil
                .mapValueInRange(val, 0, 1, 1, 0.5);
            scale(el, val);
        }
    });

    function scale(el, val) {
        el.style.mozTransform =
            el.style.msTransform =
            el.style.webkitTransform =
            el.style.transform = 'scale3d(' +
            val + ', ' + val + ', 1)';
    }
}
class App extends React.Component {
    componentDidMount() {
        var box = this.refs['wrapper'];
        setSpring(box)
        box.addEventListener('mousedown', function () {
            spring.setEndValue(1);
        })

        box.addEventListener('mouseup', function () {
            spring.setEndValue(0);
        });
    }
    render() {
        return <div ref="wrapper"
            style={{
                width: 100,
                height: 100
            }}
        >
            helloarebound.jsx
        </div>
    }
}

export default App