Masa Lanjutan & Pelonggaran untuk Animasi Web dengan Hype Tumult

Takeaways Key

Hype Tumult adalah alat animasi web moden yang membolehkan animator membuat kerangka utama (titik permulaan dan berhenti) dan komputer secara dinamik mengisi semua bingkai di antara. Cara komputer menjana bingkai ini boleh memberi kesan kepada perhatian dan sambungan emosi penonton.
Fungsi masa memainkan peranan penting dalam memanfaatkan unsur -unsur yang anda animasi. Mereka boleh membantu membentangkan maklumat dengan bersih dan jelas, tumpuan langsung, menyampaikan emosi, dan menghiburkan dan melibatkan diri. Fungsi masa juga boleh memodelkan pergerakan kedua -dua objek "tidak bernyawa" dan "bernyawa".
Hype Tumult menawarkan editor fungsi masa adat yang membolehkan memanipulasi titik kawalan dan menambah mata baru pada lengkung untuk membentuk fungsi masa adat anda sendiri. Fungsi -fungsi ini boleh dinamakan dan disimpan untuk kegunaan masa depan dalam dokumen gembar -gembur, dan juga boleh ditetapkan sebagai fungsi masa lalai untuk sebarang animasi baru.
Petua praktikal untuk menggunakan fungsi masa termasuk membiarkan animasi anda "berehat" selama beberapa hari untuk melihat apakah anda masih menyukainya ketika anda kembali, mendapatkan maklum balas dari rakan sebaya, mengelakkan pelonggaran yang signifikan dengan animasi yang dicetuskan oleh tindakan pengguna seperti yang akan Rasa lembap, dan memerhatikan alam semula jadi dan memahami matematik graviti/fizik untuk memaklumkan cara menyusun animasi.

Artikel ini ditaja oleh Tumult . Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Animasi boleh ditakrifkan secara kasar sebagai menunjukkan imej atau bingkai berturut -turut untuk memberikan ilusi perubahan lancar. Daripada menghasilkan setiap bingkai dengan tangan, alat animasi web moden seperti Hype Tumult membiarkan animator membuat kerangka key (umumnya mula dan berhenti mata) dan komputer secara dinamik mengisi semua bingkai. Bagaimana komputer memutuskan untuk menjana bingkai ini boleh menjejaskan perhatian penonton dan sambungan emosi. Artikel ini meneroka sekeping kritikal animasi yang dihasilkan, fungsi masa, dan bagaimana untuk memanfaatkan editor fungsi masa lanjutan Hype yang paling baik untuk animasi anda.

Sebelum membaca, langkah pertama ialah memuat turun gembar -gembur. Percubaan berfungsi sepenuhnya selama 14 hari. Hype Tumult mempunyai dua mod rasa: standard dan profesional. Untuk membuat fungsi masa adat (dan mengikuti bersama dengan artikel ini!), Anda akan mahu menggunakan Hype Professional.

fungsi masa linear dan pelonggaran

Katakan anda ingin menghidupkan kotak yang bergerak di seluruh skrin. Sepanjang dua saat anda akan memindahkan 300 piksel ke kiri. Dalam menghasilkan animasi, komputer perlu menentukan kedudukan kotak pada waktunya, dan ini adalah peranan fungsi masa. Yang paling asas ini adalah interpolasi linear, yang membahagikan secara merata jarak dengan bilangan bingkai. Oleh itu animasi 30 bingkai-per-kedua akan mempunyai setiap langkah memindahkan kotak 5 piksel, seperti 300px / (2s * 30fps) = 5px. Ini berjaya mencipta animasi:

Untuk menjadi subjektif, animasi ini hambar! Ia bergerak tanpa sebarang fizikal atau berat badan semula jadi. Mata penonton mesti mengejar kelajuan kotak bergerak dan kemudian mungkin akan melampaui pandangan mereka apabila animasi tiba -tiba berakhir. Penyelesaian yang paling biasa adalah menggunakan pecutan asas dan penurunan ke kotak. Fungsi masa ini dipanggil mudah keluar:

