2015.03.22

クールなスライドイン･アニメーション

動画のようなレイアウターとマスクを組み合わせたクールなスライド・インするアニメーションを作り方を解説します。

 

作りかたの概要

マスクで角丸四角形のパスを４つ作り、それをレイアウターで制御します。インフォメーションパレットのエフェクトリストは上位にあるものから処理されていくので、レイアウターをマスクより下位のエフェクトリストに配置してやればマスクパスをレイアウターで制御できるようになります。あと動き(位置)の補間方法をベジエにしてスッと動き出してゆっくり止まるease-out的な動きにします。

下記のリンク先のページはこのページの記載しているテクニックを駆使して作成したスライドショーのテンプレートです。

スライド・イン＆アウト

 

ハウツー動画

動画は前半がマスク設定について、後半がレイアウターの設定についての二部構成になっています。尚、一部レイアウターの設定値がページトップにあるGIFアニメの動きと異なっている部分があります。

尚、サンプル動画の後半部分の動きはネストシーケンスしてフリーズフレームと時間エフェクトの速度を逆再生にして表現してます。詳しくはプロジェクトファイルを見て下さい。

1. [0:00～2:33] 効率のいい角丸四角形のパス作成方法
2. [2:34～6:02] ベジエ曲線を緩やかに止まる動きにする

 

 

設定値

動画ではレイアウターのところを一部を省略してますので設定値はこちらを参考にして下さい。
※ 矩形作成 → [幅：800px 高さ：450px]

	位置Ｘ	位置Ｙ
左上のパス	-400.0	-225.0
右上のパス	400.0	-225.0
左下のパス	-400.0	225.0
右下のパス	400.0	225.0

▼レイアウター設定値

	位置Ｘ	位置Ｙ
左上のパス (動き：←)	100% → 0%	設定なし
右上のパス (動き：↑)	設定なし	100% → 0%
左下のパス (動き：→)	設定なし	-100% → 0%
右下のパス (動き：↓)	-100% → 0%	設定なし

 

プロジェクトファイルのダウンロード

下記のリンクをクリックするとサンプル動画のプロジェクトファイルをダウンロードできます。ファイルの解凍とインポート方法などについては「配布ファイルの利用について」をご覧下さい。

technique_13_slidein_animation.zip (20.7KB)