Lottieが作成できるソフト紹介

らら
らら

はじめに

今回は、After Effects+Bodymovinじゃなくて、

ソフト１つでLottieが作成可能、しかも無料なソフトの紹介

ブラウザーで作成できて・無料もあるが制限付き・・

この辺りは、無料の条件が変わったりするので注意・・

現在この手のものって・・一時的使用で月契約とか・・　プロジェクトファイル管理とか・・めんどう・・ってのが・・

LottieFiles

https://lottiefiles.com/

SVGator

https://www.svgator.com/

Lottielab

https://www.lottielab.com/

Lottie素材

Lottieでどんなことできるのか・・見れます。。動きとか参考になります。

iconscout

https://iconscout.com/

lottie-animations

https://iconscout.com/lottie-animations/

Windowsアプリで使用できて・無料制限なし

glaxnimate(グラクスニメート)

https://glaxnimate.org/

https://glaxnimate.mattbas.org/

あとGithub系だと、ExpressiveAnimator,Haiku Animatorあるけど・・

Synfig StudioもLottieがいけるみたい。。

https://www.synfig.org/

問題とか・・

サービスなくなって、変更できなくなったり、使えなくなるとこまるので・・

Lottieとか有名どころの規格ぽいのを使っておいて、なるべく、プロジェクトとかも保存できたほうが・・・

Lottie（ロッティ）とは、

Airbnbのエンジニアが開発したJSONベースのアニメーションファイル形式です。

Lottieを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。

Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます

ウェブ上での動作させるためには・・


<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.js"></script>
<div id="svg" style="width:512px;height:512px"></div>
<script>
lottie.loadAnimation({
	container: document.getElementById('svg'), 
	path: '作成したjsonファイル',
	renderer: 'svg',
	loop: true,
	autoplay: true,
});
</script>

再生・停止ボタン


<div id="svg" style="width:512px;height:512px"></div>
<button id="lottie_play_0" onclick="anim.play(); document.getElementById('lottie_pause_0').style.display = 'inline-block'; this.style.display = 'none'" style="display:none" title="Play">再生</button>
<button id="lottie_pause_0" onclick="anim.pause(); document.getElementById('lottie_play_0').style.display = 'inline-block'; this.style.display = 'none'" title="Pause">停止</button>
<script>
var anim = lottie.loadAnimation({
	container: document.getElementById('svg'), 
	path: '作成したjsonファイル',
	renderer: 'svg',
	loop: true,
	autoplay: true,
});
</script>

glaxnimate

今回のメインはこいつ・・

下記からダウンロード

https://glaxnimate.mattbas.org/download/

こちらバージョンは古いようです。。2024/10時点でこちらは5.4

Lottieが作成できるソフト紹介

https://glaxnimate.org/download/

こっちが最新が落とせるようです。。2024/10時点でこちらは5.5

Lottieが作成できるソフト紹介

サイトは２つあるのですが・・

githubから・・ GitLab系にうつってるから？？

https://github.com/mbasaglia/glaxnimate

https://gitlab.com/mattbas/glaxnimate

下記がダウンロードされるの

解凍して、使用します。インストーラーはありません。

glaxnimate ver0.5.4のwindows版では日本語にしても日本語になりませんでした。

glaxnimate-x86_64.zip

日本語化をつくる。

上記からソースを落として・・

準備

windows pythonをインストールしてコマンドラインで実行できるように・・

https://www.python.org/downloads/

windows Qtをインストール

https://www.qt.io/ja-jp/

解凍・・してソースディレクトリから

data\translationsで

pythonで下記を実行

たぶん。既存にあるglaxnimate_en_US.tsでもよい気がするが・・・一応作る・・


auto_en.py

下記が作成されるので・・


glaxnimate_en_US.ts

下記にリネーム


glaxnimate_ja_JP.ts

ファイルを開いて


<TS version="2.1" language="en_US">

下記に変更してUTF8で保存


<TS version="2.1" language="ja_JP">

