Cara Mengedit Easing Skala Tanpa Mengubah Proporsi Karakter

Skala mengatur ukuran pada setiap sumbu. Jika skala horizontal dan vertikal menggunakan pengali yang sama, rasio aspek karakter tetap terjaga. Jika pengalinya berbeda, bentuknya berubah. Dokumentasi teknis MDN menjelaskan perbedaan ini sebagai penskalaan seragam dan tidak seragam. MDN: fungsi CSS scale()

Easing mengatur bagaimana nilai animasi bergerak di antara keyframe. Misalnya, kedua sumbu dimulai pada 80% dan berakhir pada 100%. Jika skala horizontal mencapai 96% saat skala vertikal masih 88%, karakter untuk sementara menjadi lebih lebar dibandingkan tingginya. Titik awal dan akhir bisa tampak benar, sementara transisinya terlihat meregang.

Untuk karakter yang awalnya tidak terdistorsi, nilai skala X dan Y yang sama sepanjang transisi akan menjaga proporsinya. Secara lebih umum, pertahankan rasio dasar yang telah disetujui: jika aset yang telah disiapkan memang sengaja dimulai dengan nilai skala yang berbeda, kalikan keduanya dengan faktor perubahan yang sama. Jangan otomatis mengganti nilai dasar tersebut dengan angka yang sama.

Simpan salinan kerja dan temukan transformasi yang mengendalikan seluruh karakter. Untuk panduan ini, gunakan satu layer karakter 2D yang tampilannya sudah benar pada ukuran acuannya. Jika karya seni memiliki bagian-bagian terpisah, tetapkan terlebih dahulu satu transformasi bersama untuk perubahan ukuran keseluruhan; jika tidak, mengedit hanya tubuh dapat mengubah ukurannya relatif terhadap wajah atau aksesori.

Di After Effects, pilih layer karakter dan tekan S untuk menampilkan Scale. Aktifkan Constrain Proportions, ikon di samping nilai skala, saat memasukkan perubahan ukuran yang proporsional. Adobe mendokumentasikan kontrol ini secara khusus untuk pengeditan skala yang saling terkait. Adobe: Menyesuaikan properti layer di After Effects

Catat nilai awal dan akhir yang disetujui, serta waktu keyframe sebelum mengubah apa pun. Periksa juga keyframe perantara yang sudah ada. Gunakan kontrol pengaitan sebagai bantuan pengeditan, lalu verifikasi nilai sebenarnya di sepanjang animasi alih-alih berasumsi bahwa mengaktifkannya telah memperbaiki pengeditan sebelumnya.

Tentukan titik asal pembesaran sebelum menyempurnakan timing. After Effects melakukan penskalaan di sekitar titik anchor layer. Titik anchor di tengah cocok untuk pembesaran dari pusat; titik anchor di tengah bawah cocok untuk karakter yang harus tetap tampak menapak saat membesar. Adobe: Titik anchor layer

Gunakan Value Graph untuk memeriksa ukuran dan Speed Graph untuk membentuk kecepatan perubahan ukuran. Adobe mendefinisikan grafik nilai sebagai nilai properti dari waktu ke waktu dan grafik kecepatan sebagai laju perubahannya. Pilih grafik secara eksplisit dari opsi Graph Editor alih-alih mengandalkan tampilan default. Adobe: Dasar-dasar animasi di After Effects

Di Value Graph, periksa semua komponen skala yang relevan secara bersamaan. Dengan nilai dasar yang sama, kurvanya harus berimpit sepanjang animasi skala seragam. Jarak di antara kurva menjadi sinyal yang berguna untuk memeriksa frame terkait. Jika nilai dasar yang disetujui berbeda, bandingkan perubahan proporsionalnya alih-alih mengharapkan kurvanya berimpit.

Gunakan Speed Graph jika ingin mengubah akselerasi atau gerakan saat berhenti tanpa mengubah ukuran yang ditetapkan pada keyframe. Kembali ke Value Graph setelah setiap penyesuaian yang berarti. Dengan begitu, Anda dapat melakukan dua pemeriksaan terpisah: apakah timing terasa tepat dan apakah hubungan ukurannya tetap benar.

Gunakan contoh terkontrol ini: karakter 2D dengan proporsi yang benar membesar dari 80%, 80% menjadi 100%, 100% selama 12 frame. Ini adalah pengaturan ilustratif, bukan durasi atau rentang ukuran yang diwajibkan.

1. Pilih layer karakter, tampilkan Scale, lalu aktifkan Constrain Proportions.
2. Atur keyframe Scale pertama ke 80%, 80% dan keyframe kedua, 12 frame kemudian, ke 100%, 100%.
3. Pilih kedua keyframe Scale dan terapkan Animation > Keyframe Assistant > Easy Ease.
4. Buka Graph Editor lalu pilih Edit Speed Graph.
5. Pilih semua key skala secara bersamaan. Sesuaikan komponen yang relevan secara konsisten dengan perubahan kecil pada gagangnya.
6. Beralih ke Edit Value Graph dan periksa nilai sumbu di antara keyframe.

Easy Ease menyediakan transisi awal dengan kecepatan nol pada key yang dipilih. Untuk penyesuaian yang lebih presisi, gunakan Animation > Keyframe Velocity untuk mengedit kecepatan dan pengaruh masuk atau keluar. Adobe menjelaskan bahwa menggeser gagang kecepatan secara horizontal mengubah pengaruhnya terhadap key di dekatnya. Adobe: Menerapkan dan mengontrol perubahan kecepatan di After Effects