Ini kelihatan lebih baik, dan merupakan pilihan yang paling biasa untuk animasi. Ia adalah fungsi masa lalai dalam gembar -gembur dan alat animasi yang lain untuk alasan yang baik.

Perwakilan fungsi masa

menjadi lebih tepat, fungsi masa memaparkan nilai masa (x) dan mengeluarkan nilai harta animasi (Y). Mengimbas kembali ke algebra sekolah menengah, F (x) = fungsi gaya y adalah bentuk yang boleh diwakili pada graf 2D. Fungsi masa linear asas kelihatan seperti yang diharapkan, garis:

mudah keluar adalah lengkung lembut yang menunjukkan bagaimana ia akan bermula dan berakhir pada kelajuan yang lebih perlahan:

Fungsi masa ini dibuat dengan matematik lengkung bézier padu. Dengan mengubah titik kawalan yang mempengaruhi kelengkungan, pecutan dan penurunan yang berbeza dapat dicapai:

Nilai harta benda juga boleh mencelupkan nilai minimum atau di atas nilai maksimum, mewujudkan fungsi masa yang dijangkakan dan melampaui:

Hype Tumult menawarkan lebih banyak kuasa lagi: Beberapa lengkung bézier boleh digabungkan untuk membentuk laluan multi-kurva. Ini boleh digunakan untuk pelbagai kesan seperti melantun atau keanjalan:

penalaran umum untuk memberi tumpuan kepada fungsi masa dalam animasi anda

sifat tidak bergerak secara mekanikal seperti fungsi masa linear di atas. Fungsi masa seperti pelonggaran oleh itu memainkan peranan penting dalam memanfaatkan unsur -unsur yang anda animasi. Ini membantu membentangkan maklumat dengan bersih dan jelas. Ia mengarahkan fokus.

Masa yang baik membantu memberi makna kepada animasi. Ia menjadikan bentuk yang tidak bermaya menjadi realiti. Ada yang dapat membantu menyampaikan emosi yang penting untuk penjenamaan. Masa lain boleh menghiburkan dan melibatkan diri.

Pergerakan objek "tidak bernyawa" ditadbir lebih banyak oleh fizik. Objek "Animate" ditadbir oleh pemikiran dan emosi mereka sendiri. Kedua -dua gaya boleh dimodelkan dengan fungsi masa.

Memohon fungsi masa dalam gembar -gembur

Mengedit fungsi masa animasi dalam gembar -gembur adalah mudah. Langkah Zero membuat animasi, jadi jika anda tidak dikenali, lihat tutorial dan dokumentasi.

Untuk menyesuaikan fungsi masa animasi tunggal, anda boleh mengklik dua kali bar penunjuk animasi antara kerangka key di kawasan per-harta:

Jika pelbagai animasi dipilih, anda boleh menggunakan butang Pop Up Fungsi Masa di sebelah kanan antara muka Garis Masa:

Apabila tiada animasi dipilih, fungsi pemasaan lalai ditunjukkan sebagai tajuk butang Pop Up Fungsi Masa.

Dalam Hype Professional, antara muka ini membolehkan memanipulasi titik kawalan dan menambah mata baru pada lengkung untuk membentuk fungsi masa tersuai anda sendiri. Fungsi masa boleh dinamakan supaya mereka disimpan untuk kegunaan masa depan dalam dokumen gembar -gembur. Mereka juga boleh ditetapkan sebagai fungsi masa lalai untuk sebarang animasi baru:

Editor ini serupa dengan aplikasi pengeditan vektor lain. Inilah lembaran cheat untuk memanipulasi titik kawalan:

• Klik pada lengkung: Tambah titik baru
• Padam kekunci: Keluarkan titik kawalan
• klik pilihan: Tukar ke puncak bersudut
• Opsyen-Drag: Seret Mata Kawalan Baru
Pilihan
• (semasa menyeret titik kawalan): Cermin
• perintah (semasa menyeret titik kawalan): terputus
• none (hanya menyeret titik kawalan): asimetrik
• shift (semasa menyeret titik kawalan): Simpan pada sudut 45 °

