Mari kita bicara tentang pekerjaan rumah kelas terakhir terlebih dahulu. Tiga animasi yang kami minta semua orang buat semuanya memiliki efek fade-in dan fade-out, tetapi jika Anda perhatikan lebih dekat, Anda akan menemukan perbedaan.
Animasi pertama muncul secara bertahap saat teks bergerak. Teks paling jelas terlihat saat berada di tengah-tengah gerakan, dan kemudian secara bertahap menghilang saat bergerak. Jika Anda menggunakan transisi bingkai untuk membuatnya, Anda perlu menentukan 3 bingkai utama terlebih dahulu. Teks di bingkai pertama harus berada di ujung kanan dengan opacity 0% (atau harus menyembunyikan teks di bingkai kedua); berada di tengah dengan transparansi 100%. ;Teks dalam bingkai 3 berada paling kiri, dan opacity kembali ke 0% (atau menyembunyikan lapisan). Kurang lebih seperti gambar dibawah ini.
Kemudian transisi antara frame 12 dan frame 23, masing-masing menambahkan sekitar 5 frame. Waktu tunda frame dapat diatur sendiri. Dalam animasi ini, teks memudar masuk dan keluar bersamaan dengan gerakan. Transparansi berubah sepanjang perpindahan.
Dalam animasi kedua, teks diam ketika memudar di ujung paling kanan, dan mulai bergerak setelah terlihat sepenuhnya. Setelah berpindah ke paling kiri, ia memudar saat diam. Maka bingkai kuncinya harus berjumlah 4 bingkai, kira-kira seperti yang ditunjukkan pada gambar kiri di bawah. Cukup atur transisi antara 4 frame ini masing-masing.
Meskipun jumlah frame transisi tertentu dapat diatur secara sewenang-wenang, dari sudut pandang desain, transisi antara frame 12 dan frame 34 harus lebih sedikit, sekitar 3 hingga 4 frame. Harus ada transisi yang relatif lebih banyak antara frame 23, sekitar 6 hingga 7 frame. Hal ini karena ketika bergerak dalam jarak yang sama, semakin sedikit jumlah frame, semakin cepat pergerakan per frame, dan semakin tinggi jumlah frame, semakin lambat pergerakannya. Seperti terlihat pada gambar kanan bawah, merupakan jarak pergerakan setiap frame sebanyak 3 frame, 4 frame, dan 7 frame. Secara teoritis, semakin tinggi jumlah frame, animasinya akan semakin kaya dan detail.
Animasi kami terutama menampilkan konten teks, sehingga pemirsa dapat melihatnya dengan jelas. Jika Anda mengatur jumlah frame fade-in dan fade-out menjadi sangat besar dan jumlah frame bergerak menjadi sangat kecil, hal ini akan menciptakan situasi di mana teks memudar dengan sangat halus, kemudian bergerak dengan cepat, dan kemudian memudar. dengan sangat hati-hati. Mungkin pemirsa masih dapat memahami isi teks, namun cara penyajian ini kurang tepat. Meski terkadang ini juga bisa menjadi teknik ekspresi yang tidak konvensional.
Sekarang kami telah membuat dua animasi pada subjek yang sama, keduanya dengan efek fade dan move, namun keduanya memiliki kekurangan ekspresif. Kerugian dari animasi pertama adalah transisi opacity yang terlalu lama. Teks hanya terlihat sepenuhnya dalam satu frame selama keseluruhan animasi. Itu semi-transparan sebelum dan sesudahnya. Hal ini tidak menekankan pentingnya teks dan mungkin menyulitkan pembaca untuk membacanya.
Anda mungkin mengira masalah ini tidak ada, karena teks pada animasi pertama terlihat sangat jelas. Namun kami menggunakan opacity 100% sebagai status tampilan akhir. Dengan cara ini, menurut transisi 5 frame, setiap frame memiliki kenaikan sebesar 20%. Artinya, meskipun frame pertama 0%, frame kedua mencapai 20%, jadi pada dasarnya tidak ada masalah dalam pembacaan. Jika dalam situasi lain, opacity akhir tidak 100%, tetapi hanya 30% atau lebih rendah, peningkatan opacity di setiap frame menjadi sangat kecil, jadi meskipun opacity akhir 30% sudah cukup Hal ini diperlukan untuk membaca, tetapi fade- dalam prosesnya akan sulit melihat dengan jelas dan mempengaruhi pembacaan. Anda dapat mengatur opacity akhir menjadi 30%, 10%, dll. dan coba lagi.
Sebaliknya, animasi kedua menghindari kekurangan ini. Ini membuat fade-in dan fade-out secara terpisah. Ini hanya mulai bergerak setelah fade-in selesai (teks mencapai keadaan tampilan akhirnya). mempertahankan bentuk aslinya selama gerakan. Keadaan akhir yang terwujud, apakah itu 100% atau 30% atau apa pun. Namun juga mempunyai kelemahan lain yaitu teks tidak bergerak pada titik awal dan titik akhir sehingga merusak kesinambungan gerak.
Sekarang kita ingin menggabungkan keduanya untuk membuat animasi yang memiliki efek fade-in dan fade-out dan juga dapat menampilkan teks dengan lebih baik. Idenya adalah untuk menjaga teks dalam animasi pertama tetap bergerak sepanjang keseluruhan proses, namun memampatkan fade-in dan fade-out menjadi beberapa bingkai di awal dan akhir, untuk memastikan bahwa teks mempertahankan tampilan akhirnya selama sebagian besar waktu. dari gerakan tersebut. Seperti yang ditunjukkan pada gambar kiri di bawah, panah dua arah mewakili proses fade-in dan fade-out. Bagian atas menunjukkan animasi pertama. Terlihat bahwa jumlah fade-in dan fade-out sama dengan keseluruhan proses animasi. Di bawah ini adalah ide kami saat ini, dengan fade in plus fade out mengambil setengah atau kurang dari keseluruhan rangkaian. Hal ini memungkinkan teks untuk menyelesaikan sebagian besar pergerakannya dalam tampilan akhirnya.
Pengaturan key frame seperti terlihat pada gambar kanan bawah. Cukup atur transisi pada waktu dua frame yang berdekatan. Meskipun teks tidak terlihat pada frame 1, namun dapat diketahui bahwa letaknya berada di ujung paling kanan layar. Pada frame 2, seluruh teks telah ditampilkan dan posisinya sedikit bergeser ke kiri. Dengan cara ini, transisi frame 12 menyelesaikan seluruh perubahan opacity dan menyelesaikan sebagian kecil gerakan pada saat yang bersamaan. Setelah itu, teks berpindah jarak tertentu (transisi bingkai 23), dan kemudian mulai memudar saat bergerak mendekati ujung kiri (transisi bingkai 34), yang merupakan kebalikan dari memudar ke dalam.
Saya ingin tahu apakah Anda pernah memikirkan masalah lain yang akan dihadapi dalam produksi animasi ini, yaitu bagaimana memastikan jarak pergerakan frame 12 sesuai dengan jarak frame 23. Korespondensi disini bukan berarti sama, tetapi berarti jarak yang ditempuh setiap frame adalah sama. Asumsikan transisi frame 12 sebanyak 3 frame (ABC), dan transisi frame 23 sebanyak 6 frame (DEFGHI), yaitu , 1ABC2DEFGHI3, total 12 frame. Kemudian jarak pergerakan teks di masing-masing 12 frame ini harus sama untuk mencapai efek pergerakan yang lebih baik. Namun orang sering kali membuat efek berjalan cepat di depan dan lambat di belakang, atau berjalan lambat di depan dan cepat di belakang, karena mereka kurang menilai jarak pergerakan. Masalah ini sulit diselesaikan. Kecuali Anda menggunakan penggaris untuk menghitung jarak secara akurat, Anda hanya dapat mencoba beberapa kali untuk menemukan jumlah bingkai transisi yang paling tepat.
Yang perlu Anda kuasai dalam pelajaran ini adalah bagaimana menangani fade-in dan fade-out jika dipadukan dengan gerakan. Cara terbaik adalah dengan menggunakan jumlah frame yang lebih sedikit untuk menyelesaikan fade in dan out sambil terus bergerak, sambil menjaga jarak pergerakan setiap frame tetap sama. Pengoperasian ini agak merepotkan, tapi jangan khawatir, akan segera ada solusinya.
contoh01.rar
File sumber pembuatan animasi ketiga kami sediakan disini ( anisample01.rar ), bukan berarti menurut saya semua orang tidak bisa melakukannya, namun untuk menjamin kesatuan pengajaran, kita perlu menggunakan animasi ini untuk terus belajar. Anda juga dapat menggunakan karya Anda sendiri. Tidak ada pekerjaan rumah untuk kelas ini, namun ada pertanyaan pemikiran, yaitu bagaimana membuat animasi seperti gambar di bawah ini dengan tetap menjaga pengaturan 20 frame asli anisample01.psd tidak berubah.
Pada bagian selanjutnya kami memperkenalkan batasan animasi bingkai transisi .