JavaScript を使ってアニメーションを動かしてみよう
今回は、JavaScript を使ってエフェクトのアニメーションを行ってみましょう。
src/scripts/index.jsファイルを開いて次のコードを追加してください。
index.js
import "../styles/style.scss";
import { setup } from "negl";
import lilGUI from "lil-gui";
const obResolver = async (type) => {
const module = await import(`./parts/glsl/${type}/index.js`);
return module.default;
};
(async () => {
const { start } = setup({
resolver: {
ob: obResolver,
},
addon: { lilGUI },
debug: true,
});
const negl = await start();
negl.renderStart();
// 1. neglからworldオブジェクトを取得
const { world } = negl;
// 2. エフェクト（Ob）オブジェクトを取得
const ob = world.getObByEl(".test-effect");
setInterval(() => {
// 3. 取得したエフェクトの値を0.01ずつ変更
ob.uniforms.uProgress.value += 0.01;
}, 100);
})();- 💡index.htmlの状態を確認したい場合はこちら
- Negl オブジェクトから World オブジェクトを取得します。
- World オブジェクトの getObByEl メソッドを使い、セレクタ文字列（.test-effect）から、その DOM 要素に紐づくエフェクト（Ob オブジェクト）を取得します。
- uProgress の値を変更することでアニメーションが行われます。
これで画面の左から右に境界が移動するアニメーションが実行されます。
ライブラリを使ってアニメーションを動かす
前項では setInterval を使っているため、アニメーションがカクついています。 アニメーションをより滑らかに実行するために アニメーションライブラリのgsap (opens in a new tab) を使ってみましょう。
まず、ターミナルを開き、gsap のライブラリをインストールします。
pnpm i gsapsetInterval の処理を以下のように書き直します。
index.js
// gsapをインポート
import gsap from "gsap";
// 1.gsapを使ってuProgressの値を変更
gsap.to(ob.uniforms.uProgress, {
value: 1,
duration: 2,
});
// setInterval(() => {
// ob.uniforms.uProgress.value += 0.01;
// }, 100);- gsap.to (opens in a new tab)関数に引数を渡すことで、uProgress オブジェクトの value プロパティの値を 0 から 1 に滑らかに遷移させています。
💡
gsapは基礎編、応用編で頻繁に出てくるライブラリになりますので、そちらを参照してください。
このようにして negl では JavaScript でエフェクトの値を変更することで、エフェクトアニメーションを行うことができます。