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してやればいい。
もっといいやり方あれば教えてください。