レイヤーの不透明度に、フェードイン・フェードアウトを自動化するエクスプレッションを作っていきます。

レイヤーのインポイントからのフェードインと、アウトポイントまでのフェードアウトがキーフレームなしで動作しますので、レイヤーの長さ変更時にキーフレームをズラす手間がなくなります。

スライダーエフェクトのfIn、fOutに秒数を指定してコントロールします。(※フレーム数ではないことに注意)

※仕様としてフェードイン中でもフェードアウトが優先して始まります。

• キーフレームを打っても合わせて動作します。
• 不透明度が”0″<->”セットしている値”でフェードします。
• 不透明度50なら0->50にフェードイン、50->0にフェードアウトします。

コントローラーの準備

レイヤーにエフェクト「スライダー制御」を2つ準備します。

それぞれフェードイン用の秒数を指定する「fIn」、フェードアウト用の秒数を指定する「fOut」とでも名前を変更しておきます。

エクスプレッション

レイヤーのプロパティ「不透明度」に、下記のエクスプレッションを適用すれば完成です。

fIn = effect("fIn")(1);
fOut = effect("fOut")(1);

if(time >= outPoint-fOut ){ //フェードアウト時間内であれば
  ease(time,outPoint-fOut ,outPoint,opacity,0); //フェードアウト秒前からアウトポイントへ不透明度値→0にする
}else{ //フェードアウト時間内でなければ
  if(fIn==0){
      opacity;
  }else{ //フェードイン秒数が0以外なら
      ease(time,inPoint,inPoint+fIn,0,opacity); //インポイントからフェードイン秒で0→不透明度値にする
  }
}

今回覚えるエクスプレッション

今回新しく学べるエクスプレッションは

ease(time,outPoint-fOut ,outPoint,opacity,0);

この部分です。

キーフレームを設定せず、プロパティをキーフレーム2つ分のアニメーションが設定できます。リニアな動きとイーズのかかった動きを設定できます。

linear(time, 時間1, 時間2, value1, value2);// リニア
ease(time, 時間1, 時間2, value1, value2);// イーズ
easeIn(time, 時間1, 時間2, value1, value2);// イーズイン
easeOut(time, 時間1, 時間2, value1, value2);// イーズアウト

と4種類あり、時間1から時間2にかけて、value1からvalue2へ値を変化させます。これでキーフレームの代わりに、キーフレーム2つ分のアニメーションが表現できるのです。

ドラッグしなければ変更できないキーフレームのタイミングを、計算式で指定できるということは、大きなメリットですね。

解説

ということで、今回のエクスプレッションを解説すると

fIn = effect("fIn")(1);
fOut = effect("fOut")(1);

if(time >= outPoint-fOut ){ //フェードアウト時間内であれば
  ease(time,outPoint-fOut ,outPoint,opacity,0); //フェードアウト秒前からアウトポイントへ不透明度値→0にする
}else{ //フェードアウト時間内でなければ
  if(fIn==0){
      opacity;
  }else{ //フェードイン秒数が0以外なら
      ease(time,inPoint,inPoint+fIn,0,opacity); //インポイントからフェードイン秒で0→不透明度値にする
  }
}

10行目…レイヤーのインポイント→フェードイン秒数にかけて、値を0→本来の不透明度へフェードイン

5行目…レイヤーのアウトポイントよりアウトポイント秒数前→アウトポイントにかけて、値を本来の値→0にフェードアウト

という処理を行います。

fInの秒数を0に設定してしまうと、10行目で「レイヤーのインポイント→インポイントから0秒後にかけて」となり不透明度がずっと0→フェードアウト開始で急に不透明度が跳ね上がることになるので、7,8行目にて「fIn」が0の場合は本来の値を設定して回避しています。

効率化できました

これでフェードを含むレイヤーが増える度に、多数のレイヤーへ打ち込む、またはコピペする時間が短縮でき、クリエイティブに割く時間を増やせるのです。

関連エクスプレッションの「オーディオのフェードイン・アウトをエクスプレッションで自動化する」にて、「if文の短縮方法」にも触れているので、一度目を通して頂けると幸いです。

また、今回のエクスプレッションをスクリプト化した記事を「フェードイン・アウトを自動化するスクリプト「[auto]fIn_fOut.jsx」」として公開しています。是非スクリプトにも挑戦してみてください。