レイヤーにライン(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 0

There are no comments yet.

Leave a reply