レイヤーにライン(2D)

seguimi


レイヤーにライン(2D)

今回は、93さんのeffect-Bの中にあるレイヤーにライン(2D)を使った動きを紹介します。

effect-Bは、old_script_etc.zipに含まれています。
プロフィール欄にあるURLからDLしてください。
 93さんのtwitter


使い方

レイヤーにライン(2D)は、指定したレイヤーのオブジェクト間を線で結びます。
2つ以上のオブジェクトが必要です。


オブジェクトを二つ出しました。
Aのオブジェクトにレイヤーにライン(2D)をかけます。





設定から、レイヤ指定の欄にBオブジェクトを置いたレイヤー番号を入力します。

元を描画にチェックを入れると、Aが見えるようになります。

色ボタンで線の色を変えることができます。



A、Bのオブジェクトを移動させると、ABを結ぶ線もそれに合わせて移動します。
伸縮自在ですね。





三角形になる部分では、オブジェクトCにレイヤーにライン(2D)をかけました。
Cから複数のレイヤーに対して線を引く場合は、レイヤ指定欄に{3,4}のようにカンマで区切ります。

点のサイズを1にすると、点が見えなくなります。



線を引く


線は、長さ%で調節します。

0から100で指定レイヤに向かって線が伸びていきます。
100から200で線が消えていきます。
100固定で線が表示されます。



赤いラインのように時間差で引く線は、
中央のオブジェクトに向かってひとつひとつ設定しています。

一方、緑のラインのように同時に引く線は、
中央のオブジェクトに、レイヤーにライン(2D)をかけるだけで3本の線が引けます。



使用例


折れ線グラフのアニメーション。
時間差とイージングがポイントです。

点が上がる際は35番、下がる際は39番を使用しました。

数値はカウンターです。



移動の軌跡を線で引いています。



三角形と六角形をもとに図形を描画。

いかがだったでしょうか。
ひとつひとつオブジェクトを繋ぐと少し手間がかかってしまいますが、
その分自由に動かすことができます。

モーショングラフィックスを作るときなど、とても役に立つと思います。
是非試してみてください。

93さんのtwitter


センスは知識からはじまる
グラフィック文化を築いた13人: 『アイデア』デザイナーインタビュー選集
最も伝わる言葉を選び抜く コピーライターの思考法
配色アイデア手帖 めくって見つける新しいデザインの本


Comments 4

There are no comments yet.
MAD初心者  

こんにちは。いつも見させていただいております。
質問なのですが、初めのGIFで点滅させているのはどうやっていますか?
同じような形を作って点滅表現…という感じでしょうか?

2018/11/04 (Sun)  | EDIT | REPLY |   
seguimi  
To MAD初心者さん

コメントありがとうございます。

同じサイズの図形を使って、透明度を30から100にしています。

2018/11/05 (Mon)  | EDIT | REPLY |   
MAD初心者  
To seguimiさん

そうだったんですね!
回答していただきありがとうございます。

2018/11/07 (Wed)  | EDIT | REPLY |   
seguimi  
To MAD初心者さん

お役に立てたなら幸いです。

不定期ですが、これからもよろしくお願いします。

2018/11/10 (Sat)  | EDIT | REPLY |   

Leave a reply