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

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

### ▼ liquidui-animation

https://github.com/enumura1/liquidui-animation

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

https://qiita.com/enumura1/items/0ced1557f4e9498ebe98

# ライブラリ紹介

### ▼ [liquidui-animation](https://github.com/enumura1/liquidui-animation)

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

# 使用イメージ

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/renderSample.gif" style="width: 80%;" alt="sample-image-gif">
</div>

<br>

<details><summary>上記イメージのソース</summary>

```tsx
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;
```
</details>

# インストール方法

```
npm i @enumura/liquidui-animation
```

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

![rotationUI.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/2691301c-fe64-2e44-72c7-4f1e5cf0168e.gif)

```tsx: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の動きは遅くなります。

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/LiquidDuration_.gif" style="width: 70%;" alt="sample-image-gif">
</div>

```tsx: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`プロパティに指定します。

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/image.gif" style="width: 70%;" alt="sample-image-gif">
</div>

<br>

```tsx
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にあてるぼかしの強さを指定できます。
プロパティの値を下げるとぼかしの強度は低くなり、値を上げるとぼかし具合がより強くなります。

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/blurUI.gif" style="width: 70%;" alt="sample-image-gif">
</div>

<br>

```tsx
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の大きさをカスタマイズできます。

```tsx
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の開発を続けていこうと思います。

https://github.com/enumura1/liquidui-animation

https://www.npmjs.com/package/@enumura/liquidui-animation