下記の部分をRemoveを削除　みたいに翻訳していく。。


        <translation>Remove</translation>

Qtのlconvertでコンバートする


lconvert -i glaxnimate_ja_JP.ts -o qt_ja.qm

たぶん使わないけど。。qmを戻すのは・・下記で


lconvert -i qt_ja.qm -o qt_ja.ts -if qm -of ts

出来上がった。 qt_ja.qmを

glaxnimate\bin\translationsへ上書きする。

筆者は・・

こんな感じで、英語部分を抽出して

標準出力ので　perl xxx.cgi>lang.txt

UTF8で保存


#!/usr/bin/perl
	open(DBDATA,"./glaxnimate_ja_JP.ts");
	@lines = <DBDATA>;
	close(DBDATA);
	foreach $line (@lines) {
		$line =~ s/\r\n$/\n/g;
		chomp($line);
		if($line =~ /<translation>(.*?)<\/translation>/ ) {
			$key = $1;
			print $key."\n";
		}
		if($line =~ /<translation type="(.*?)">(.*?)<\/translation>/ ) {
			$key = $2;
			print $key."\n";
		}
	}

上記をもとに下記のリストをつくって。

英語はぐるぐる翻訳とか・・　lang.txt UTF8で保存

筆者は200行ぐらい無料翻訳で・・エクセルで下記をつくります。。

英語 日本語


Add New	新規追加
Move Up	上へ移動
Move Down	下へ移動
Remove	削除
Use Default	デフォルトを使用
Clear	クリア
Select Color	色を選択
Saturation	彩度

こんな感じのマージ用プログラム作りました。。

UTF8で保存


#!/usr/bin/perl
	open(DBDATA,"./lang.txt");
	@langs = <DBDATA>;
	close(DBDATA);
	open(DBDATA,"./glaxnimate_ja_JP.ts");
	@lines = <DBDATA>;
	close(DBDATA);
	foreach $line (@lines) {
		$line =~ s/\r\n$/\n/g;
		chomp($line);
		if($line =~ /<TS version="2.1" language=\"en_US\">/ ) {
			print "<TS version=\"2.1\" language=\"ja_JP\">" ."\n";
		} else {
			if($line =~ /<translation>(.*?)<\/translation>/ ) {
				$key = $1;
				$find = 0;
				foreach $lang (@langs) {
					$lang =~ s/\r\n$/\n/g;
					chomp($lang);
					($eng,$jp) = split(/\t/,$lang);
					if($eng eq $key) {
						$find = 1;
						print "        <translation>$jp</translation>\n";
						last;
					}
				}
				if($find ==0) {
					print $line ."\n";
				}
			} elsif($line =~ /<translation type="(.*?)">(.*?)<\/translation>/ ) {
				$tp = $1;
				$key = $2;
				foreach $lang (@langs) {
					$lang =~ s/\r\n$/\n/g;
					chomp($lang);
					($eng,$jp) = split(/\t/,$lang);
					if($eng eq $key) {
						print "        <translation type=\"$tp\">$jp</translation>\n";
						last;
					}
				}
			} else {
				print $line ."\n";
			}
		}
	}

無事、翻訳完了！

作成したファイルは

Edit＞Settingsで キャプチャーは日本語ですが・・w

Lottieが作成できるソフト紹介

ここで・・・

Lottieが作成できるソフト紹介

全貌は・・・こんな感じ日本語化した感じで・・

Lottieが作成できるソフト紹介

機械語翻訳版ですが・・ほしい方はこちらから・・

glaxnimate-0.5.4　or 0.5.5用

qt_ja.qm

使ってみて・・・

多少、くせはありますが。。使えます・・ただ。たまに落ちるので・・まめに保存したほうがいいかも・・

チュートリアルあるので、

下記からプロジェクトファイルも落とすことができるので・・・

https://glaxnimate.mattbas.org/tutorial/

さいごに・・・

おいおい・・・使い方は？って・・・・。たぶん、別の担当がのせてくれるかも・・

おいらは、翻訳部分だけ・・w

関連記事