Untuk contoh ini, coba pembesaran cepat yang diikuti gerakan berhenti lebih lama. Sesuaikan pengaruh masuk pada key terakhir, pratinjau hasilnya, lalu bandingkan dengan versi asli. Pertahankan ukuran titik akhir dan durasi 12 frame selama tahap ini agar Anda dapat menilai perubahan easing secara terpisah.

Jika karakter meregang setelah penyesuaian, batalkan perubahan tersebut dan periksa komponen mana yang dipilih. Periksa kembali nilai perantara dan titik akhir sebelum melanjutkan. Tutorial Graph Editor Adobe menunjukkan cara memilih key, menampilkan gagangnya, menyesuaikan Speed Graph, dan melihat pratinjau hasilnya. Adobe: Membuat gerakan dinamis di antara keyframe dengan Graph Editor

Gunakan pengujian perubahan proporsional ketika kurva sulit dibandingkan. Pada frame yang dipilih, bagi skala saat ini pada setiap sumbu dengan skala dasar yang disetujui. Hasilnya harus sama untuk perubahan ukuran yang seragam. Pengujian ini langsung mengikuti prinsip penggunaan satu pengali untuk kedua dimensi.

Status	Skala X	Skala Y	X ÷ dasar X	Y ÷ dasar Y	Interpretasi
Dasar yang disetujui	80%	80%	1.00	1.00	Bentuk acuan
Frame perantara yang benar	92%	92%	1.15	1.15	Proporsi tetap terjaga
Frame perantara yang terdistorsi	96%	88%	1.20	1.10	Pertumbuhan horizontal lebih besar
Titik akhir yang disetujui	100%	100%	1.25	1.25	Proporsi acuan kembali

Dalam contoh yang terdistorsi, rasio lebar terhadap tinggi dikalikan 96 ÷ 88 ≈ 1.091. Itu membuat karakter kira-kira 9.1% lebih lebar dibandingkan tingginya daripada pada ukuran dasar. Angka-angka ini adalah contoh perhitungan, bukan hasil pengukuran dari animasi tertentu.

Untuk dasar yang sengaja dibuat tidak sama, yaitu 120%, 100%, pembesaran seragam sebesar 1.10 menghasilkan 132%, 110%. Kedua sumbu bertambah 10%, sehingga tampilan yang disetujui tetap terjaga. Mengubah titik akhir tersebut menjadi 132%, 132% akan mengubah proporsi yang sudah ada.

Kenali gejala yang terlihat sebelum melakukan penyesuaian easing lagi. Hentikan animasi pada sebuah frame untuk membedakan perubahan bentuk dari pergeseran posisi atau perubahan detail gambar.

Gejala	Pemeriksaan berikutnya
Lebar dan tinggi menyimpang selama transisi	Bandingkan nilai sumbu, key perantara, dan gagang kurva pada waktu tersebut.
Seluruh karakter bergerak saat membesar	Periksa titik anchor dan animasi Position.
Ukuran relatif hanya berubah pada satu bagian karakter	Periksa transformasi bagian tersebut dan transformasi bersama karakter.
Karakter menjadi lebih besar dari yang diinginkan sebelum berhenti	Periksa Value Graph untuk melihat apakah ukurannya melampaui target.
Siluet tetap proporsional, tetapi tepinya menjadi kotak-kotak	Periksa resolusi karya seni sumber dan besarnya pembesaran.

Pembesaran sementara yang melampaui target tetap dapat menjaga proporsi jika kedua sumbu melampauinya secara bersamaan. Tentukan secara terpisah apakah ukuran yang lebih besar itu memang perlu dalam animasi. Jika instruksi menghendaki gerakan membesar lalu berhenti secara sederhana, pertahankan nilai skala di dalam rentang awal dan akhir yang dipilih.

Pembesaran raster juga dapat mengubah tampilan karya seni tanpa mengubah proporsinya. Adobe mencatat bahwa pembesaran layer raster secara signifikan dapat menghasilkan piksel kotak-kotak, sedangkan pengecilan dapat membuatnya tampak lebih lembut. Mengubah easing tidak akan memperbaiki masalah detail sumber tersebut. Adobe: Menskalakan atau membalik layer

Periksa frame awal, beberapa frame perantara, frame dengan ukuran terbesar, dan titik akhir. Periksa lebih banyak frame pada bagian yang skalanya berubah paling cepat atau bentuknya tampak bergeser. Pengambilan sampel frame membantu menemukan masalah; pemeriksaan seluruh kurva membantu mendeteksi perbedaan di antara sampel tersebut.

Lalu pratinjau animasi pada laju pemutaran yang diinginkan. Tutorial Graph Editor Adobe menyarankan untuk memeriksa panel Info guna memastikan apakah pratinjau berjalan dalam waktu nyata, karena pratinjau yang belum selesai dapat menyulitkan penilaian timing. Adobe: Mempratinjau dan menyesuaikan animasi Graph Editor

Selesaikan pengeditan ketika karakter mencapai ukuran yang diinginkan, mempertahankan proporsi yang disetujui sepanjang transisi, serta berakselerasi dan berhenti sesuai keinginan. Gunakan satu pengali skala bersama sebagai pedoman, gunakan grafik untuk memeriksa timing-nya, lalu verifikasi bentuk perantara sebelum menerima hasil pengeditan.

• Adobe — Menyesuaikan properti layer di After Effects
• Adobe — Dasar-dasar animasi di After Effects
• Adobe — Menerapkan dan mengontrol perubahan kecepatan di After Effects
• Adobe — Membuat gerakan dinamis di antara keyframe dengan Graph Editor
• MDN — Fungsi CSS scale()