エクスプレッションを作成しているなかで、基本的なところからまとめてみようと思います。
エクスプレッションでできること
工夫次第でいろいろと広がるので、まとめることが難しそうですが少なくともできることをまとめてみます。エクスプレッションはアニメーションをプログラマブルに(プログラムを書いてそれに沿って)制御させることができます。手作業で一つ一つ作業するのに比べて修正が楽になったりするメリットがあります。
- 時間/フレームごとにレイヤーの変換(移動や回転、スケール)をプログラマブルに制御できる
- レイヤーの位置情報などを使用して、それに合わせてアニメーションを作成できる
- シェイプのパス情報に変更を加えることができる
- JSON形式のファイルを読み込み、アニメーションに反映することができる
- JavaScriptの標準の関数を使って書ける
- ...
エクスプレッションのHello, World
まずは一番単純なのではないかというエクスプレッションを作成してみようと思います。テキストでHello, Worldと表示するエクスプレッションです。
1. テキストレイヤーを作成
今回はテキストの中身を変更するエクスプレッションになるためテキストレイヤーを作成します。
2. ソーステキストにエクスプレッションを設定
テキストの中身(ソーステキスト)を変更するので、ソーステキストを選択した状態で、メニューの アニメーション から エクスプレッションを追加 を選択します。
3. エキスプレッションを入力
ソーステキストの下に エクスプレッション: ソーステキスト が追加されているので、ここの右側の text.sourceText の箇所をクリックします。すると、入力できる状態になるので次のように入力します。
"Hello, World";
うまく動くと次のようになります。
計算をしてみる
単純な計算にはなりますが、エクスプレッションで計算をしてみます。先ほどのHello, Worldのエクスプレッションところに次のようなエクスプレッションを入力します("Hello, World"; は削除します)。
var x = 2 * 10; x;
プレビューのところのテキストに20と表示されたのではないかと思います。このエクスプレッションでは2つの大きな新しい要素があります。それは、変数 と変数へ計算結果を入れる と結果の渡し方 です。
変数は、何かの計算結果や処理結果を入れておく時によく利用します。xというのが変数になるのですが、これをあらかじめエクスプレッションを解釈して処理する仕組みにxという名前で利用するよ、ということを伝える必要があります。それが、var xの部分です。(varは変数(variable)からきているのだと思います。)また、これが変数の定義になります。x以外にももっとわかりやすい名前を付けるのが一般的です。例えば位置であればvar positionのような名前にしたりするとわかりやすいと思います。
定義した変数に対して値かなにかを入れておく場合は、= を使います。 =````の右側で記述している内容(この場合は2 * 10` )を左側の変数x```に代入することができます。
最後に結果の渡し方になります。エクスプレッションでは、一番最後の行(空白以外)で書かれている変数や計算内容を最終的な結果として扱うようにできているようですので、最後にx;としてこれを最終的な結果とするようにしています。
また、各行の;は一つの処理の終わりに対してつけています。実は、なくても上の例では動くのですが、次のように複数の処理を1行で書きたいときには;をつけておく必要があります(行っている処理に意味はありませんが... )。
var x = 2 * 10; var y = 3 * 2; y;
次回
次回は、変数の種類についてとエクスプレッションを使ってテキストを動かすというものを書いてみようと思います。
