Push: Ctrl+Y

 技術で遊んで ときどき進む

Web 解説してみた

ReactMotionでスライムを動かす話

2016/07/26

ReactMotionは簡単に画面に動作をつけられるモジュールです。
前回(『React + Redux アニメーション:ドラッグ&ドロップでキングスライムを作った』)書けなかったので、いちおうその続きという位置づけです。

最終ソースはこちら(GitHubに飛びます)

 

ReactMotionでスライムを動かす

最初に表示されたときに円の周りにあるスライムを動かします。
最後のキングスライムも動くようにしたのですが、実装方法は同じなので気になったらGitHubで見てみてください。

実装

実装を見た方が理解が早いので、とりあえずの実装をします。
スライムのdivが中央の丸から出発して指定の位置に動くパターンです。

 

この実装でこんな動作になります。

 

いちおう解説

  1. <Motion>タグで動かしたいコンポーネントを指定
  2. <Motion>タグの属性:defaultStyleをスタート/styleをエンドとして指定
  3. {(value) => ...}valueの値が2のスタートとエンドの間をヒューっと変えてくれる
    (これはエンドで使っているspring()の能力)

なので、そのvalueの値をDragSlimeCircleに渡してlefttopが刻々と変わります。

ちなみにspring()の第2引数で速度と跳ね具合を調整できます。その違いについてはQiitaのほうで書いたので、興味があったら参照してください。

 

おわりに

最後にキングスライムがでてきたときも動かしたかったので、そこも改良してコミットしました。
題材が良かったかは分かりませんが、個人的にはいい感じのボリュームでReactMotionReactDnDを紹介できたので満足です。

 

 

-Web, 解説してみた
-, ,

おすすめの記事

1
React + Redux入門① - Reduxの概念を理解

React+Reduxでサイトを作っているので、復習がてら「検索画面を作成する」 ...

2
React + Redux + D3.js アニメーション:ドラッグ&ドロップでキングスライムを作った

はい、今回は要素のドラッグ&ドロップを中心に作ってみました。 Mater ...