Motion周期表で学ぶAe ④Line Weight

モーショングラフィックの基礎を学ぶため、モーション周期表をベースに学んだ気づきやメモを残していく。

④Line weight

・完成イメージ

http://foxcodex.html.xdomain.jp/LineWeight.html

・構成要素

シェイプレイヤー（円）のみ。

・作成法（引用）

パスを作成し、コンテンツ→「追加▶」から「線」を設定。そこから「線幅」の値を変更する。

http://foxcodex.html.xdomain.jp/LineWeight.html

・分解してみる

線のStroke with（線幅）に以下のエクスプレッションが設定されていた。

x = Math.sin(time*Math.PI/2)*20
Math.abs(x);

このエクスプレッションの意味が分からないので、解読が必要…

Trim PathのStartとEndにキーフレームも追加されている。

End 0から100、Start 0 から100

・作ってみる(エクスプレッションなしver)

①シェイプレイヤーで円をつくる。塗りなし、線幅15pxで設定。

②Stroke withにキーフレームを打ち、0→100、100→0に設定。

③Opacityも②に合わせて0→100、100→0に設定。

・作ってみる(エクスプレッションありver)

①シェイプレイヤーで円をつくる。塗りなし、線幅15pxで設定。

②Stroke widthにエクスプレッションを追加。このとき、下記のように書くとエラーで動かなかった。

x = Math.sin(time*Math.PI/2)*20Math.abs(x);

しっかり改行を忘れずに。

x = Math.sin(time*Math.PI/2)*20
Math.abs(x);

このエクスプレッション、わかる範囲で解読するとこんな感じ。

Math.sinはパラメータをループさせる指示で、規則性のある動き、今回は線幅の大小を周回させるという宣言？

(time*Math.PL/2)というのがよくわからなかったので、この数値2をいじってみると下記のようになった。※全て*20

つまり、(time*Math.PL/★)この★部分数値は、何秒間に動きを周回させるか、という意味のようだ。

今回の場合、2なら2秒間かけて線幅が0→100になる。1なら1秒間で0→100になるので２よりも早い間隔でループするし、4なら4秒間で0→100となるのでゆっくりじんわりと線幅の値が変わっていく。

上記記述の後の「*20」部分は線幅。※全て(time*Math.PL/20)

③最後にcontentsに追加でパスのトリミングを追加して、Endは0から100に、StartのキーフレームをEndが100になった状態を見せたい秒数で打って完成。

・応用編

Scaleと組み合わせたもの。

・気づき

☆エクスプレッションは難しいけど１つ１つ理解していけば効率がと表現の幅が広がりそう。

☆エクスプレッションを使ったやり方と使わなかったやり方の両方を模索できて勉強になった。

※Ae勉強中のため間違っている/もっと効率よくできる方法があるかもしれません。そっと教えてくれると嬉しいです。