第2回目は、変数の種類とテキストをアニメーションさせるということを行ってみます。
変数の種類
- 数値(Number)
- 文字列(String)
- 配列(Array)
- オブジェクト(Object)
数値
数値を表す型です。数値を代入することで数値の変数として利用できます。
var n1 = 5; var n2 = 3.14;
文字列
テキストのような文字列を扱います。文字列をあらわすときにはダブルクオート(")かシングルクオート(')で囲みます。
var t1 = "hello"; var t2 = 'world";
配列
配列は、複数の数値や文字列を一つのまとまりとして扱うことができます。After Effectsでは2次元や3次元の座標をあらわすときによく使われます。 カッコ([と]}で囲み、それぞれの数値をカンマ(,)で区切ります。
var p = [5, 10];
2つ以上の数値も扱うことができますので、次の例では8つの数値を一つの配列の変数に入れています。
var a = [12, 2, 8, 3, 9, 21, 30, 5];
配列は、複数の値を1セットで扱うことができますが、それぞれの値にアクセスするには次のようにします。
配列の変数名の後に[2]のようにすると値を個別の値を取り出すことができます。
var a = [12, 2, 8, 3, 9, 21, 30, 5]; var x1 = a[0]; var x2 = a[3];
変数のx1には12、x2には3が代入されます。
オブジェクト
実は、ものすごく高い頻度で利用されるのがオブジェクトというものです。これは、配列のように複数の値を扱うことができますが、それぞれにラベルをつけたりすることもできます。表のようなデータを扱いたいというときにもよく利用されます。
名前と年齢を扱うときには次のようにします。
var row = { "name": "hello", "age": 25 };
nameとageの値をそれぞれ取り出したいときには変数名 + ドット(.) + nameのようにします。
var name = row.name; var age = row.age;
nameにはhello, ageには25が入ります。
実際に表のようなデータを表すには次のようにします。
var table = [ { "name": "name1", "age": 25 }, { "name": "name2", "age": 30 }, { "name": "name3", "age": 21 } ];
表の2行目のnameを取り出すには次のようにします。
var name = table[1].name;
アニメーション
After Effectsでアニメーションを行うときには2つの座標(x, y)を返すエクスプレッションを記述します。ここで、配列が使われることになります。
右下に移動するアニメーション
はじめにレイヤーを一つ作成します(テキストなど)。このレイヤーのトランスフォームの左の>をクリックすると位置があります。この位置にエクスプレッションを追加します。
エクスプレッションは次のようなものになります。
var x = 100 + time * 20; var y = 100 + time * 30; [x, y];
変数のx, yにそれぞれ座標を計算して、最後に配列として返しています([x, y];の箇所)。ここで新しくtimeという変数が使われています。このtimeという変数はエクスプレッションを使用するときにはあらかじめ定義されている変数になります。timeを利用すると動画の時間(秒)を取得することができます。
After Effectsにはtimeのようなあらかじめ定義された変数がいくつかあり、これらをうまく利用して目的のエクスプレッションを書いていくことになります。
