実例１:回転とスライドのリンク

ボリュームを回転すると自動的にスライド・ノブが移動するアニメーションを考えます。

 

• 

  まず値の変化幅をチェックします。
• ボリュームの回転は　-150 から +150。ノブ の移動幅はY座標の下が200、上が40でした。
• この関係をグラフにしてみます。
• 
  

グラフの傾き　は

• (200-40) / (-150-150) = -(160 / 300)
• グラフとY軸の交点PのY座標は三角形の相似から
• 160:300=P-40:150
• P=160*150/300+40
• P=120

• よって 式 y=ax+b は

y = - (160 / 300) ＊ rotation　+　120

 

• 式の右辺をposition Yのエクスプレッションフィールドに書き込みましょう。
• しかし positionのフィールドは１つ　しかありません。これではｘ軸とｙ軸を区別出来ないのではないでしょうか。 どうなっているのでしょう？

---

ワンセットで意味のある値

• AfterFxのプロパティには位置やスケールのようにXとY２つの値があって初めて意味をなすものがあります。それを扱うときはカッコで括って１つのものとします。位置は次のように表記します。

　[ x , y ]

 

• さらにｘ軸をposition[0]　Y軸をposition[1]で表します。この書き方について詳しくは次章次元で説明しますのでとりあえず下の式を書いてください。

rotation= thisComp.layer("Volume").rotation ;
y = - (160 / 300) * rotation　+　120 ;
[ position[0] , y]

 

• 今回は式が3行になっています。最後に行の区切り「　；　」を忘れずに書いてください。
• ノブを回してみてください。

• 図のようにぴったりとシンクロします。回し過ぎると目盛をオーバーしてしまいますがノブの回転との関係は維持されます。

実例２：回転体と移動距離のリンク

ローリングリング

 
回転と移動距離をリンクさせてリングをスリップしないように回すエクスプレッションです。

リングが1回転で移動する距離は円周の長さと同じですから、求めている値は回転と円周の比率になります。

 

まず値をチェックします。

円周を求めるためにリングの直径を計ると50pixでした。
円周＝直径*円周率ですから

50＊Math.PI　

円周率をJavaScriptでは　Math.PI　と表します。

回転と移動の比例定数は
1回転　：　円周　=　 360 ： 50*Math.PI 
これを一次関数の式に当てはめると

y=360/(50*Math.PI)*position[0]

この式の右辺を回転のプロパティに入力します。
リングをx軸方向に移動させてください。リングが自動的に回転しますね！