ブラウザ上で動作するアニメーション作成ツールが「Trangram」です。Trangramは誰でも無料で使えるとのことなので、実際に使ってみました。

Trangram

https://www.trangram.com/

◆Trangramで作れるアニメーションの例

Trangramの公式サイトに投稿されている作例の1つが以下。Trangramを使えば、無料で高品質なアニメーションを作れるというわけです。

◆Trangramでアニメーションを作る手順

Trangramを使うには、まず以下のリンクをクリックして公式サイトにアクセスします。

Trangram

https://www.trangram.com/

公式サイトにアクセスしたら「OPEN EDITOR」をクリック。



すると、アニメーション作成ツールが起動します。白いエリアは図形の描画エリアで、画面下部のタイムラインを操作して図形の動くタイミングを操作することができます。



今回は「円形が2秒間かけて画面右側へ移動する」というアニメーションを作ってみます。まず、白いエリアに図形を描画してみます。まず、画面左側のツール一覧から「Ellipse Tool(楕円ツール」をクリック。



続いて、白いエリア内をドラッグ＆ドロップして円を描きます。



円を描くとこんな感じ。



円を描いたら、タイムラインの「2s」と記された部分をクリック。



続いて、「2秒後の円の位置」へ円を移動させます。



初期設定では10秒間のアニメーションを作成する設定になっているので、赤枠で囲った灰色のバーを2秒の位置まで縮めます。これで「円形が2秒間かけて画面右側へ移動する」というアニメーションが完成。



アニメーションを出力するには、画面左上のボタンをクリックしてから「Export」をクリック。



ファイル名を入力して、「Type」をクリック。



すると、保存するファイル形式をTG、GIF、PNG、WEBP、JPEGのいずれかから選択できます。今回はGIFを選択しました。



GIF形式を選択すると、フレームレートや解像度の指定画面が表示されます。今回は何も設定を変更せずに「Download」をクリックしました。



出力したGIFアニメーションが以下。画像をクリックするとアニメーションを再生できます。



図形は移動だけでなく形状変化も表現可能。以下の例では時間の進行に合わせて円を伸縮させています。



図形の移動と形状変化を組み合わせて作成したアニメーションが以下。Ellipseでは工夫次第で多様なアニメーション表現が可能です。



◆Ellipseで編集中のアニメーションを保存する方法

Ellipseでは、アカウントを作成することで編集中のアニメーションを保存できます。アカウントを作成するには、編集画面上部の「Unsaved Changes」と記された部分をクリック。



ログイン画面が表示されたら「Sign UP」をクリック。



名前、メールアドレス、パスワードを入力したら「Sign Up」をクリック。



すると、入力したメールアドレスに確認メールが送信されるので、受信箱を確認します。



受信箱には以下のようなメールが届いているので「Confirm Email」をクリック。



するとEllipseのログイン画面が表示されます。今回は編集中のアニメーションを保存したいので、Ellipseの編集画面のタブへ移動。



確認メール送信通知を×ボタンをクリックして閉じます。



続いて「Unsaved Changes」をクリック。



メールアドレスとパスワードを入力して「Log In」をクリック。



これで編集中のアニメーションが自動保存されるようになりました。



保存したアニメーションを再度編集するには、Ellipseのトップページにアクセスしてから左上のボタンをクリック。



「My Designs」をクリック。



編集したいアニメーションの右側にあるメニューボタンをクリックしてから「Edit」をクリックすると、アニメーションの編集を再開できます。