Pelajaran yang dipelajari dari enam puluh hari menganalisis semula zombi dengan CSS berkod tangan

Sepuluh pelajaran yang dipelajari dari 60 hari animasi zombie CSS tulen

Amaran: Amaran bertenaga tinggi di hadapan, sejumlah besar zombi dan kandungan spoof akan datang! Artikel ini akan berkongsi beberapa petua praktikal, tetapi contohnya hampir semua berkaitan dengan zombi dan jenaka lucu. Harap bersedia secara mental.

Saya akan menghubungkan ke kerja animasi individu dalam perbincangan, tetapi jika anda ingin mengetahui keseluruhan projek, lawati Institut Undead untuk melihat Siri Animasi 60 Hari. Projek ini bermula pada 1 Jun, 2020 dan berakhir pada 1 Ogos, yang bertepatan dengan tarikh penerbitan sebuah buku yang saya tulis mengenai animasi CSS, humor dan zombi - kerana jelas bahawa zombi akan memusnahkan dunia tanpa menggunakan kemahiran web anda untuk menghentikan akhir dunia. Tiada apa -apa yang boleh memukul zombi lebih baik daripada elemen HTML yang dinamik!

Saya membuat beberapa peraturan untuk diri saya sepanjang projek:

1. Semua kod CSS perlu ditulis secara manual. (Saya hanya masokis.)
2. Semua animasi dicetuskan oleh pengguna. (Saya benci animasi yang berada di tengah -tengah.)
3. Gunakan JavaScript sebanyak mungkin dan jangan gunakannya untuk animasi. (Saya hanya menggunakan JavaScript sekali dalam animasi akhir, iaitu untuk memulakan audio. Saya tidak menentang JavaScript, hanya itu tidak diperlukan di sini.)

Pelajaran 1: 80 hari terlalu panjang.

Bukankah tajuk itu mengatakan "60 hari"? Ya, tetapi matlamat awal saya adalah 80 hari, dan ketika hari pertama tiba, saya mempunyai kurang dari 20 animasi siap, dan masa pengeluaran purata untuk setiap animasi adalah 3 hari, saya panik dan berubah menjadi 60 hari. Ini memberi saya lebih banyak masa penyediaan masa dan mengurangkan 20 karya animasi.

Pelajaran 1A: 60 hari masih terlalu lama.

Ia sememangnya satu cabaran untuk mencapai banyak animasi dengan masa yang terhad, kreativiti dan kemahiran artistik yang lebih terhad. Walaupun saya terfikir untuk memendekkan hingga 30 hari, saya gembira saya tidak berbuat demikian. 60 hari membenarkan saya untuk memecahkan diri saya dan mendapat pemahaman yang lebih mendalam tentang bagaimana animasi CSS -dan CSS sendiri -kerja. Saya juga berbangga dengan banyak kerja yang saya telah selesai kemudian kerana kemahiran saya telah bertambah baik, saya perlu lebih inovatif dan berfikir lebih mendalam tentang bagaimana membuat kerja lebih menarik. Sebaik sahaja anda kehabisan semua pilihan mudah, kerja sebenar dan hasil terbaik akan bermula. (Ya, ia akhirnya menjadi 62 hari, kerana saya bermula pada 1 Jun dan ingin menyelesaikan animasi terakhir pada 1 Ogos. Ia terasa janggal dari 3 Jun)

Jadi, Pelajaran REAL 1: Mencabar diri sendiri .

Pelajaran 2: Animasi interaktif sukar dihasilkan, dan reka bentuk responsif lebih sukar.

Jika anda mahu elemen terbang melintasi skrin dan berhubung dengan elemen lain, atau seolah -olah memulakan pergerakan elemen lain, anda perlu menggunakan semua unit standard, tidak fleksibel atau semua unit fleksibel.

