ぽよんと展開されるメニューコンポーネント、react-motion-menu
を作りました。
動きは以下を見てください。div
要素をぽよんぽよんさせてます。
デモ
以下で実際に操作できます。
リポジトリ
インストール
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
のパラメータは以下を見るといいと思います。
基本的な書き方
具体的には以下のように書いています。
scaleX
などの値をspring
を使って定義し、Motion
に渡しています。
するとMotion
から子コンポーネント(この場合div
)に対してspring
のパラメータに基づいて値を渡してくれます。
この場合scaleX
、scaleY
が収束時に1.5
となるよう、パラメータ[1500, 100]
に基づいて振動します。
同様にy
は収束時に100
となるよう、パラメータ[1500, 50]
に基づいて振動します。
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
で微妙に調整したりしてます。
さいごに
動きが気に入った方は、使ってみてください。 フィードバック歓迎です。次はぽよんぽよん円状に展開されるサークルメニューを作ってみてもいいかなと思ってます。