遮罩動畫

使用動畫口罩建立專業曝光效果 。 以及電影效果.

可用的遮罩動畫

動畫 效果 最好的
上下擦拭 內容從上下顯示 文字标题、引文
擦除左/右 水平顯示 轉移, 揭示
伊里斯 圓從中心展開 戲劇性揭露,焦點
Iris 出局 圓形縮放到中心 淡出、轉變
星罩 星形顯示內容 播放
心罩 心形顯示內容 情人節,浪漫主題
窗帘 從中心開啟 舞台/舞台效果
對角擦拭 憤怒的揭露 动态轉換
電影 字母盒列動畫 影片樣式演講

使用遮罩樣本

使用面具動畫最簡單的方法是通过樣本:

  1. 開啟 模版面板( 點擊樣本分頁或按 #% 0Q)
  2. 類型:面具
  3. 點擊樣本預覽它
  4. 點擊 使用樣本 來應用它

可用的遮罩樣本

模板 描述
文字向上 逐一滑行
文字向下 行向下滑
水平擦除 從左面擦除內容
伊里斯啟示 圓圈展開以顯示
星罩 星形顯示
心罩 心形
對角擦拭 激動的轉變
電影演講 影片式信箱

遮罩動畫如何工作

動畫口罩工作

  1. Mask shape - 剪切邊界( 矩形、 圓形、 星星、 心形)
  2. 動畫型態 - 面具如何移動(wipe、iris、scale)
  3. 提明 - 起始時間、期限和放松
  4. 指示 - 透露的方式

時序參數

  • 開始時間 - 當啟示開始( 秒)
  • 期限** - 披露需要多久
  • Easing - 動畫曲線( 線性, leasedIn, leasedOut, leasedInout)

交错的文字啟示

對多行文字, 將起始時間交錯於串連效果 :

開始時間 效果
第1行 0.2s 先揭幕
第 2 行 0.35s 第二
第3行 0.5s 第三段

這創造了經典的「逐行揭露」.

结合其他效果

面具動畫效果良好:

  • Keyframe 動畫 - 在顯示項目時移動
  • 簡單的動畫 - 顯示後加入脈搏或淡出
  • 背景生成器 - 在動畫背景上揭示內容

影像遮罩 (static)

影像上的靜态外形遮罩 :

  1. 選擇匯入的影像
  2. 在屬性面板中, 點選 Mask
  3. 選擇一個形狀( 圓形、 恒星、 心形、 六角形等 )
  4. 調整面具大小和位置
  5. 點擊 pply 遮罩

這會為外形產生永久的作物( 未動畫 ) .

最佳效果提示

    • 0.4-0.8秒
  1. 感覺更自然的揭露
  2. 相距一致 - 0.1-0.2s
  3. 使用虹膜來演戲
  4. 全速审查 - 測試時間感覺對

遮罩模式

控制遮罩外形如何與您的內容相互作用 :

模式 效果 使用大小寫
剪切 (默认) 內容只可见於遮罩形狀 標準顯示, 框架
減法 * 除了* 面罩外, 到處都能看到內容 切斷效果, 洞
交叉 內容只可见於遮罩重叠的地方 Venn 圖形效果

更改遮罩模式 :

  1. 選擇遮罩項目
  2. 在屬性面板中找到遮罩模式下拉
  3. 選擇 剪切切換intersect

遮罩堆疊

套用多個口罩到單項上, 以取得複雜的遮罩效果 :

  1. 套用初始面罩( 例如 圓形 )
  2. 以不同模式添加第二面罩層 :
    • Add - 兩面罩形( 兩面都可见)
    • 切換 - 切除第一個字的第二個字形
    • intersect - 只有重叠區域可以看見

示例: 圓形與剪星

  1. 套用 遮罩( 剪切模式)
  2. 新增star 遮罩層( 減法模式)
  3. 結果: 中央有星形洞的圓形框架

0Q 0Q ++0Q 多面罩 : 一個圓面罩, 星星减去++1Q 0Q

你可以按需要堆放多少面罩層. 移除各層而不影響其他層.

Vortex 動畫

使面具的外形動起來

  1. 定義開始的遮罩元件( 頂點位置)
  2. 定義末端遮罩形状( 頂點位置 )
  3. 回放時, 面罩的形狀會平滑

這會產生有机的,流動的面具轉換,超越簡單的尺度和位置動畫.

0Q 0Q 0 QLip 、 減法和 Intersect 遮罩模式的同樣項目% 1Q 0Q

  • 遮罩在內部使用 Paper.js 剪切群組
  • 平面罩( 星、 心) 尺度
  • 擦拭效果的矩形面具變更尺寸
  • 裝入樣本時重建遮罩
  • 完整的程序控制,請參考QQ的 API 文件

相關: [動畫] (/features/animations) | [关键框架編輯器] (/features/keyframes) | [em2Q]