マスクのアニメーション

アニメーションマスクを使用して、プロフェッショナルな露出効果を作成します。 クリップコンテンツをマスクし、アイテムを時間をかけて表示することができます - タイトルシーケンス、トランジション、および映画効果に最適です.

利用可能なマスクのアニメーション

アニメーション エフェクト 最高ののための
ワイプアップ/ダウン コンテンツは上または下から明らかにします テキストタイトル、引用符
ワイプ左/右 横の明らかに トランジション, 明らかに
アイリス サークルが中心から拡大 ドラマティックが明らかに、フォーカス
アイリスアウト 中心への円の収縮 フェードアウト、トランジション
スターマスク 星の形は内容を明らかにします 遊び心のある明らかに
ハートマスク ハート形状は、コンテンツを表示します バレンタイン、ロマンスの主題
カーテン センターから開く ステージ/ヒーター効果
対角ワイプ 角度の明らかに 動的移行
シネマティック レターボックスバーアニメーション フィルムスタイルのイントロ

マスクテンプレートの使用

マスクアニメーションを使用する最も簡単な方法は、テンプレートを通して行われます

  1. テンプレートパネルを開く(テンプレートタブをクリックするか、Tを押します)
  2. カテゴリ: マスキング
  3. テンプレートをクリックしてプレビューします
  4. クリックテンプレートを使用するそれを適用する

利用可能なマスキングテンプレート

テンプレート コンテンツ
テキストリバイアルアップ 1 つずつスライドするライン
テキスト リードダウン ラインスライドダウン
横のワイプ コンテンツは左から拭きます
アイリス・リバイアル サークルが拡大して明らかに
スターマスク 星の形は明らかにします
ハートマスク ハート形状が明らかに
対角ワイプ 角度移行
シネマティックイントロ フィルム式レターボックス

マスクのアニメーションの仕組み

アニメーションマスクは、時間をかけて変化する形状でコンテンツをクリップすることによって動作します

  1. マスク形状 - クリップ境界(長方形、円、星、ハート)
  2. アニメーションタイプ - マスクの動き(ワイプ、アイリス、スケール)
  3. Timing - 開始時間、期間、およびリース
  4. 方向 - 明らかに起こる方法

タイミング変数

  • 開始時間 - 明らかが始まるとき(秒)
  • Duration - 明らかにどのくらいの時間がかかります
  • Easing - アニメーション曲線(リニア、イージーイン、イージーアウト、イージーアウト)

著名なテキストリバイバル

複数行テキストの場合、カスケード効果の開始時刻をstagger します

ライン 開始時間 エフェクト
ライン 1 0.2s 最初に到着
ライン2 0.35s 第2試合
ライン3 0.5s 第三次投資

これは、プロのモーショングラフィックスで見られる古典的な「ラインバイラインの明らかに」を作成します.

他の効果と組み合わせる

マスクアニメーションがうまく機能:

  • キーフレームアニメーション - アイテムを明らかにしながら移動
  • シンプルなアニメーション - パルスまたはフェードを追加
  • 背景ジェネレータ - アニメーション背景にコンテンツを明らかにする

画像マスキング(静的)

イメージの静的な形のマスキングのため:

  1. インポートされた画像を選択
  2. プロパティパネルで、[Mask]をクリックします
  3. 形状(円形、星、心臓、六角形など)を選択してください
  4. マスクのサイズおよび位置を調節して下さい
  5. 適用マスクをクリック

これは、形状(アニメーションなし)に永久的な作物を作成します.

最高の結果のためのヒント

  1. Keepは短い - 0.4-0.8秒は最もよく動作します
  2. 使いやすさOut - より自然に見えます
  3. 一貫して - ライン間の0.1-0.2s
  4. あなたのコンテンツを一致 - 劇的な、専門家のために拭くために虹彩を使用する
  5. フルスピードでのプレビュー - 試験タイミングは正しい感じます

マスクモード

マスク形状がコンテンツとどのように相互作用するかを制御します

モード エフェクト ユースケース
Clip (デフォルト) 内面形状のみ表示 標準は、フラミングを明らかにします
サブトラクト 内容 どこでも可視 ※マスク内形状を除く カットアウト効果、穴
インターセクト マスクのオーバーラップだけ見えるコンテンツ ベン図効果

マスクモードを変更するには:

  1. マスクされた項目を選択
  2. プロパティパネルで、マスクモードドロップダウン
  3. ClipSubtract、またはIntersectを選択します

マスクの積み重ね

複雑なマスキング効果のための単一の項目に複数のマスクを適用します

  1. 初期マスク(円など)を適用
  2. 2番目のマスクレイヤーを別のモードに追加します
    • Add - マスクの形状を統一する(どちらか)
    • サブトラ - 最初の形状を切り出す
    • Intersect - オーバーラップエリアのみ表示

例:スターカットアウトのサークル

  1. サークルマスク(クリップモード)を適用
  2. starマスクレイヤー(サブトラクトモード)を追加
  3. 結果:中央の星形の穴が付いている円フレーム
Multiple masks stacked
Multipleのマスクは結合しました:星のsubtracted
が付いている円のマスク

必要に応じて多くのマスク層を積み重ねることができます。 他の人に影響を与えることなく個々のレイヤーを削除します.

Vertexアニメーション

2つの状態間の頂点を形づけることによってマスクの形自体を合わせて下さい:

  1. スタートマスクの形状を定義する(vertex positions)
  2. エンドマスク形状を定義する(vertex positions)
  3. マスクは、再生中の形状間の円滑な形状

これは、単純なスケールと位置のアニメーションを超えて行く有機、フローティングマスクの移行を作成します.

Mask modes comparison
クリップ、サブトラクト、インターセクトマスクモードと同じ項目

テクニカルノート

  • マスクは内部でPaper.jsクリップされたグループを使用します
  • スケールベースのマスク(スター、ハート)を中心からスケール
  • 長方形のマスクはワイプ効果のための次元を変えます
  • テンプレートをロードする際にマスクを再構築
  • 完全なプログラム制御のために、applyCustomMask()のためのAPIの文書を見て下さい

関連: アニメーション | キーフレームエディタ | テンプレート