Skip to content

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

License

Notifications You must be signed in to change notification settings

TextAliveJp/textalive-app-lottie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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の作例

Topics

Resources

License

Stars

Watchers

Forks