petua praktikal untuk menggunakan fungsi masa

• kerajinan dan memilih fungsi masa adalah kemahiran, pengalaman akan menjadikannya lebih baik.
• biarkan animasi anda "berehat" dengan pergi beberapa hari tanpa melihatnya, dan lihat jika anda masih menyukainya ketika anda kembali. Atau mendapatkan maklum balas daripada rakan sebaya.
• Animasi gelung biasanya menggunakan fungsi masa linear. Fungsi pemasaan berasaskan kemudahan akan mewujudkan titik berhenti atau melompat pada permulaan kitaran gelung.
• Elakkan pelonggaran yang ketara dalam (pecutan perlahan) dengan animasi yang dicetuskan oleh tindakan pengguna kerana ia akan merasa lembap.
• overshoot (belakang) dan jangkaan (belakang belakang) boleh menjadi kesan yang boleh kelihatan mulia, tetapi sering kali ini bertentangan dengan tujuan animasi membantu tindakan bersekutu penonton. Selanjutnya, ini boleh membuang masa pengguna kerana mereka cenderung mengambil masa yang lebih lama. Gunakan dengan berhati -hati.
• Ia boleh menjadi baik untuk bereksperimen dengan menggunakan tempoh animasi yang sama dan fungsi masa yang berbeza untuk tipu muslihat yang lebih visual atau untuk menyatakan berat/inersia yang berbeza. Yang mengatakan, kecuali menghidupkan dari model semula jadi atau watak, lebih baik untuk tidak pergi ke laut dengan terlalu banyak fungsi masa yang berbeza. Jangan lupa untuk juga bereksperimen dengan masa permulaan animasi yang mengejutkan atau tempoh yang sedikit berubah.
• Sama seperti visual sering mempunyai berat garis kawalan spec dan palet warna, adalah baik untuk menghasilkan bahasa reka bentuk untuk animasi termasuk tempoh dan fungsi masa yang digunakan, bersama -sama dengan rasional untuk keadaan apa yang memilih fungsi masa.
• Perhatikan sifat dan memahami matematik graviti/fizik kerana ini dapat membantu memaklumkan cara menyusun animasi. Sebagai contoh, untuk membuat objek melantun, nilai y harus menggunakan fungsi masa lantunan. Nilai X harus mempunyai fungsi masa linear kerana tidak ada daya yang bertindak pada paksi itu. Walaupun difahami dengan baik, kadang -kadang lebih mudah menggunakan enjin fizik.
• Dapatkan inspirasi dari alam atau dari animator induk:
  • Masa untuk Animasi oleh John Halas dan Harold Whitaker
  • Kit Survival Animator oleh Richard Williams

Kesimpulan

memanipulasi fungsi masa adalah langkah maju dalam mewujudkan animasi yang bermakna. Mereka boleh membantu kedua -dua fizik model, emosi, atau hanya mengurangkan pembinaan kerangka utama. Editor Fungsi Masa Custom Tumult Hype memberikan kuasa dan fleksibiliti untuk membantu membuat animasi terbaik anda.

Jika anda ingin memberi gembar -gembur, sekarang sebagai pengguna SitePoint, anda boleh mendapatkan hype standard untuk 50% off pada $ 24.99 USD.

atau jika anda selepas versi dengan semua loceng dan wisel, kami juga menawarkan diskaun 25% untuk Hype Professional pada $ 74.99 USD.

soalan yang sering ditanya mengenai fungsi masa lanjutan dan meringankan animasi web

Apakah perbezaan utama antara CSS dan JavaScript untuk animasi web? CSS biasanya lebih mudah dan mudah digunakan, menjadikannya pilihan yang baik untuk animasi mudah. Ia juga melakukan lebih baik daripada JavaScript dalam kebanyakan kes, kerana ia dapat mengimbangi tugas animasi ke enjin rendering penyemak imbas. Walau bagaimanapun, JavaScript menawarkan lebih banyak kawalan dan fleksibiliti, yang membolehkan animasi dan interaksi yang kompleks. Ia juga mempunyai keserasian yang lebih baik dengan penyemak imbas yang lebih tua.

