見出し画像

react-springを使ってドロネー図のアニメーションを作ってみよう

nap5

こんにちわ。nap5です。

d3ライブラリのドロネー図を使ったトランジションアニメーションのデモを紹介したいと思います。


Twitterにも投稿してみました。




ドロネー図とは？については以下のリンクを参照くださいませ。


デモサイトのリンクはこちらです。


デモコードのリンクはこちらです。


デモビデオのリンクはこちらです。


使用したライブラリは以下になります。


コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。

以下のupdateコールバックで散らばった後に1秒停止してもとに戻す工夫を入れることで、ランダム感を出しています。

というのはボロノイ図でやった時と同じです。


三角形の分割において座標数固定で値をランダムにしてしまうと今回の分割数が前回の分割数と異なることがあり、transitionの挙動に影響が出てしまいます。react-springではtransitionのキー単位でアニメーションするため、idがずれてしまうことが原因のようです。

なので、今回はボタンを2つ用意しました。

１つがシャッフルボタンで、もう一つが分割数を変えるボタンです。


分割数を変えるボタンを連続押下する場合は、先ほど述べました通り、idがずれる影響で、意図しないトランジションが発生してしまいます。


初回の座標データでシャッフルボタンを連続押下する限りは意図したトランジションが確認できました。


ドロネーの分割数をシードみたいに固定できるオプションがあれば、2つもボタンがいらず、ボタン1つでワークアラウンドできそうです。


今回はここのハンドリングはできていません。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。


また、コースの内容紹介記事は以下になります。


簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？