Reactでうねうねアニメーションライブラリ作ってみた

はじめに

未熟ながら今回初めて作ったものをOSSとして公開してみました。
作ったものはReactで動作するliquidui-animation というライブラリです。
liquidui-animationは、Raectで揺れ動くアニメーションを持つUIを簡単に作る事を目的としたライブラリです。

▼ liquidui-animation

開発のきっかけ

開発のきっかけは以前投稿していた下記記事になります。
毎度CSSでkeyframesを当てるのは面倒なので、簡単に作成できるライブラリがあれば便利なのではないか、という点から作成しました。

ライブラリ紹介

▼ liquidui-animation

本ライブラリのLiquidUIコンポーネントを使用すると揺れ動く流体のようなUIをReact環境で作成できます。
LiquidUIコンポーネントは、形状、サイズ、アニメーションの強さ、時間など複数のプロパティを組み合わせる事でUIのカスタマイズを行うことが可能です。
実際にUIを作成してみたイメージは次の通りです。

使用イメージ

上記イメージのソース

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <main>
      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgColor={"#FFE2FF"}
        animationIntensity={"middle"}
        liquidDuration={10}
        rotateDuration={0}
        blurIntensity={10}
      ></LiquidUI>

      <LiquidUI
        figureShape={"square"}
        size={"middle"}
        bgColor={"linear-gradient(90deg, #fbd5fb, #95e9f3"}
        animationIntensity={"strong"}
        liquidDuration={10}
        rotateDuration={0}
      ></LiquidUI>

      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgColor={"linear-gradient(90deg, #C3F1FF, #0072ff)"}
        animationIntensity={"strong"}
        liquidDuration={12}
        rotateDuration={1000}
      ></LiquidUI>

      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgImg={"assets/sampleImg.webp"}
        animationIntensity={"strong"}
        liquidDuration={12}
        blurIntensity={0}
      ></LiquidUI>
    </main>
  );
};

export default App;

インストール方法

npm i @enumura/liquidui-animation

1. UIの回転例

rotateDurationプロパティではUIが1回転するのにかかる時間を指定しています。
プロパティの値を下げると回転が速くなり、値を上げるとUIの回転が遅くなります。

sample.tsx

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"linear-gradient(90deg, #C3F1FF, #0072ff)"}
      animationIntensity={"strong"}
      liquidDuration={12}
      rotateDuration={10}
    ></LiquidUI>
  );
};

2. UIのアニメーションスピードを調整した例

liquidDurationプロパティでは1回のUIのアニメーションにかかる時間を指定できます。
プロパティの値を下げるとUIの動きは速くなり、値を上げるとUIの動きは遅くなります。

sample.tsx

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <>
      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgColor={"blue"}
        animationIntensity={"strong"}
        liquidDuration={1}
        rotateDuration={30}
      ></LiquidUI>
    </>
  );
};

3. 画像を表示した例

LiquidUIのコンポーネントを利用し画像も以下イメージのようにアニメーションをつけて表示する事ができます。表示させたい画像のパスをbgImgプロパティに指定します。

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};

4. UIにぼかしを加えた例

blurIntensityプロパティではUIにあてるぼかしの強さを指定できます。
プロパティの値を下げるとぼかしの強度は低くなり、値を上げるとぼかし具合がより強くなります。

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"#FFE2FF"}
      animationIntensity={"middle"}
      liquidDuration={10}
      blurIntensity={10}
    ></LiquidUI>
  );
};

5. UIの大きさを自由に調整した例

sizeプロパティに {width: 'XXXpx', height: '○○○px'} のようなオブジェクト形式で任意の値を指定することで自由にUIの大きさをカスタマイズできます。

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={{ width: "100px", height: "100px" }}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};

終わりに

ここまで読んでいただきありがとうございます。
普段の仕事では経験できない分野ですが、周辺技術も学びながら開発を継続できたので色々と身になる事が多かったです。未熟ながら今後もOSSの開発を続けていこうと思います。