(cache) ぽよんと展開されるメニューコンポーネントをReactで作った

ぽよんと展開されるメニューコンポーネント、react-motion-menuを作りました。
動きは以下を見てください。div要素をぽよんぽよんさせてます。

f:id:bokuweb:20151208102313g:plain

デモ

以下で実際に操作できます。

リポジトリ

インストール

npm i react-motion-menu

概要

ぽよんとアニメーションするメニューを作りたくなって作った。
当初はもっとスライム感みたいなのを表現したくてsvgで検討していただんだけど、いろいろとスキル不足な感じでreact-motionを使って遊んでみることにした。
svgで何かを作りたい場合、Inkscapeとかでベジェ曲線を思い通りに扱えるようになると捗るかもしれない。

使い方

展開する要素をchildrenに記述します。あとはwidthや展開時のメニューアイテム間の距離をdistanceで指定してください。

  <Menu
    distance={80}
    width={50}
    height={50}
    y={500}
    x={100} >
    <i className="bars"></i>  // button
    <i className="home"></i>  // menu item1
    <i className="heart"></i> // menu item2
  </Menu>

react-motion

最終的な収束値とspringのパラメータを与えてやれば、びよんびよんするように中間値を子コンポーネントに渡してくれます。 springのパラメータは以下を見るといいと思います。

Choose your weapon

基本的な書き方

具体的には以下のように書いています。 scaleXなどの値をspringを使って定義し、Motionに渡しています。するとMotionから子コンポーネント(この場合div)に対してspringのパラメータに基づいて値を渡してくれます。この場合scaleX、scaleYが収束時に1.5となるよう、パラメータ[1500, 100]に基づいて振動します。同様にyは収束時に100となるよう、パラメータ[1500, 50]に基づいて振動します。

github.com

const style = {
  scaleX : spring(1.5, [1500, 100]),
  scaleY : spring(1.5, [1500, 100]),
  y      : spring(100, [1500, 50])
};

...(省略)

    render() {
      return (
        <Motion style={style}>
          {({scaleX, scaleY, y}) =>
            <div
              style={
                transform: `translate3d(${x}px, ${y}px, 0) scaleX(${scaleX}) scaleY(${scaleY})`
              }>
              {this.props.children}
            </div>
          }
        </Motion>
      );
    }
  }
...(省略)