イラストや図形に動きを加えて、アニメーション映像にしたい。
アニメーションやモーショングラフィックスを簡単に作れるアプリはないかな？
今回は、Webブラウザから使える無料アプリ、「Trangram」の使い方を紹介します。
この記事の目次
「Trangram」でモーショングラフィックス 基本的な使い方
Trangramはどんなアプリ？
Rocket Launch#Trangram #MadeWithTrangram #FreeAdobeAlternative #MotionGraphics #MotionDesign #anmiation pic.twitter.com/Eh0BbYizQ7
— Trangram (@TrangramMotion) April 23, 2024
Trangramは、Webブラウザ上で動作する無料アプリです。
描いた絵や図形を動かす機能に特化しており、モーショングラフィックスの作品が簡単に作れます。
イラストを動かしたい方や動的なデザイン作品を作りたい方は、ぜひ試してみてください。
キャンバス画面の使い方
Trangramのキャンバス画面を表示しています。
メニューバー
画面上部のメニューバーからは、プロジェクトの読み込みや出力ができます。
整列や反転、レイヤーなどの汎用的な機能も、メニューバーの中に配置されています。
ツールバー
画面左にはツールバーがあります。
ツールバー内からツールを選択して、図形などのシェイプやテキストをキャンバスに作成していきます。
シェイプ詳細
画面右には、選択しているシェイプの詳細が表示されます。
シェイプの位置・サイズ・不透明度・合成モードなどを設定できます。
タイムライン
画面下には、タイムラインがあります。
タイムラインの欄は、シェイプをアニメーションさせる際に使用します。
シェイプを作る
ツールバー（オブジェクトビュー）
ツールバーの中には、ドローツール（フリーハンド）・ラインツール・図形ツール・テキストツールなどが格納されています。
作りたいシェイプに合わせてツールを使い分けていきましょう。
ツールバーには二つのモードがあり、一番上にあるスイッチで切り替えられます。
現在はオブジェクトビューが表示されており、シェイプの全体の形を作るのに適しているモードです。
ツールバー（パスビュー）
一番上のスイッチを切り替えると、パスビューのモードになります。
パスビューは、シェイプの細部を調整するのに適しているモードです。
パスビューに切り替えると、ベクターツール・回転ツール・スケールツールが新しく使えるようになります。
ベクターツールを使うと、図形の各頂点や曲線の傾きをコントロールできます。
シェイプを編集する
シェイプの枠線の大きさや不透明度、合成モードなどを調整したいときは、画面右にあるシェイプ詳細から入力をします。
Transform
サイズ・位置・角度・深度（シェイプの手前／奥）を調整できます。
Geometry
シェイプの形が数値で格納されています。
別のシェイプに変化するアニメーションを作る際に、Geometryを使用します。
Corner
シェイプを角丸にしたときのタイプを設定できます。
Stroke
シェイプの枠線のサイズや色を指定できます。
「Dash」に数値を入力すると、枠線が破線になります。
Shadow
シェイプの落ち影を設定できます。
Transparency
シェイプの合成モードと不透明度を設定できます。
アニメーションを作る
最初のキーフレームを作る
キャンバスにシェイプを作成すると、自動的にキーフレーム（青いダイヤマーク）が登録されます。
キーフレームには、シェイプの位置や形などの情報が記録されています。
現在は「0s」にスライダーがセットされているので、アニメーション開始時の時点で解説図のシェイプになる、ということを示しています。
次のキーフレームを作る
タイムラインの青いスライダーを動かして、フレームを進めましょう。
その後、キャンバスのシェイプの形を変化させます。
シェイプの形を変化させると、キーフレームが自動的に登録されます。
現在は「1s」にスライダーがセットされているので、アニメーション1秒の時点で解説図のシェイプになる、ということを示しています。
間は自動的に補間される
タイムラインの再生ボタンを押すと、ボールが右に移動しながら縦長に伸びていくアニメーションが表示されます。
二つのキーフレームの間は、位置や大きさが自動的に補間されます。
プロジェクトを出力する
プロジェクトが完成したら、ファイルを出力しましょう。
画面左上のメニューボタンを押して、「Export」を選択します。
出力できるファイル形式は、以下の通りです。
- TG（Project）
- SVG
- GIF
- MP4
- JPG
- PNG
- WebM
- WebP
後でプロジェクトを編集したい場合は、Trangramのプロジェクト形式の「TG」形式で出力します。
メニューボタンにある「Import」から、TG形式のファイルを読み込めます。
また、Trangramのアカウントを作成して、クラウドにバックアップすることも可能です。
動画で出力したい場合は、「MP4」や「GIF」形式を選択しましょう。
「Trangram」でモーショングラフィックス 応用的な使い方
複数のシェイプを組み合わせ、新しいシェイプを作る
シェイプを整列する手順
複数のシェイプを組み合わせて、新たにシェイプを作ることもできます。
今回は、二つのシェイプを重ねて中心を切り抜きたいので、位置をきれいに揃える必要があります。
画面上部の「Align」から、水平方向の中央揃えを選択します。
シェイプを整列した結果
整列を実行すると、二つのシェイプが中央揃いになりました。
ブール演算の手順
画面上部の「Boolean Operations」で、シェイプの組み合わせを行います。
切り抜きをしたいので、「Subtract」を選択します。
ブール演算の結果
二つのシェイプが重なっている部分が切り抜かれました。
続いて、シェイプの上部の4つの頂点を選択して、丸いポインタをドラッグします。
角を丸くする
シェイプ上の丸いポインタをドラッグすると、頂点を角丸にできます。
角を丸くして、ハート形を作っています。
別のシェイプにアニメーションする
二つのシェイプを作る
円のシェイプを星のシェイプに変化させるアニメーションを作ります。
シェイプBのデータをコピーする
まずは「Align」で、二つのシェイプの位置を揃えます。
続いて、星のシェイプを選択して、「Geometry」内にある「Copy Data」をします。
シェイプAにデータをペーストする
この後の手順では、星のシェイプは使わないので非表示にしておきます。
円のシェイプを選択して、タイムラインからフレームを進めます。
その後、「Geometry」内にある「Data」の欄に、先ほど星のシェイプからコピーした値をペーストします。
データをペーストした結果
ペーストを実行すると、円のシェイプは星のシェイプに変化し、キーフレームも自動的に登録されます。
これで、開始時の地点で円のシェイプ、1秒後の地点で星のシェイプになるアニメーションができました。
シェイプの色を変える
星のシェイプに変化させながら、色も変化させてみます。
二つ目のキーフレームを選択している状態で、「Fill Color」から色を変更します。
形・色が変化するアニメーションになる
円から星のシェイプに、黄色から水色に、徐々に変化するアニメーションができました。
シェイプをトラッキングさせる
トラッキングの軌道を作る
あるシェイプを別のシェイプに沿って、移動させるアニメーションを作る手順です。
軌道のシェイプを作った後、画面上部から「Add Tracker」を選択します。
軌道とシェイプを関連づける
軌道に沿って移動させるシェイプを新しく作ります。
シェイプを作成後、タイムライン上の「Parent Link」から、軌道のシェイプ欄にある「Tracker」へ、ドラッグ＆ドロップの操作をします。
軌道に沿ってシェイプがアニメーションする
円のシェイプがラインに沿って動くアニメーションができました。
ライン以外にも、図形のシェイプの輪郭に沿ってトラッキングさせることも可能です。
まとめ
Webブラウザから無料で使えるアプリ、「Trangram」の紹介でした。
Trangramは、図形やイラストを簡単に動かすことができ、映像作品の制作に適しているアプリです。
モーショングラフィックスを作りたいとお考えの方は、Trangramをぜひ試してみてください。