Tiga pembolehubah menentukan masa dan kedudukan elemen animasi semasa proses animasi: tempoh, kelajuan, dan jarak. Tempoh animasi ditetapkan dalam harta animation dan tidak boleh diubah mengikut saiz skrin. Fungsi masa animasi menentukan kelajuan; Saiz skrin tidak dapat mengubahnya. Oleh itu, jika jarak berbeza dengan saiz skrin, akan ada penyimpangan dalam masa kecuali lebar dan ketinggian skrin tertentu.

Semak Tank! Jalankan animasi pada skrin luas dan sempit. Walaupun saya telah menjadualkannya sangat dekat, jika anda membandingkan, anda akan mendapati bahawa apabila zombie terakhir jatuh, kedudukan tangki relatif terhadap zombie adalah berbeza.

Untuk mengelakkan isu masa ini, anda boleh menggunakan unit tetap dan bilangan yang lebih besar, seperti 2000 atau 5000 piksel atau lebih, supaya animasi dapat menutup lebar (atau ketinggian) semua paparan kecuali paparan maksimum.

Pelajaran 3: Jika anda mahu animasi responsif, letakkan segala -galanya ke dalam unit pandangan (salah satu daripada mereka).

Mengambil penyelesaian kompromi untuk perkadaran unit (contohnya, menetapkan lebar dan ketinggian dalam piksel, tetapi menetapkan kedudukan dan pergerakan dalam unit Viewport) boleh membawa kepada hasil yang tidak dapat diramalkan. Juga, jangan gunakan vw dan vh pada masa yang sama, tetapi gunakan salah satu daripada mereka; yang merupakan arah utama. Campuran unit vh dan vw akan menjadikan animasi anda "pelik", yang saya percaya adalah istilah profesional.

Sebagai contoh, lihatlah zomborrifik yang luar biasa. Ia menggunakan campuran piksel, unit vw dan vh . Premisnya ialah super zombie terbang ke atas dan "kamera" berikut. Zombie Super mencecah langkan dan jatuh sementara kamera terus bergerak, tetapi jika skrin anda cukup tinggi, anda tidak akan memahaminya.

Ini juga bermakna bahawa jika anda memerlukan sesuatu untuk pergi dari atas - seperti yang saya lakukan di mana -mana di sini tetapi kita manusia - anda perlu menetapkan ketinggian vw cukup tinggi untuk memastikan bahawa zombi ninja tidak dapat dilihat dalam kebanyakan nisbah aspek.

Pelajaran 3A: Gunakan unit piksel untuk pergerakan di dalam elemen SVG.

Iaitu, menukarkan unsur -unsur dalam elemen SVG tidak boleh menggunakan unit Viewport. Tag SVG adalah alam semesta proporsional mereka sendiri. SVG "Pixel" akan mengekalkan nisbah semua elemen SVG yang lain dalam elemen SVG , sementara unit Viewport tidak akan. Oleh itu, gunakan unit piksel dalam elemen SVG untuk penukaran, tetapi gunakan unit Viewport di tempat lain.

Pelajaran 4: Skala SVG kurang baik pada masa runtime.

Untuk animasi, seperti oops ..., saya zum dalam imej SVG zombie hingga lima kali asal, tetapi ini kabur tepi. [Gelombang gelombang pada grafik vektor "berskala". ]

 /* Kod asal yang menyebabkan kabur tepi*/
.zombie {
 Transform: Skala (1);
 lebar: 15VW;
}

.toggle-checkbox: diperiksa ~ .zombie {
 Animasi: 5s mudah dalam 0S ReverseshRinkyDink ke hadapan;
}

@KeyFrames ReverseshRinkyDink {
 0% {
  Transform: Skala (1);
 }
 100% {
  Transform: Skala (5);
 }
}

Saya belajar untuk menetapkan saiz mereka ke saiz akhir yang akan berkuatkuasa pada akhir animasi, dan kemudian menggunakan transformasi zum untuk mengurangkannya ke saiz pada permulaan animasi.

 /* Kod diubah suai*/
