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

こんにちわ。nap5です。

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

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

I try to render voronoi transition animation using react-spring and d3-voronoi.#react #javascript #voronoi #reactspring #d3voronoi#100DaysOfCode #cssclippath #d3

demo sitehttps://t.co/3svjDakRzJ

demo codehttps://t.co/HB9ijbuMzB

demo videohttps://t.co/RrXVO83yS3

— nap5 (@napzak5) May 18, 2022

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

ボロノイ図 - Wikipedia

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

Hello React!

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

Glitch Code Editor ･ﾟ✧

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

Loom | Send a video. Not a thousand words.

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

react-spring

GitHub - d3/d3-voronoi: Compute the Voronoi diagram of a set of two-dimensional points.

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

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

  const transitions = useTransition(data, {
    key: (item) => {
      return item.id;
    },
    from: ({x, y}) => {
      return {
        x: 0,
        y: 0,
        opacity: 0,
      };
    },
    enter: ({x, y}) => {
      return {
        x,
        y,
        opacity: 1,
      };
    },
    update:
      ({x, y}) =>
      async (next) => {
        await next({
          x,
          y,
        });
        await sleep(1000);
        await next({
          x: 0,
          y: 0,
        });
      },
    leave: (item) => async (next) => {
      await next({
        opacity: 0,
      });
    },
    config: {mass: 1, tension: 50, friction: 1, frequency: 1, duration: 500},
    trail: 25,
  });

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

Tweets by napzak5

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

FaunaDBを使用したRSSキュレーションミニシステムの構築

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

簡単ですが、以上です。