現在進行中の案件で、Math.exp というエクスプレッションを使用したアニメーションを作成しましたので少しご紹介したいと思います。

Math.exp(任意の数値); と記述した場合、約2.72を任意の数値乗した値が戻ってきます。

約2.72がどこから出てきたかは数学的な話になってしまうので深く考えずに先に行きます。

Math.exp(1); と記述すると 約2.72の一乗で約2.72。

Math.exp(2); と記述すると 約2.72の二乗で約7.39。

Math.exp(3); と記述すると 約2.72の三乗で約20.1。

・
・
・

では、任意の数値を毎度おなじみの time に置き換えましょう。

Math.exp(time);

どんな数値が生成されているか見てみます。



数値が加速して増えているように見えます。

グラフも見てみましょう。



縮尺の関係で4秒位まで0に見えますが、じわじわと増えています。

この性質を利用して、加速減速を表現させることが出来ます。

試に適当な平面を作り回転にこのエクスプレッションを記述します。

※ここでは説明の便宜上スライダー制御に記述して、ピックウィップで参照しています





徐々に回転速度が増していき、後半は逆回転して見えるほどのスピードで回転しています。

今度は徐々に遅くしてみます。

適当な数値/Math.exp(time) と記述すれば、時間とともに分母Math.exp(time)が増えていきますので戻ってくる値は徐々に0に近づいていきます。

今回は適当な数値を360としてみました。

360/Math.exp(time);



徐々に減速しました。

以前ご紹介した Math.sin 等と組み合わせれば落下してきたオブジェクトがバウンドして徐々に停止する表現などが簡単に出来ます。



-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。


※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

以前の記事「AfterEffects エクスプレッション linear（リニア）を使ってシームレスなアニメーションチェンジ(2)」でちらっと出てきたスライダー制御を活用してアニメーションをコントロールしてみたいと思います。

まずは、毎度おなじみMath.sin Math.cosで適当に円運動を作ります。
※Math.sin Math.cosについてはこちらの記事をご覧ください
オブジェクトの位置プロパティに下記の様なエクスプレッションを記述しました。

Distance=250;
Speed=1;
x=Math.cos(Math.PI*time*Speed)*Distance;
y=Math.sin(Math.PI*time*Speed)*Distance;
[x,y]+value;


ここからスライダー制御を使って任意のタイミングで半径を変えられるようにしていきます。
Distance=250;　が半径を意味していますので、この250をスライダー制御に置き換えます。

エフェクト→エクスプレッション制御→スライダー制御を選択します。


スライダーの値を250に変更します。


Distance=250;の"250"を削除して、位置プロパティのピックウィップを引っ張りスライダーまで伸ばします。


自動的に　effect("スライダー制御")("スライダー")　と入力されます。


これで「Distanceの値はスライダーを参照してください」と言う命令文になりました。
この状態で再生を行うと、スライダーの値は250ですので、直接250と指定していたときと全く同じアニメーションです。


ここからスライダーの値を変化させていきます。
キーフレームを打ち、スタートから3秒間250、その後2秒かけて0、さらにその後2秒かけて250へ変化させてみました。


この様なアニメーションになりました。


これだけ見てもパッとしませんが、例えばTrapcodeParticularに応用するとこのようなアニメーションが作成できます。


今回は以上です。

-

【求人情報】


映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。


※スマートホンでご覧いただいたる方はPCページのトップにリンクがございますのでそちらからお願い致します。

前回はオブジェクトの位置に

x=Math.sin(time*2)*20;
y=Math.sin(time*4)*10;
[x,y]

というエクスプレッションを適用して、ふわふわ浮いているようなアニメーションを作成しました。

今回はこれをベースに別のアニメーションを作成します。

早速ですが記述していきましょう。
2行目を少し変更します。

y=Math.abs(Math.sin(time*4)*10);

太字部分が書き加えられた部分です。
さて、どうなったか見てみましょう。



天井に頭をぶつけて跳ね返っているようなアニメーションができました。

書き加えた Math.abs() は()内の数値の絶対値を取得する命令です。

今回の場合は()内に Math.sin(time*4)*10 すなわち 0 → 10 → 0 → -10 → 0 と
推移する数値が入っています。

よってその絶対値ですから、 0 → 10 → 0 → 10 → 0　と なります。

波形はこのようになっています。



少し改良します。

同じく2行目を

y=Math.abs(Math.sin(time*4)*10)*-1;

と、　*-1　を追加しました。

するとこのように変化します。



反復横跳びのようなアニメーションができました。

Math.abs(Math.sin(time*4)*10)が生成した　0 → 10 → 0 → 10 → 0 　と推移する数値に
*-1 していますので　0 → -10 → 0 → -10 → 0　という結果になっています。



仮にこれで目的のアニメーションができたとします。

ところが、「基本的にはokだけど、もう少し動きを大きくして欲しい」とオーダーがありました。
さてどうしましょう。

簡単ですね。
前回の記事をお読みの方はすぐにお分かりだと思います。

x=Math.sin(time*2)*200;
y=Math.abs(Math.sin(time*4)*50)*-1;
[x,y]

太字部分が変更点です。
xの振れ幅を 20 → 200
yの振れ幅を 10 → 50　と変更しました。

こんな感じになりました。



ちょっと左右の動きが速すぎる気がしますが今回は良しとしましょう。

次回はオブジェクトの位置だけでなく他のプロパティにもsin波を利用した
アニメーションを作成したいと思います。

-

【中途採用・求人情報】

映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。


※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。

前回はsin波を利用して微妙に左右に揺れるアニメーションを作成しました。
あまりに微妙すぎて良く分からなかったと思いますが、あれが基本形ですので敢えて紹介しました。
今回は少し手を加えていきます。

