Path Trim

3 min read

Jalur Trim memungkinkan Anda menghidupkan berapa banyak stroke yang terlihat, menciptakan “draw-on” efek di mana garis tampaknya ditarik secara real time. Ini adalah salah satu teknik yang paling populer dalam grafis gerak untuk mengungkapkan teks, ilustrasi, dan diagram.

Path with partial trim visible Path
A dengan tiga set ke 0.5, hanya menampilkan bagian pertama dari stroke

¶ How It Works

Setiap jalur memiliki tiga sifat trim:

Properti Jangkauan Deskripsi
trimStart 0 - 1 Dimana bagian yang terlihat dimulai (0 = path mulai)
trimEnd 0 - 1 Dimana bagian terlihat berakhir (1 = path end)
trimOffset 0 - 1 Memindahkan jendela yang tampak sepanjang tapak

Ketika trimStart = 0 dan trimEnd = 1, path lengkap terlihat (baku). Mengubah nilai-nilai ini mengungkapkan atau menyembunyikan bagian stroke.

Draw-On Efek

Penggunaan yang paling umum: stroke yang muncul untuk menggambar dirinya sendiri.

  1. Membuat tapak atau bentuk dengan stroke yang nampak
  2. Tambah animasi keyframe:
    • Pada waktu 0: trimEnd = 0 (tidak terlihat)
    • Pada waktu 2: trimEnd = 1 (sepenuhnya digambar)
  3. Mainkan timeline untuk melihat path menarik dirinya sendiri

Hal ini bekerja sangat baik dengan:

      • Teks cursive * * dibuat dengan sistem fonta Cursive
      • Ilustrasi tangan yang digambar * * dibuat dengan alat penggambar
      • Konektor Diagram * * Untuk flowcharts animasi

Partial Reveal

Tampilkan hanya sebagian dari path:

  • Set trimStart = 0.2 dan trimEnd = 0.8 untuk menampilkan tengah 60%
  • Animasikan kedua nilai untuk memperluas atau kontrak daerah yang terlihat
  • Bagian tersembunyi sama sekali tidak terlihat (tidak hanya transparan)

Jendela Sliding

Buat segmen yang bergerak sepanjang tapak:

  1. Set ukuran jendela tetap: trimStart = 0, trimEnd = 0.3
  2. Animate trimOffset dari 0 ke 1
  3. Segmen yang terlihat slide sepanjang seluruh panjang path

Ini menciptakan efek seperti:

  • Memuat indikator
  • Memindai / melacak animasi
  • Ras trek atau efek garis kemajuan

Item Kompatible

Jalur Trim bekerja dengan:

Tipe Butir Catatan
Path Garis, kurva, gambar tangan bebas
Path Kompound Undo-type
Grup Layers-action
Kelompok Bertopeng Bekerja dengan item yang memiliki masker diterapkan

Tip: Untuk draw- efek terbaik dengan teks, gunakan sistem * * Cursive Font * *. Ini menciptakan jalur teks tunggal-stroke yang ideal untuk animasi jalur trim.

Menggabungkan dengan Fitur Lain

      • Keyframe Editor * * - Animate properti trim dari waktu ke waktu dengan pengurangan gubahan
      • Relations * * - Gunakan driven_by untuk menghubungkan nilai trim ke properti item lain
      • Ekstensi Waktu * * - Gunakan ekspresi matematika untuk membuat pola trim kompleks

Tips

      • Gunakan easeOut * * untuk draw-on efek - itu memberikan percepatan alami di akhir
      • Keep stroke visible * * - Trim paths only affect stroked paths, not fills
      • Periksa lebar sapuan * * - Getaran tebal terlihat lebih baik untuk penggambaran-pada animasi
      • Stagger multiple paths * * - Gunakan waktu offsets untuk menggambar tapak dalam urutan
      • Pratilik dengan kecepatan penuh * * Animasi Trim bisa merasa berbeda pada kecepatan lambat vs kecepatan normal
    • Terkait: * * [Keyframe Editor] (/features/keyframes) Ai14; [Studio Fonta] (/features/font-studio) 14; [Animations] (/features/animations)