Animasi Mask

6 min read

Buat profesional mengungkapkan efek menggunakan topeng animasi. Isi klip masker dan dapat menghidupkan untuk mengungkapkan item dari waktu ke waktu - sempurna untuk urutan judul, transisi, dan efek sinematik.

Animasi Topeng Tersedia

Animasi Efek Terbaik Untuk
Hapus Naik / Turun Isi mengungkapkan dari atas atau bawah Judul teks, kutipan
Hapus Kiri / Kanan Horisontal mengungkapkan Transisi, mengungkapkan
Iris Lingkaran mengembang dari tengah Dramatis mengungkapkan, fokus
Iris Out Lingkaran menyusut ke pusat Fade out, transisi
Mask Bintang Bentuk bintang mengungkapkan isi Pengungkapan yang menyenangkan
Topeng Jantung Bentuk jantung mengungkapkan isi Valentine, romantis tema
Tirai Buka dari tengah Efek panggung / teater
Diagonal wipe Sudut mengungkapkan Transisi dinamis
Sinematik Batang-batang kotak-surat hidup Intros bergaya film

Menggunakan Templat Topeng

Cara termudah untuk menggunakan animasi topeng adalah melalui templat:

  1. Buka * * Templates Panel * * (klik Templat tab atau tekan td 0)
  2. Filter by * * Kategori: Mesking * *
  3. Klik suatu templat untuk di-preview
  4. Klik * * Gunakan Template * * untuk menerapkannya

Templat MAsking Tersedia

Templat Deskripsi
Teks Mengungkapkan Naik Baris geser ke atas satu per satu
Teks Mengungkapkan Bawah Baris slide ke bawah
Hapus Horisontal Isi tisu dari kiri
Iris Reveal Lingkaran mengembang untuk mengungkapkan
Mask Bintang Bentuk bintang mengungkapkan
Topeng Jantung Bentuk jantung mengungkapkan
Diagonal wipe Transisi angle
Intro Sinematik Kotak surat bergaya film

Cara kerja Animasi Topeng

Masker animasi bekerja dengan mengklik konten dengan bentuk yang berubah dari waktu ke waktu:

      • Shape Mask * * - Batas klip (persegi panjang, lingkaran, bintang, jantung)
      • Animation Type * * How the mask moves (wipe, iris, scale)
      • Timing * * - Awal waktu, durasi, dan mengurangi
      • Arah * * - Cara mengungkapkan terjadi

Parameter Waktu

        • Awal Waktu * * - Ketika mengungkapkan dimulai (dalam detik)
      • Durasi * * - Berapa lama mengungkapkan mengambil
      • Easing * * - Kurva animasi (linear, easeIn, easeOut, easeInOut)

Teks Terstaggered Reveals

Untuk teks multi- baris, stager waktu awal untuk efek cascading:

Baris Waktu Awal Efek
Baris 1 0.2s Mengungkapkan pertama
Baris 2 0.35s Mengungkapkan kedua
Baris 3 0.5s Mengungkapkan ketiga

Hal ini menciptakan “line- by- line klasik mengungkapkan” terlihat dalam grafis gerak profesional.

Menggabungkan dengan Efek Lainnya

Animasi topeng bekerja dengan baik dengan:

      • animations keyframe * * - Pindahkan item ketika mereka mengungkapkan
      • animations sederhana * * - Tambahkan pulsa atau memudar setelah mengungkapkan
      • Generator latar belakang * * - Mengungkapkan konten atas latar belakang animasi

Gambar MAsking (Statik)

Untuk bentuk statis masking pada gambar:

  1. Pilih gambar yang diimpor
  2. Dalam Panel Properti, klik * * Mask * *
  3. Pilih bentuk (lingkaran, bintang, jantung, heksagon, dll)
  4. Atur ukuran topeng dan posisi
  5. Klik * * Terapkan Mask * *

Hal ini menciptakan tanaman permanen dalam bentuk (tidak animasi).

Tips untuk Hasil Terbaik

      • Jauhkan mengungkapkan pendek * * - 0.4-0.8 detik bekerja terbaik
      • Gunakan easeOut * * - Terasa lebih alami untuk mengungkapkan
      • Stagger konsisten * * - 0.1-0.2s diantara baris
      • Match your content * * - Gunakan iris untuk dramatis, hapus untuk profesional
      • Pratilik pada kecepatan penuh * * - Waktu tes terasa benar

Mode Topeng

Kendalikan bagaimana bentuk topeng berinteraksi dengan isi Anda:

Mode Efek Gunakan Kasus
* * Klip * * (baku) Konten hanya terlihat dalam bentuk mask Standar mengungkapkan, framing
Kurangi Konten terlihat di mana-mana * kecuali * dalam bentuk mask Efek pemotongan, lubang
Intersect Konten hanya terlihat dimana mask tumpang tindih Efek diagram Venn

Untuk mengubah mode mask:

  1. Pilih objek bertopeng
  2. Di panel Properti, temukan mode mask dropdown
  3. Pilih * * Klip * *, * * Kurang * *, atau * * Intersect * *

Stacking Mask

Terapkan multiple mask ke satu item untuk efek masking kompleks:

  1. Terapkan topeng awal (misalnya, lingkaran)
  2. Tambah lapis mask kedua dengan mode lain:
        • Tambah * * - Unites kedua bentuk mask (terlihat dalam baik)
        • Kurang * * - Potong bentuk kedua dari yang pertama
        • Intersect * * - Hanya daerah tumpang tindih yang terlihat

Contoh: Lingkaran dengan Pemotongan Bintang

  1. Terapkan sebuah * * circle * * mask (clip mode)
  2. Tambahkan sebuah * * bintang * * lapis mask (mode pengurangan)
  3. Hasil: bingkai melingkar dengan lubang berbentuk bintang di tengah
Multiple masks stacked Masker ganda dikombinasikan: masker lingkaran dengan bintang dikurangi 1

Anda dapat menumpuk lapisan topeng sebanyak yang diperlukan. Hapus lapis individu tanpa mempengaruhi yang lain.

Animasi Vertex

Menghidupkan bentuk topeng itu sendiri dengan mengubah vertisinya antara dua negara bagian:

  1. Tentukan bentuk topeng awal (posisi verteks)
  2. Tentukan bentuk topeng akhir (posisi verteks)
  3. Topeng berubah wujud saat diputar

Hal ini menciptakan organik, mengalir transisi topeng yang melampaui skala sederhana dan animasi posisi.

Mask modes comparison Barang yang sama dengan Clip, Kurang, dan Mode mask Intersect

Catatan Teknis

  • Masker memakai grup Paper.js terpotong secara internal
  • Skala masker berbasis (bintang, jantung) skala dari pusat
  • Masker persegi panjang mengubah dimensi untuk menghapus efek
  • Masker dibangun kembali ketika memuat template
  • Untuk kontrol penuh programmatic, lihat dokumentasi API untuk McO
    • Terkait: * * [Animasi] (if0) 124; [Keyframe Editor] (Were 1) 124; [Templates] (ITU 2)