Bagaimana saya boleh menggunakan API Animasi Web? Ia membolehkan anda membuat, mengawal, dan menghidupkan unsur -unsur secara langsung dari JavaScript. Untuk menggunakannya, anda perlu membuat objek animasi menggunakan kaedah elemen.animate (), lulus dalam kerangka utama dan pilihan masa sebagai argumen. Anda kemudian boleh mengawal animasi menggunakan kaedah seperti bermain (), jeda (), dan terbalik ().

Apakah fungsi pelonggaran dan bagaimana ia berfungsi? Untuk mengawal kelajuan animasi dari masa ke masa. Mereka boleh membuat animasi berasa lebih semula jadi dengan meniru cara bergerak di dunia nyata. Sebagai contoh, objek biasanya mula bergerak perlahan, mempercepatkan, dan kemudian perlahan lagi sebelum berhenti. Fungsi pelonggaran boleh menjadi linear, kemudahan, mudah keluar, atau mudah-dalam-keluar, antara lain. Hype Tumult adalah alat yang berkuasa untuk membuat animasi HTML5 dan kandungan interaktif. Ia mempunyai antara muka mesra pengguna yang membolehkan anda merancang dan menghidupkan unsur-unsur tanpa menulis sebarang kod. Walau bagaimanapun, ia juga menyokong JavaScript untuk ciri -ciri yang lebih canggih. Ciri-ciri utama Hype Tumult termasuk animasi berasaskan garis masa, pengurusan adegan, dan susun atur responsif.

Bagaimana saya boleh mengoptimumkan animasi web saya untuk prestasi yang lebih baik? prestasi. Pertama, cuba gunakan CSS untuk animasi mudah apabila mungkin, kerana ia berfungsi lebih baik daripada JavaScript. Kedua, gunakan kaedah RequestAnimationFrame () untuk animasi JavaScript, kerana ia membolehkan penyemak imbas mengoptimumkan gelung animasi. Ketiga, elakkan animasi sifat yang mencetuskan susun atur atau lukisan, kerana mereka lebih mahal dari segi prestasi.

Apakah kerangka utama dalam animasi web?

Keyframes adalah titik khusus dalam masa dalam animasi di mana anda menentukan bagaimana elemen harus kelihatan. Mereka digunakan untuk mengawal langkah -langkah pertengahan dalam urutan animasi CSS. Anda boleh menentukan seberapa banyak kerangka utama yang anda mahukan, dan penyemak imbas akan menginterpolasi animasi di antara mereka. untuk memastikan mereka menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza. Ini boleh dicapai dengan menggunakan unit relatif seperti peratusan dan bukan unit mutlak seperti piksel, dan dengan menggunakan pertanyaan media untuk menyesuaikan parameter animasi berdasarkan saiz paparan. >

Beberapa amalan terbaik untuk animasi web termasuk menjaga animasi mudah dan halus, menggunakan fungsi pelonggaran untuk membuat animasi berasa lebih semula jadi, mengoptimumkan animasi untuk prestasi, dan membuat animasi responsif. Ia juga penting untuk memastikan animasi meningkatkan pengalaman pengguna dan bukannya mengalihkan perhatian daripadanya. digunakan untuk menguji dan debug animasi web. Alat ini membolehkan anda memeriksa sifat animasi, mengawal main balik animasi, dan menggambarkan garis masa animasi. Anda juga boleh menggunakan JavaScript untuk log animasi dan negeri -negeri. Membimbing pengguna melalui interaksi, dan meningkatkan pengalaman pengguna keseluruhan. Walau bagaimanapun, penting untuk memastikan bahawa animasi tidak menyebabkan masalah bagi pengguna dengan kepekaan gerakan atau keperluan kebolehaksesan lain. Anda boleh menggunakan pertanyaan media-gerakan yang dikurangkan untuk menyesuaikan atau melumpuhkan animasi untuk pengguna ini.

Atas ialah kandungan terperinci Masa Lanjutan & Pelonggaran untuk Animasi Web dengan Hype Tumult. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!