.zombie {
 Transform: Skala (0.2);
 Lebar: 75VW;
}

.toggle-checkbox: diperiksa ~ .zombie {
 Animasi: 5s mudah dalam 0S ReverseshRinkyDink ke hadapan;
}

@KeyFrames ReverseshRinkyDink {
 0% {
  Transform: Skala (0.2);
 }
 100% {
  Transform: Skala (1);
 }
}

Singkatnya, kod yang diubahsuai bergerak dari versi imej yang dikurangkan ke lebar dan ketinggian penuhnya. Penyemak imbas sentiasa membuat 1, supaya tepi adalah jelas dan tajam pada skala 1. Jadi, bukannya skala dari 1 hingga 5, saya berskala dari 0.2 hingga 1.

Pelajaran 5: Paksi bukan kebenaran sejagat.

Paksi elemen disimpan selaras dengan sendirinya, bukan halaman. Melakukan putaran 90 darjah sebelum translateX mengubah arah translateX dari mendatar ke menegak. Tidak ada orang di sini tetapi kita manusia ... 2, saya membalikkan zombi menggunakan putaran 180 darjah. Tetapi nilai Y positif akan memindahkan ninjas ke bahagian atas dan nilai negatif akan memindahkannya ke bahagian bawah (berbanding dengan normal). Perhatikan bagaimana putaran mempengaruhi transformasi berikutnya.

Pelajaran 6. Mengurangkan animasi kompleks ke dalam unsur -unsur sepusat untuk penyesuaian mudah.

Apabila mencipta animasi kompleks yang bergerak dalam pelbagai arah, menambah pembungkus div atau unsur induk dan menghidupkan setiap elemen secara berasingan dapat mengurangkan konflik transformasi dan menghalang anda daripada terhempas.

Sebagai contoh, dalam Kadet Angkasa, saya mempunyai tiga transformasi yang berbeza. Yang pertama ialah pergerakan angkasawan dan zombi. Yang kedua adalah pergerakan mendatar. Yang ketiga ialah putaran. Daripada cuba melakukan segala -galanya dalam satu transformasi, saya menambah dua elemen pembalut dan menghidupkannya pada setiap elemen (saya juga menyelamatkan rambut saya ... sekurang -kurangnya sebahagian daripadanya). Ini membantu mengelakkan isu paksi yang dibincangkan dalam pelajaran terdahulu, ketika saya berputar pada elemen paling dalam, dengan itu mengekalkan paksi unsur -unsur induk dan datuk neneknya.

Pelajaran 7: Transformasi SVG dan CSS adalah sama.

Sesetengah laluan, kumpulan, dan elemen SVG lain telah menentukan transformasi di atasnya. Ini mungkin disebabkan oleh algoritma pengoptimuman, atau mungkin cara perisian ilustrasi menghasilkan kod. Jika jalan, kumpulan, atau mana -mana elemen lain dalam SVG sudah mempunyai transformasi SVG, memadamkan transformasi itu menetapkan semula elemen, biasanya dengan perubahan tunggal dalam kedudukan atau saiz berbanding dengan lukisan yang lain.

Oleh kerana transformasi SVG dan CSS adalah sama, mana -mana CSS mengubah anda menggantikan transformasi SVG, yang bermaksud transformasi CSS anda akan bermula pada kedudukan atau saiz tunggal, bukan kedudukan atau saiz yang ditetapkan dalam SVG.

Anda boleh menyalin transformasi dari elemen SVG ke CSS dan menetapkannya ke kedudukan permulaan dalam CSS (mengemas kini pertama ke sintaks CSS). Anda kemudian boleh mengubah suai dalam animasi CSS.

