Dynamics.jsをReact.jsで使う

物理法則に基づいたアニメーションを実装できるライブラリのDynamics.jsをReact.jsで使ってみた。

基本的にJSのアニメーションライブラリはDOMを直接操作するけど、React.jsを使う場合は実際のDOMと仮想のDOMとの整合性が崩れてしまうのでそれは推奨されない。

なので、アニメーションする値をstateで管理してやってみた。

import React    from 'react';
import dynamics from 'dynamics.js';

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    };
  }

  componentDidMount() {
    dynamics.animate(this.state, {
      x: 200,
      y: 20
    }, {
      change: (e) => this.setState({x: e.x, y: e.y})
    });
  }

  render() {
    const style = {
      transform: `translate(${this.state.x}px, ${this.state.y}px)`
    };

    return (
      <div className="box" style={style}></div>
    );
  }
}

React.render(<Box />, document.getElementById('app'));

Dynamics.jsはJSのオブジェクトの値をアニメーションさせることもできて、値が変更する度にchangeが呼ばれるので、そのタイミングでsetStateしてやればいい。

もっといいやり方あれば教えてください。