y=0; 馴染みのない人には何の事やらサッパリ分からないと思いますが、どんな事が出来るかを 命令文と言うことになります。 従いまして、 "x"という入れ物 に Math.sin(time) という文で生成した数値を入れると言う意味です。 アニメーションを作成するときに使う手法の一つです。 認識しません。 【After Effects】Math.sin,Math.cos【エクスプレッション】 nao 2013年4月29日 コメントなし 今回はMath.sinとMath.cosを使ったエクスプレッションの解説です。 [x,y] デフォルトで何か入力されていますが、気にせず消してしまいましょう。 さて、これで何が起きるでしょうか。見てみましょう。 3dsmax 28 まとめ 9 Particle Flow 7 After Effects 7 script 6 雑学 5 Zbrush 5 Q&A 5 チュートリアル 4 MAYA 3 書評 2 アニメーション 2 プリセットフロー 1 autodesk 1 感想 1 配布 1 エクスプレッション 1 転職 1 モデリング 1 maxscript 1 研究 1 ここで一点注意したいのが現段階では"x"はただの入れ物で、AfterEffectsは位置情報として Math.abs(100*Math.sin(time*Math.PI*1)); 同じく不透明度に使うと点滅のような表現になるサンプルです。「跳ねるような点滅」と言われますが、1秒間にだんだん明るくなって暗くなるような表現です。 先のエクスプレッションを見てみますと、x=Math.sin(time); とあります。 なお、 Math.cos(time) とすると まとめますと Math.sin(time) は、約6秒を1周期としたsin波を生成する為の 1行ですが意味は全く同じです。 y=0; 1.0 → -1.0 → 1.0 と1からスタートします。違いはこれだけです。 ※本来AfterEffectsの座標は左上が原点（x=0,y=0）ですが説明の便宜上中心を原点にしています Copyright © モーションファイル All Rights Reserved. こんにちわ！大阪でクリエイーターをしています、藤原ななえ（@fujiwara_nanae）です！, 皆さん、動画編集たのしんでいますかー！おそらくこの記事を読んでくださっている方の多くは、動画編集をはじめてまだ日が浅く「Adobe Premiere Pro（プレミアプロ）」をはじめとする専用アプリでの慣れない作業にイライラしてしまうこともあるのではないかと思います。わからないことに頭を悩ませる時間ってもったいないですよね。問題はサクッと解決して、ご自身の作品に集中しましょう！, After Effectsで頻繁に使うエクスプレッションを今すぐ知りたい方は、目次の3番をクリック。エクスプレッションとは？構造や仕組みって？といったそのものへの理解を深めたい方は、目次の1番からじっくり読み進めてみてくださいね。では、目次はこちら！, エクスプレッションとは、After Effects上で「JavaScript（ジャバスクリプト）」に基づくプログラミング言語を使ってアニメーションを制御できる機能です。エクスプレッションを使えば、複雑なアニメーションもキーフレームを設定することなく簡単に作成できますので、After Effectsを扱うなら絶対に身につけた方がいいと言っても過言ではないスキルです。, JavaScriptとは、本来ウェブサイトを表示するためにブラウザ上で働くプログラミング言語で、ウェブページに動きを加えることができる点に大きな特徴があります。, プログラミングと聞くとやけに難しそうな響きですが、After Effectsのエクスプレッションにはオートコンプリート機能が備わっていますので、専門的なJavaScriptの知識などは必要ありません。オートコンプリートとは、文字入力を予測して候補を表示してくれる機能のことで、入力操作を軽減することで作業を効率化できるだけでなく、初心者さんがエクスプレッションに踏み込める要因にもなります。, 実はオートコンプリート機能がエクスプレッションに搭載されたのは最近で、以前はすべて自分で打ち込む必要があったためエラーを頻出したり言語を丸暗記する必要があったりと、エクスプレッション自体が初心者さんにとってハードルの高い機能でした。, 通常のアニメーションでは、タイムラインパネル内のレイヤーもしくはエフェクトコントロールパネルで、各プロパティのストップウォッチアイコンをオンにしてキーフレームを設定しますが、エクスプレッションを使用する場合は「Alt / Opt」キーを押しながら、ストップウォッチアイコンをクリックします。, エクスプレッションを適用するとエフェクトのプロパティ値は赤色になりますので、通常のアニメーションが適用されたプロパティと一目で識別することができます。またエクスプレッションモードから通常モードに戻したい場合は、もう一度「Alt / Opt」キーを押しながらストップウォッチをクリックします。, タイムラインパネルで、レイヤーに適用したエフェクトのみを表示したい場合は「E」キーを1回、エクスプレッションのみを表示したい場合は「E」キーを2回押します。, After Effectsの厳選ショートカットキーの一覧は、こちらの記事でご確認いただけます。ショートカットキーは、なるべく早い段階で身につけた方がお得ですのでぜひ！. Math.sinはサイン波の周期でパラメータをループさせるエクスプレッションです。規則性のある動きで簡単に周回運動をさせることができます。, x位置のパラメータにエクスプレッションを入れています。次元を分割しておきましょう（こういうのがわかりにくい原因だろうね。。。）サイン波ってこんなやつです。, Math.sin(time)のままでは-1~1しか移動しません。なので動くピクセルを増やすには(time)に数字をかけます。例えば100ピクセル左右に周回する場合。, このような感じです。前述の周期を早めて幅も調整した場合はこうなります。これは2秒で真ん中から左右500ピクセル移動する記述。, 動き始める原点は[0,0]からになってしまうので最後の[x,y]に数値を足しておきましょう。1920×1080のコンポの中心で左右に500ピクセル2秒の周期で動く場合はこんな感じ, Slider = effect(“スライダー制御”)(“スライダー”);n = Math.sin(time2Math.PI + Slider)*100 + value;n, Math.cosはsinと動きは同じですが周期の頂点から始まります。記述ルールとしてはMath.sinと変わりません。, Math.sin/cosは個人的にはとてもよく使う構文なのでオススメです。エクスプレションで快適なAE生活を^^, [After Effects]comp名を工夫して書き出し時に自動的にフォルダを作る(Mac), [After Effects]コンポジション内の一部のプロパティにすぐアクセスするには？, [After Effects]レイヤーの延長上に別レイヤーを整列する時に便利な方法, [After Effects]指定したプロパティグループ以外を一発で閉じるショートカット, Math.sin = Mathは数学のマスです。これだけで使うことはなくその次に記述するものと基本的にペアで扱われます。今回のsinは数値の-1~1を行ったり来たりするようになっています。. 先のエクスプレッションを見てみますと、x=Math.sin(time); とあります。 "x"という入れ物 に Math.sin(time) という文で生成した数値を入れると言う意味です。 ここで一点注意したいのが現段階では"x"はただの入れ物で、AfterEffectsは位置情報として 認識しません。 次の行 y=0; も同じです。 [Math.sin(time),0] 画像では、2.5秒の時に0.5964・・・という数値を生成し、その数値を の3行は下のように置き換えることも出来ます。 （もちろん周期を気持ちよく時間と合わせる事も可能ですが追々で） ↓以前にこういったツイートをしました。 After Effectsで良く使うエクスプレッション ループ【loopOut(Type="cycle")】キーフレームを繰り返します 点滅【100*Math.sin(time*5);】透明度に適用すると点滅します 時間に合わせて動かす【time*10】角度や回転に適用すると一定速度で回せますこの3つを … 認識してくれます。 フィールドに次のように入力します。 時間の経過と共に 0 → 1.0 → -1.0 → 0（ここで1周期）となだらかに変化しています。 "約"ってのが気持ち悪いですがそう言うものだと力業で覚えてしまって良いと思います。 オブジェクトのx座標(ピクセル)として扱っています。 Math.sinはサイン波の周期でパラメータをループさせるエクスプレッションです。 規則性のある動きで簡単に周回運動をさせることができます。 x位置のパラメータにエクスプレッションを入れています。 After Effectsのエクスプレッションについて基本構造から丁寧に解説します。これまで初心者さんがなかなか踏み出せなかったエクスプレッションですが、オートコンプリート機能が搭載されてぐっとハードルが下がったので、これを機に習得を目指しましょう！ (adsbygoogle = window.adsbygoogle || []).push({}); ではさっそくエクスプレッションの紹介を・・・と行きたいところですが、基本的な構造や仕組みが分かっていないと本質的な理解にはつながらないと思いますので、まずはエクスプレッションのプログミングとしての基礎概念を学習しましょう！, プロのプログラマーやSEでなくとも、ウェブサイトを運営したり自分でカスタマイズした経験がある方はCSSやJavaScriptにも多少馴染みがあるかと思いますが、プログラミングとはコンピュータ（システム）への指令のことで、指令に対してプログムが間違っていればシステムは正しく機能しません。, 例えばオブジェクトの位置は、通常「位置」プロパティのX軸とY軸で指定します。これは地球上でいう座標の緯度と経度のようなもので、ある地点を的確に表すには必ず2つの数値が必要です。対して、「不透明度」プロパティの指定に必要になる数値は1つで十分です。これはつまり「不透明度」は1次元、「位置」は2次元ということです。, この理屈で「トランスフォーム」の各プロパティの次元を区別すると「回転」と「不透明度」が1次元になりますが、「アンカーポイント」と「位置」そして「サイズ」同様に「回転」も空間的な性質であるため2次元とも言えます。さらにAfter Effectsでは3Dレイヤーを作成できますので、この場合「不透明度」以外のプロパティは3次元にもなります。, 完全な1次元であるプロパティには「不透明度」以外にも「輝度」や「コントラスト」、また「露光量」といった空間的要素がないエフェクトのプロパティなどがあります。, 「引数」という聞き慣れない言葉も「パラメータ」と言い換えると、何となくニュアンスを掴めるのではないかと思います。先ほどの例でいうと「位置」に対するX軸とY軸の数値が引数です。単に「位置」の引数をエクスプレッションで表すこともできますが、特段意味がありませんので、ひとまず後述の「wiggle（揺らぎ）」を例に説明します。, wiggleの引数は、上記カッコ内の5種類です。ただし後半3つの引数は初期値が定められているので、よっぽどの場合以外は省略します。つまり「wiggle(freq,amp)」が基本となりますので、例えば「wiggle(10,50)」というエクスプレッションを「位置」プロパティに適用すると、オブジェクトを「1秒間に10回、50pxの振幅で揺らす」という指令になります。, いよいよ実用的なエクスプレッションのご紹介です。プログラミング経験がないと最初は手こずる点が多いかと思いますが、使いながら感覚を掴んでいく学習法が一番早いと思いますので、どんどんチャレンジして使えるエクスプレッションを増やしていきましょう！, 前の見出しで少し触れましたが、wiggle（ウィグル）は適用したプロパティに揺らぎを加えるエクスプレッションです。揺らぎという効果は空間的な要素に対する指令ですので、「不透明度」など1次元のプロパティには適用できません。, 「不透明度」で点滅を表現したい場合は、後述のrandomまたはMath.sinを使用します。, time（タイム）は、コンポジションの時間に合わせて引数の値で変化させるエクスプレッションです。基本的にどのようなプロパティにも適用することができ、他のエクスプレッションと積み合わせて使用することも多く、とにかくよく使います。, またtimeでは、上記のような「+（加算）」「-減算」「*（乗算）」「/（除算）」といった演算子を使って、アニメーションを調節する必要があります。, random（ランダム）は、引数の範囲でランダムに値を変化させるエクスプレッションです。randomの引数は、例えば「100」で0～100、「50,100」で50～100を表し、基本的に次のような1次元のプロパティに適用します。, 「スケール」は縦横比を固定している場合は1次元、縦横比の固定を解除している場合は、X軸とY軸を個別に指定する必要があるため2次元にもなります。そして2次元の場合は、下記3行目のような記述でエクスプレッションを適用します。, このように2次元の「スケール」及び「位置」にもrandomを適用することができますが、wiggleを使用した方が同じようなアニメーションを簡単に作成でき、自然な動きになりますので、特にrandomを使う理由がなければ、wiggleを使うとスマートです。, 実際に使ってみると納得できると思いますが、randomとwiggleで表現できるアニメーションは分類として同じです。最初はこの2つをきっちり区別するのは難しいと思いますので、「2次元のプロパティにはwiggle」「1次元のプロパティにはrandom」というシンプルな解釈でオッケーです！, 慣れてきたら、少しずつエクスプレッションの難易度を上げていきましょう。最後にご紹介するのは、アニメーションをループさせる便利なエクスプレッションです。基本構造を理解できればすんなり習得できると思いますので、余裕のある方は覚えておくとお得です。, loopOut（ループアウト）は、キーフレームを設定したアニメーションを繰り替えすエクスプレッションです。つまり、これまで紹介してきたエクスプレッションとは違って、エクスプレッション単体ではプロパティの値は変化しません。loopOutには以下4タイプがあります。, 「cycle」は基本となるタイプですので、上記のような省略が可能です。実際に「位置」プロパティで作成した単純なアニメーションなどに適用して、動きの違いを見比べると一目瞭然ですが、それぞれの4タイプでループのされ方が異なります。, A地点とB地点にキーフレームを打った場合、cycleでは「ABABAB…」とループし、pingpongでは「ABBAAB…」とループしますが、continueとoffsetではAB間のキーフレームを利用するもののA地点には戻りません。continueではAB間のアニメーションを等速で引き継いで保持し続けますが、offsetではAB間のアニメーションを加算して繰り返します。, loopOutの「O（オー）」は大文字です。小文字にすると記述ミスによるエラーで、エクスプレッションが機能しませんので注意してください。, Math.sin（マスサイン）は、サイン波の周期で引数をループさせるエクスプレッションです。先ほどのloopOutと似ていますが、Math.sinでは規則性のある周回運動を表現できます。, 「Math.sin」は2つに分解すると身近に感じるかもしれません。「Math」は数字という意味の英単語で、「sin」は数学の授業で習ったサイン・コサイン・タンジェントの「サイン」のことです。・・・そうです、ご明察の通り「Math.cos」と「Math.tan」もあります。, このようにtimeで周期を指定しますが、このままの初期値では1周に6秒かかる設定になっています。そのため引数を書き足して、アニメーションを調整する必要があります。つまり単純に1周期を1秒にしたければ、次のようにtimeに6を乗算します。, そして周期の振幅（大きさ）は、Math.sinのコード全体に引数を乗算して調整します。, 以上を念頭に、以下のエクスプレッションを「不透明度」に適用すると、周期的な点滅アニメーションを簡単に作成することができます。, 変化の具合は視覚で確認できた方が分かりやすいと思いますので、レイヤー内のエクスプレッション横にある「エクスプレッション実行後のグラフを表示」アイコンをオンにして、グラフエディタを開きましょう。グラフの表示は「値グラフ」が良いかと思います。, こちらの記事では、グラフエディターのコントロールやグラフの切り替え方法についても紹介いていますので、興味のある方はぜひ読んでみてくださいね。, いかがだったでしょうか？この記事を気に入っていただけたら、コメントやシェアをしていただけるととても励みになります！これからも動画編集が楽しくなるような情報をどんどん発信していきますので、たまにサイトをチェックしてみてくださいませ。では、またべつの記事でお会いしましょう！.