Sebagai contoh, di pejabat pejabat saya bekerja uhhh, ya ..., lengan kanan atas Renberg yang paling utama (#ARM2 elemen) mempunyai transformasi dalam kod SVG asal.

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero" transform="translate(0 -343) scale(4 3.55)"></path>

Gerakkan transformasi ke CSS seperti berikut:

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero"></path>

 #arm2 {
 Transform: Terjemahan (0, -343px) Skala (4, 3.55);
}

... Saya kemudian boleh membuat animasi yang tidak secara tidak sengaja menetapkan semula kedudukan dan skala:

 .toggle-checkbox: diperiksa ~ .z #arm2 { 
 Animasi: 6s mudah dalam 0.15S Arm2move ke hadapan;
}

@keyframes arm2move {
 0%, 100% {
  Transform: Terjemahan (0, -343px) Skala (4, 3.55);
 }
 40%, 60% {
  Transform: Terjemahan (0, -403px) Skala (4, 3.55);
 }
 50% {
  Transform: Terjemahan (0, -408px) skala (4, 3.55);
 }
}

Proses ini lebih sukar apabila alat yang menghasilkan kod SVG cuba untuk "memudahkan" transformasi menjadi matriks. Walaupun anda boleh mencipta semula transformasi matriks dengan menyalinnya ke CSS, skala, berputar, atau panning dengan tepat seperti yang anda mahukan adalah tugas yang menakutkan.

Sebagai alternatif, anda boleh menggunakan terjemahan, putaran, dan skala untuk mencipta semula transformasi matriks, tetapi jika jalan itu rumit, kemungkinan anda dapat mencipta semula dalam masa tanpa mendapat masalah adalah rendah.

Pilihan terakhir dan paling mudah ialah menggunakan kumpulan ( ) Elemen membungkus tag. Tambah kelas atau ID untuk mendapatkan akses mudah ke CSS dan mengubah kumpulan itu sendiri, dengan itu memisahkan transformasi, seperti yang dibincangkan dalam pelajaran sebelumnya.

Pelajaran 8: Tetap waras ketika mengubah sebahagian daripada SVG

CSS transform-origin Property menggerakkan titik di mana transformasi berlaku. Jika anda cuba memutar tangan anda - seperti yang saya lakukan di Clubbin 'itu - animasi anda akan kelihatan lebih semula jadi jika anda memutar tangan anda dari pusat bahu anda, tetapi asal transformasi semulajadi jalan itu berada di sudut kiri atas. Gunakan transform-origin untuk membetulkannya untuk rasa yang lebih lancar, lebih semula jadi ... anda tahu bahawa seni piksel yang sangat semula jadi kelihatan ...

Apabila zooming, ia juga berguna untuk mengubah asalnya, seperti yang saya lakukan di oops matachioed, atau ketika berputar pergerakan mulut, seperti dagu dinosaur dalam super lazat. Jika anda tidak mengubah asalnya, transformasi akan menggunakan asal di sudut kiri atas elemen SVG.

Pelajaran 9: Animasi Sprite boleh responsif

Saya akhirnya melakukan banyak animasi sprite untuk projek ini (iaitu anda menggunakan pelbagai bingkai tambahan dan cepat beralih di antara mereka untuk membuat watak kelihatan bergerak). Saya mencipta imej dalam fail yang luas, menambahkannya sebagai imej latar belakang kepada unsur-unsur saiz bingkai tunggal, tetapkan imej latar belakang ke lebar imej menggunakan background-size , dan menyembunyikan limpahan. Kemudian, saya menggunakan background-position dan animasi step() untuk melangkah melalui imej; Sebagai contoh: Perayaan pasca apokaliptik.

Sebelum projek, saya telah menggunakan imej yang tidak fleksibel. Saya akan menurunkan sedikit supaya terdapat sekurang -kurangnya beberapa kesan responsif, tetapi saya tidak fikir anda boleh menjadikannya lebar yang benar -benar fleksibel. Walau bagaimanapun, jika anda menggunakan SVG sebagai imej latar belakang, anda boleh menggunakan unit Viewport untuk skala elemen sebagai perubahan saiz skrin. Satu -satunya masalah ialah lokasi latar belakang. Walau bagaimanapun, jika anda menggunakan unit Viewport untuk ini, ia akan tetap disegerakkan. Semak ini akhirnya, bersendirian dengan sandwic saya ....

