新たに、フリーで使いやすい機種依存しないオンライン版のGIFアニメーションツールTrangramを発見したので、プチ連載してみることにしました。
Trangram
https://www.trangram.com/
Trangram
https://www.trangram.com/
この連載は以下で確認できます。
サイトに入った直後の画面です。
［TUTORIALS］をクリックすると・・・
YouTubeのチュートリアルページに移動します。
［FEATURES］をクリックすると・・・
特徴紹介のページに移動します。
About Trangram
Trangramは、モーショングラフィックを作成、アニメーション化、共有するための無料のワンストッププラットフォームです。 Trangramのパワフルで使いやすいツールを使えば、コードを書くことなく簡単に魅力的なモーショングラフィックを作成することができます。 Features
以下の機能デモは、Trangramエディタを使って作成されています。
Round the corner／角を丸める
コーナーツールは、図形の角を丸くしたり、シャープにしたりできます。 丸め、逆丸め、面取り、三角形から多角形、半円など、あらゆる種類の図形に対応します。
Combine shapes／図形の組み合わせ
ブーリアン演算は、すでにあるシェイプを結合、減算、交差、除外して新しいシェイプを作成できます。［Combine shapes］はIllustratorのパスファインダーのような機能です。
It's morphing time／モーフィングタイム
正方形を円にしたり、星をハートにしたり、どんな形でも簡単にモーフィングアニメーション化できます。
Let stroke dance／ストロークを踊らせる
トリムパスは、線や図形を描くためのデジタル消しゴムのようなものです。アニメーションの中で線やシェイプの一部を徐々に消したり見せたりして、舞台の幕が開いたり閉じたりするように、滑らかに現れたり消えたりするように見せることができます。ドローイングやデザインエレメントを使ったすてきなアニメーションを作成できるクールなツールです。
Follow me／フォローして
モーションパスは、アニメーションするオブジェクトのガイドトラック的なものです。道路を走る車のように、特定の経路をたどりながら、ある場所から別の場所へスムーズに移動できるようにします。アニメーションの中のオブジェクトを、コントロールされた美しい方法で、行きたいところへ行かせるのに便利なツールです。
Parenting／ペアレンティング
ペアレンティングとは、あるオブジェクトを別のオブジェクトにコントロールさせる方法です。2つのオブジェクトをリンクさせることで、1つのオブジェクトを動かしたり変更したりすると、もう1つのオブジェクトもそれに追従したり、協調して反応したりします。アニメーションやビジュアルエフェクトを作成する際に、異なる要素がスムーズに連動する必要がある場合にとても便利です。
Endless loops／エンドレス・ループ
ループは、シンプルなループ、前後のパターン、連続したシーケンスなど、アニメーションの繰り返しをコントロールするのに役立ちます。Cycle／サイクル： 終わったら最初から繰り返します。動いているオブジェクトの場合、元の位置に戻って再び動きを開始し、連続的なサイクルを作成します。
Ping Pong／ピンポン： ボールが2つの壁の間でバウンドするように、アニメーションは前方に再生され、反転し、繰り返されます。
Continue／続続： アニメーションで現在のサイクルを終了させ、中断したところから続けることで、永遠に続くようなスムーズで中断のないアニメーションのループを作ります。
Move at the right speed／適切なスピードで動く
タイミング機能は、アニメーションの動きのペースやスタイルをコントロールします。なめらかに動くか、急に速くなるか、ゆるやかに減速して止まるかを決めます。イーズイン、イーズアウト、イーズインアウト、ステップ機能など、多くのオプションがあります。
Look through a hole／穴から覗く
クリップマスクはステンシルのようなもので、画像やオブジェクトの特定の部分を表示し、それ以外の部分を隠すことができます。写真の上に切り抜きを置いて、切り抜きの中にあるものだけを見せるのに似ています。クリップマスクは、写真の特定の部分に焦点を当てたり、オブジェクトや画像の一部を見せたり隠したりしてアーティスティックな効果を作り出したりするのに便利です。
コレラについては検証後に後日手順をアップします。
［OPEN ENTER］をクリックすると・・・
編集画面に入ります。
MENU メニュー
New 新規作成
Save 保存
Import 読み込み
Export 書き出し
SETTING 設定
Artboard 作業エリア
Preferences 環境設定
ツール類はこんな感じです。 パスモード切替（※）でツール表示が3つほど追加されます。
※上図の左側の状態なら選択はIllustratorの選択ツール。右側の状態なら選択はIllustratorのダイレクト選択ツール。
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm（VP9）を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。