前回オブジェクトの位置に

x=Math.sin(time);
y=0;
[x,y]

と言うエクスプレッションを適用し、左右に1ピクセル揺らすことが出来ました。
これを改良してもう少し振れ幅を大きくしてみます。

x=Math.sin(time)*20;
y=0;
[x,y]

1行目を x=Math.sin(time); から x=Math.sin(time)*20; に変更しました。

どうなったか見てみましょう。

x軸方向に 0 → 20 → -20 → 0 ピクセルと周期的に揺らぎました。

これは Math.sin(time) が生成した数値を *20（"*"は掛け算の意味）することによって、
xの振れ幅が20倍になったからです。
当たり前ですが、この *20 を例えば *100 にすればもちろん 0 → 100 → -100 → 0 と推移します。

これで振れ幅を任意に調整できますね。

今度は周期を変てみましょう。

前回も説明しましたが Math.sin(time)  の周期は約6秒です。
周期を司っているのは time ですので、これになんらかの手を加えれば良さそうです。

試しに、x=Math.sin(time)*20; を x=Math.sin(time*2)*20; と変更してみましょう。

いかがでしょう。ちょっと速く揺らいでいます。
波形を見てみますと、

time では約6秒だった周期が time*2 としたことによって約3秒になりました。
倍速で揺らいでいると言うことですね。
ちなみに time/2 ("/"は割り算）とすれば1/2倍速で周期が約12秒となります。

これで振れ幅と周期を任意に調整出来るようになりました。
ここまでを理解できれば、あとは応用次第でいろいろなアニメーションが作成出来ます。

今度はy軸方向にも動かしましょう。 yはずっと 0 のままでした。
試しにxに入れていた式と同じものをyに入れてみます。

x=Math.sin(time*2)*20;
y=Math.sin(time*2)*20;
[x,y]

どうなるかおおよそ察しが付きますよね。

y軸方向も 0 → 20 → -20 → 0 と周期的に揺らぎだしました。
xと同じ数値が生成されているのでyも同じで当然ですよね。

ここでy軸の周期と振れ幅を変えてみましょう。

x=Math.sin(time*2)*20;
y=Math.sin(time*4)*10;
[x,y]

さてどうなるでしょうか。

ふわふわ浮いているように見えなくもないアニメーションが出来ました。
これはこれで何かに使えそうですね。

yの周期は*4 の4倍速(約1.5秒)で、振れ幅は *10 の10ピクセルです。
参考までに、波形はこの様になっています。

いかかでしょうか。

この様に数値を変えるだけで印象がかなり違うアニメーションが作成できます。

次回はこのエクスプレッションをベースにして、さらに手を加えていきたいと思います。

-

【中途採用・求人情報】

映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。

エクスプレッションはJavaScriptをベースにしたスクリプト言語で、Adobe AfterEffectsにて
アニメーションを作成するときに使う手法の一つです。

最近エクスプレッションを使う機会が多く、特に sin(サイン)波・cos(コサイン)波 を多用しました。

馴染みのない人には何の事やらサッパリ分からないと思いますが、どんな事が出来るかを
軽くご紹介しますのでお付き合い下さい。

まずオブジェクトを一つ配置します。


※本来AfterEffectsの座標は左上が原点（x=0,y=0）ですが説明の便宜上中心を原点にしています

早速sin波を使ってこのオブジェクトを動かしてみましょう。

今回はオブジェクトの”位置”にエクスプレッションを使いたいと思います。



エクスプレッションを入力するフィールドが現れます。
デフォルトで何か入力されていますが、気にせず消してしまいましょう。



フィールドに次のように入力します。

x=Math.sin(time);
y=0;
[x,y]

さて、これで何が起きるでしょうか。見てみましょう。



パッと見良く分かりませんが、微妙に左右に揺れています。
と言うことは、左右（x軸方向）に何らかの数値の変化が起きています。
（動画上の数値を見ればなんとなく察しは付くと思いますが・・・）

先のエクスプレッションを見てみますと、x=Math.sin(time);　とあります。

"x"という入れ物 に Math.sin(time) という文で生成した数値を入れると言う意味です。

ここで一点注意したいのが現段階では"x"はただの入れ物で、AfterEffectsは位置情報として
認識しません。

"x"って何？って状況です。
次の行 y=0; も同じです。

キモは最後の行　[x,y]　です。

[○,△]の形にして初めてAfterEffectsが、○をx座標に入れて△をy座標に入れればいいのねと
認識してくれます。

従いまして、

x=Math.sin(time);
y=0;
[x,y]

の3行は下のように置き換えることも出来ます。

[Math.sin(time),0]

1行ですが意味は全く同じです。

話が逸れてしまいましたが Math.sin(time) がどんな数値生成して x に入れているか見てみます。



時間の経過と共に　0 → 1.0 → -1.0 → 0（ここで1周期）となだらかに変化しています。

これが Math.sin(time)　が生成したsin波です。
画像では、2.5秒の時に0.5964・・・という数値を生成し、その数値を
オブジェクトのx座標(ピクセル)として扱っています。

なお、 Math.cos(time) とすると
1.0 →  -1.0 → 1.0 と1からスタートします。違いはこれだけです。

ここで一つ重要なのが Math.sin(time)の time です。
これは何かと言いますと、1周期する時間を司っています。

まとめますと Math.sin(time) は、約6秒を1周期としたsin波を生成する為の
命令文と言うことになります。
"約"ってのが気持ち悪いですがそう言うものだと力業で覚えてしまって良いと思います。
（もちろん周期を気持ちよく時間と合わせる事も可能ですが追々で）

簡単に説明するつもりが、思いの外長くなってしまいましたので続きは次回に。

-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。


※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。