よく検索されているキーワード

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

イトウ先生のTips note 【Photoshop CC 2019】ifelseステートメント

こんにちは、イマジカデジタルスケープの伊藤和博です。

今回は、AfterEffects CC 2019から、ifelseステートメント(ifelse文)をご紹介します。
以前のブログでもご紹介いたしましたが、AfterEffects CC 2019からエクスプレッションエンジンが新しくなり、これまで使用していたエクスプレッションの構文と、新しいエンジン上での構文が少々変更になりました。
新しいエンジンでは、従来の書き方をしても問題なく機能するものや、書き方を変更しないと機能しなくなったものもありますので、ここではJavaScriptでのifelseと、AfterEffects CC 2018以前でのifelse、CC2019以降でのifelseの書き方の違いについてご紹介いたします。

さっそくやってみよう!

まずは、以下のビデオをご確認ください。長方形のシェイプレイヤーとテキストレイヤーがそれぞれ1つづつあります。(約5秒。音は鳴りません)

シェイプレイヤーの塗りのカラーが、0~1秒目までは白、1~2秒目までは赤、2~3秒目までは緑、3~4秒目までは青、4~最後までは黒、というように、単に1秒ごとにカラーが入れ替わるエクスプレッションです。テキストレイヤーのソーステキストにtimeを、長方形のシェイプレイヤーの【塗り】には、以下のエクスプレッションを適用しています。

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

ifelseステートメントは、【範囲指定】の分岐に使用するといいステートメントで、trueとfalseの2択の場合は三項演算子、特定の【値】に限定している場合はswitchを使用すると便利ですが、AfterEffectsの場合で、特にコンポジションのデュレーションを元にアニメーションさせる場合、【時間の範囲を元に値を切り替える】ことでアニメーションを作るのが容易になるため、例えば、テキストレイヤーに適用すれば、カウントダウンアニメーションや、時間とともに文字列を順次変更していく、というアニメーションなどはifelseで容易に作成することが可能になります。

今回のエクスプレッションでは、1行目にまずは配列変数【nuri】を作成します。
この【nuri】という名前は、aでもbでもxでもyでも、特に何でもかまいません。また、カラーへのエクスプレッションは、RGB値とアルファを指定する必要があるため、4次元配列にする必要がありますが、配列変数【nuri】は・・

のいずれで書いても問題ありません。

次に、ifelseステートメントは、

が基本形で、条件がtrueなら結果1を実行、条件がfalseなら結果2を実行、になります。今回は・・

のように、elseの中にifelseをネストしており、条件分岐の範囲を追加しています。
また、条件の中で使用している【&&】は論理演算子となり、&&の両側が両方ともtrueならtrueを返す、という意味になるため、全文を意訳すると・・

変数【nuri】を作成。
もし、timeが0以上でかつ1未満の場合は、nuriに[1,1,1,1]を代入。
じゃなければ、もし、timeが1より上でかつ2未満の場合は、nuriに[1,0,0,1]を代入。
じゃなければ、もし、timeが2より上でかつ3未満の場合は、nuriに[0,1,0,1]を代入。
じゃなければ、もし、timeが3より上でかつ4未満の場合は、nuriに[0,0,1,1]を代入。
じゃなければ、もし、timeが4より上の場合は、nuriに[0,0,0,1]を代入。

になります。

timeとは、ご存知の通りコンポジションのデュレーションになるため、結果、1秒ごとにシェイプの塗りが指定したカラーに変化する、というエクスプレッションになります。
なお、RGB値とアルファの数値は、各桁0~1の範囲で指定します。例えばPhotoshopのカラーピッカーでの8bitカラーのレッドや、CSS3でのcolorプロパティでレッドを表示する場合は【255,0,0】になりますが、AfterEffects上で特にカラー変換用のメソッドを使用しない場合、これを【1,0,0】と書きます。4桁目はアルファで、1が不透明度100%と同じ、0で不透明度0%、0.5または.5と書くと、不透明度50%になります。

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

これを、条件を少なくし、短く書いたものを使用して、書き方のポイントをご説明します。

変数【nuri】を作成。
もし、timeが0以上でかつ3未満の場合は、nuriに[1,0,0,1]を代入。
じゃなければ、もし、timeが3より上の場合は、nuriに[0,0,1,1]を代入。

elseを含まないifステートメントは許可されない。

AfterEffectsでは、elseを伴わないifステートメントは、プレビュー時に評価に失敗しエラーになります。これはCC2019に限ったことではありませんが、AfterEffectsのバージョンによってエラー表示が異なります。
CC2019では、【「未定義の値がエクスプレッションで使用されています (配列の添え字が範囲外である可能性があります)」】が表示され、CC2018では、【Layerタイプのオブジェクトが、Number、配列、またはPropertyが必要な・・】と表示されます。いずれも【elseを伴わないifステートメントは評価しない】というエラーメッセージは表示されないため、エラーの原因として【何か、配列オブジェクトの作り方が間違ったのかな?】など、考えることもあるかと思いますが、ifには必ずelseを伴う必要があります。

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

ショートハンド(省略書き)では一部記述できない。

JavaScriptでのifelseは、改行および括弧と共に記述するのが基本となりますが、改行せずに1行で書くことも可能で、かつ、{}(ブレース)を省略して書くことが可能です。

上記はいずれもJavaScriptでは機能します。ただし、AfterEffects CC 2019では1行書きした際、{}(ブレース)を省略して書くことはできなくなりました(改行で書いた際はCC2019でも省略可)。CC2018までは、1行書き時の{}(ブレース)は省略可能でした。

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

MDN web docs

JavaScriptはもともとNetscape communicationsの開発で、現在そのマインドはFIrefoxに受け継がれているわけですが、ifelseステートメントの正しい書き方に関しては、以下、MozillaのMDN web docsに記載がありますので、一度確認してみるといいでしょう。

MDN web docs・if…else

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else

イトウ先生のTips note 【AfterEffects CC 2019】ifelseステートメント

今回のアニメーションは、単純にキーフレームを打てばできるものになりますが、エクスプレッションで行うことによって、配列に代入する次元と値を変えるだけで、様々なトランスフォームやプロパティに対し、エクスプレッションのコピーペーストだけで代用できること、エクスプレッションのためソースを保存して再利用できること、など、メリットが多いといえますので、ぜひ使ってみてください。

関連講座

◆AfterEffects CC 2018の使い方・基本トレーニング

◆AfterEffects CC 2014の使い方・実践トレーニング

◆JavaScriptの基礎知識

「編集部おすすめ」の記事

PAGETOP