読者です 読者をやめる 読者になる 読者になる

undefined

bokuweb.me

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


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

f:id:bokuweb:20151208102313g:plain

デモ

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

example

リポジトリ

github.com

インストール

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のパラメータに基づいて値を渡してくれます。 この場合scaleXscaleYが収束時に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>
      );
    }
  }
...(省略)

今回の動き

ただ、いまいち思い通りの動きにならなかったり、でcut and tryで試ながら調整しました。 あとはsetTimeoutで微妙に調整したりしてます。

さいごに

動きが気に入った方は、使ってみてください。 フィードバック歓迎です。次はぽよんぽよん円状に展開されるサークルメニューを作ってみてもいいかなと思ってます。

github.com