Pengenalan kepada Animasi dengan Rekod Hype

• Mungkin 17, 2024

Hype mempunyai ciri yang sangat bagus untuk animator permulaan, yang dipanggil ciri Rekod. Untuk menggunakan ciri ini, klik pada butang Rekod merah yang besar. Inilah yang akan kita lakukan dalam tutorial ini.

Seperti yang telah kita pelajari, untuk membuat animasi, kita hanya perlu permulaan dan menghentikan kerangka. Contohnya, untuk mengurangkan saiz segiempat tepat semasa bergerak di skrin, kami akan memberitahu Hype di mana bingkai untuk memulakan animasi dan di mana bingkai berhenti. Kerana kita bekerja dengan animasi berasaskan garis masa, kita boleh bercakap dengan Hype dengan menggunakan keyframes pada Timeline. Dan, anda fikirkan, kami akan meletakkan kunci utama ini pada kedua-dua permulaan khas dan menghentikan bingkai.

Apabila Hype melihat kerangka utama, ia mengambil perhatian terhadap sifat sesuatu objek, seperti segi empat tepat, pada skrin. Hanya beberapa sifat yang Hype akan mengambil perhatian adalah Opacity, Asal Kiri, Asal Kanan, Ketinggian Saiz dan Lebar Saiz. Ciri-ciri ini sesuai dengan sifat gaya CSS dalam dokumen HTML5. Hype menyimpan nilai-nilai sifat ini bersama-sama dengan kedudukan atau bingkai yang sama pada garis masa.

Langkah pertama kami dalam mewujudkan animasi sampel ini adalah untuk memberitahu Hype apa saiz untuk membuat segi empat tepat dan di mana untuk meletakkannya pada skrin pada permulaan dan akhir animasi. Kita boleh melakukan semua ini dengan butang Rekod.

1. Klik Fail - Baru untuk memulakan dokumen baru dalam Hype, menggunakan tetapan lalai.
   
   Mari tambahkan segi empat tepat ke skrin.
   
   
2. Klik ikon Unsur dalam Bar Alat dan pilih Rectangle. Hype akan meletakkan segi empat tepat baru di tengah-tengah skrin.
   
   Mari letakkan segi empat tepat di mana kita mahu menjadi permulaan animasi. Kami akan menyimpan saiz lalai, jadi yang perlu kita lakukan adalah memindahkan persegi panjang.
   
   
3. Seret persegi panjang ke tepi kiri skrin.
   
   
4. Lihatlah Inspektor Metrik. Rectangle kini 7 piksel dari tepi kiri dan 149 piksel dari pinggir atas. Juga, ia adalah 102 x 102 piksel.
   
   

Sekarang, kita mahu segi empat tepat untuk bergerak ke tepi kanan dan mengurangkan 50%. Juga, kita mahu ini berlaku hanya pada 30 bingkai. Mari beritahu Hype maklumat ini melalui ciri Rekod dalam tutorial seterusnya.

Teruskan