Reactで滑らかに揺れるUIを作成可能なライブラリを公開しました
はじめに
今回初めて作ったものを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の回転が遅くなります。
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の動きは遅くなります。
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の開発を続けていこうと思います。
Discussion