Pelajaran 9a: Tetapkan saiz latar belakang imej menggunakan unit viewport semasa membuat animasi sprite responsif

Seperti yang saya pelajari dalam projek ini, menggunakan satu jenis unit hampir selalu boleh dilaksanakan. Pada mulanya, saya menggunakan peratusan untuk menetapkan saiz latar belakang sprite. Pengiraan adalah mudah (100% * (langkah 1)) dan berfungsi dengan baik dalam kebanyakan kes. Walau bagaimanapun, dalam animasi yang lebih panjang, penjejakan bingkai yang tepat boleh menjadi salah dan mungkin memaparkan bahagian -bahagian bingkai sprite yang salah. Masalahnya akan menjadi lebih teruk apabila lebih banyak bingkai ditambah kepada sprite.

Saya tidak pasti dengan tepat mengapa ini menyebabkan masalah ini, tetapi saya fikir ia disebabkan oleh kesilapan pembulatan yang terkumpul di atas panjang jadual sprite (jumlah anjakan meningkat apabila bilangan bingkai meningkat).

Dalam animasi terakhir saya, ia tidak berakhir sehingga zombie menyanyi, saya membiarkan dinosaur membuka mulut saya untuk mendedahkan nyanyian viking zombie (walaupun terdapat penembakan laser di latar belakang, dan tentu saja, menari, akordion bermain dan zombi yang dipecat dari meriam). Ya, saya tahu bagaimana untuk menjadi tuan rumah pesta ... pesta geek.

Dinosaur dan Viking adalah salah satu animasi elf terpanjang yang dibuat untuk projek itu. Walau bagaimanapun, apabila saya menggunakan peratusan untuk menetapkan saiz latar belakang, beberapa saiz penjejakan dalam kesilapan safari. Pada akhir animasi, sebahagian daripada hidung dinosaur dari bingkai yang berbeza kelihatan muncul di sebelah kanan, sementara bahagian hidung yang sama hilang di sebelah kiri.

Ini sangat sukar untuk didiagnosis kerana nampaknya berfungsi dengan baik di Chrome, dan saya fikir saya menetapkannya di Safari dan hanya melihat saiz skrin yang sedikit berbeza dan saya melihat sisihan bingkai lagi. Tetapi jika saya menggunakan unit yang konsisten - iaitu vw untuk background-size , lebar bingkai dan background-position - semuanya berfungsi dengan baik. Sekali lagi, ini datang untuk menggunakan unit yang konsisten!

Pelajaran 10: Jemput orang untuk mengambil bahagian dalam projek ini.

Walaupun saya banyak belajar dalam proses ini, saya menghabiskan sebahagian besar masa saya memukul dinding (sering sehingga dinding rosak atau kepala saya patah ... Saya tidak dapat memberitahu perbezaannya). Walaupun ini adalah kaedah, walaupun anda degil, anda akan mengalami sakit kepala. Jemput orang lain untuk mengambil bahagian dalam projek anda, sama ada ia mencari nasihat, menunjukkan tempat buta yang jelas yang anda rindukan, memberikan maklum balas, membantu projek itu, atau menggalakkan anda untuk terus menerus apabila anda merasakan skop terlalu besar.

Oleh itu, izinkan saya meletakkan pelajaran ini. Apa pendapat anda? Bagaimana anda menyekat zombi dengan animasi CSS? Projek apa yang akan anda lakukan yang terlalu besar untuk mencabar diri sendiri?

Atas ialah kandungan terperinci Pelajaran yang dipelajari dari enam puluh hari menganalisis semula zombi dengan CSS berkod tangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!