TextAliveJp / textalive-app-lottie

Adobe After Effects で作成したアニメーションを Lottie プラグインで書き出したものをビートに合わせて表示するTextAlive App APIの作例

Home Page:https://textalivejp.github.io/textalive-app-lottie/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TextAlive App API lottie example

Adobe After Effects で作成したアニメーションを Lottie プラグインで書き出したものをビートに合わせて表示するサンプルコードです。 Lottie 関係の部分以外は basic example そのままです。

リポジトリに含まれている fw_white.json が Lottie のアニメーションデータです。他のアニメーションに差し替えて遊んでみてください。アニメーションを作成する環境がない場合は LottieFiles で公開されている無償のアセットを探してみてください。

TextAlive ホストと接続された状態をテストするには TextAlive App Debugger のページにアクセスしてください。

English version available in README.en.md.

違う楽曲で試すには

TextAlive App API で開発されたWebアプリケーションは、(特定の楽曲向けに作り込んでいない限り)URLのクエリパラメタで ta_song_url={楽曲のURL} を指定すると異なる楽曲で演出を試せます。

開発

Node.js をインストールしている環境で以下のコマンドを実行すると、開発用サーバが起動します。

npm install
npm run dev

ビルド

以下のコマンドで docs 以下にビルド済みファイルが生成されます。 サンプルコードのデモページGitHub Pages で、このリポジトリの docs 以下のファイルが提供されています。

npm run build

TextAlive App API

TextAlive

TextAlive App API は、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション(リリックアプリ)を開発できるJavaScript用のライブラリです。

TextAlive App API について詳しくはWebサイト TextAlive for Developers をご覧ください。


https://github.com/TextAliveJp/textalive-app-lottie

About

Adobe After Effects で作成したアニメーションを Lottie プラグインで書き出したものをビートに合わせて表示するTextAlive App APIの作例

https://textalivejp.github.io/textalive-app-lottie/

License:Other


Languages

Language:JavaScript 70.5%Language:HTML 15.0%Language:CSS 14.5%