Bayangkan ini: anda menyertai projek baharu, menyelami pangkalan kod, dan dalam beberapa jam pertama, anda menemui sesuatu yang biasa mengecewakan. Tersebar di seluruh helaian gaya, anda menemui berbilang definisi @keyframes untuk animasi asas yang sama. Tiga kesan pudar masuk yang berbeza, dua atau tiga variasi slaid, segelintir animasi zum dan sekurang-kurangnya dua animasi putaran berbeza kerana, kenapa tidak? @keyframes nadi { daripada { skala: 1; } kepada { skala: 1.1; } }
@keyframes nadi lebih besar { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Jika senario ini terdengar biasa, anda tidak bersendirian. Dalam pengalaman saya merentasi pelbagai projek, salah satu kemenangan pantas yang paling konsisten yang boleh saya berikan ialah menyatukan dan menyeragamkan bingkai utama. Ia telah menjadi corak yang boleh dipercayai sehingga saya kini menantikan pembersihan ini sebagai salah satu tugas pertama saya pada mana-mana pangkalan kod baharu. Logik Disebalik Kekacauan Lebihan ini masuk akal apabila anda memikirkannya. Kita semua menggunakan animasi asas yang sama dalam kerja seharian kita: pudar, slaid, zum, putaran dan kesan biasa yang lain. Animasi ini agak mudah dan mudah untuk menyiapkan definisi @keyframes yang pantas untuk menyelesaikan kerja. Tanpa sistem animasi terpusat, pembangun secara semula jadi menulis bingkai utama ini dari awal, tidak menyedari bahawa animasi serupa sudah wujud di tempat lain dalam pangkalan kod. Ini adalah perkara biasa apabila bekerja dalam seni bina berasaskan komponen (yang kebanyakan kita lakukan hari ini), kerana pasukan sering bekerja secara selari merentasi bahagian aplikasi yang berlainan. Hasilnya? Animasi huru-hara. Masalah Kecil Isu yang paling jelas dengan pertindihan bingkai utama ialah masa pembangunan yang sia-sia dan pengagihan kod yang tidak perlu. Takrifan bingkai utama berbilang bermaksud berbilang tempat untuk dikemas kini apabila keperluan berubah. Perlu melaraskan masa animasi pudar anda? Anda perlu memburu setiap kejadian merentas pangkalan kod anda. Ingin menyeragamkan fungsi pelonggaran? Semoga berjaya mencari semua variasi. Pendaraban mata penyelenggaraan ini menjadikan kemas kini animasi yang mudah menjadi tugas yang memakan masa. Masalah Yang Lebih Besar Penduaan bingkai utama ini mewujudkan masalah yang lebih berbahaya yang tersembunyi di bawah permukaan: perangkap skop global. Walaupun semasa bekerja dengan seni bina berasaskan komponen, kerangka utama CSS sentiasa ditakrifkan dalam skop global. Ini bermakna semua bingkai utama digunakan untuk semua komponen. Sentiasa. Ya, animasi anda tidak semestinya menggunakan bingkai utama yang anda tentukan dalam komponen anda. Ia menggunakan bingkai utama terakhir yang sepadan dengan nama yang sama yang dimuatkan ke dalam skop global. Selagi semua bingkai utama anda adalah sama, ini mungkin kelihatan seperti isu kecil. Tetapi apabila anda ingin menyesuaikan animasi untuk kes penggunaan tertentu, anda menghadapi masalah, atau lebih teruk lagi, andalah yang menyebabkannya. Sama ada animasi anda tidak akan berfungsi kerana komponen lain dimuatkan selepas anda, menimpa bingkai kunci anda atau komponen anda dimuatkan lepas dan secara tidak sengaja mengubah tingkah laku animasi untuk setiap komponen lain menggunakan nama bingkai kunci itu, dan anda mungkin tidak menyedarinya. Berikut ialah contoh mudah yang menunjukkan masalah: .component-one { /* gaya komponen */ animasi: nadi 1s memudahkan masuk-keluar silih berganti; }
/* definisi @keyframes ini tidak akan berfungsi */ @keyframes nadi { daripada { skala: 1; } kepada { skala: 1.1; } }
/* kemudian dalam kod... */
.komponen-dua { /* gaya komponen */ animasi: nadi 1s memudahkan masuk-keluar tanpa had; }
/* bingkai utama ini akan digunakan untuk kedua-dua komponen */ @keyframes nadi { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1.2; } }
Kedua-dua komponen menggunakan nama animasi yang sama, tetapi definisi @keyframes kedua menimpa yang pertama. Kini kedua-dua komponen-satu dan komponen-dua akan menggunakan bingkai utama kedua, tanpa mengira komponen mana yang menentukan bingkai utama yang mana. Lihat Token Kerangka Kunci Pen - Demo 1 [bercabang] oleh Amit Sheen. Bahagian yang paling teruk? Ini selalunya berfungsi dengan sempurna dalam pembangunan tempatan tetapi pecah secara misteri dalam pengeluaran apabila proses binaan mengubah susunan pemuatan helaian gaya anda. Anda berakhir dengan animasi yang berkelakuan berbeza bergantung pada komponen yang dimuatkan dan dalam urutan apa. Penyelesaian: Kerangka Kunci Bersatu Jawapan kepada huru-hara ini sangat mudah: bingkai kunci dinamik yang dipratentukan disimpan dalam helaian gaya dikongsi. Daripada membiarkan setiap komponen mentakrifkan animasinya sendiri, kami mencipta bingkai utama terpusat yang didokumentasikan dengan baik, mudah untukdigunakan, boleh diselenggara dan disesuaikan dengan keperluan khusus projek anda. Anggap ia sebagai token bingkai utama. Sama seperti kita menggunakan token untuk warna dan jarak, dan ramai di antara kita sudah menggunakan token untuk sifat animasi, seperti tempoh dan fungsi pelonggaran, mengapa tidak menggunakan token untuk bingkai utama juga? Pendekatan ini boleh disepadukan secara semula jadi dengan mana-mana aliran kerja token reka bentuk semasa yang anda gunakan, sambil menyelesaikan masalah kecil (penduaan kod) dan masalah yang lebih besar (konflik skop global) sekali gus. Ideanya adalah mudah: cipta satu sumber kebenaran untuk semua animasi biasa kami. Lembaran gaya kongsi ini mengandungi bingkai kunci yang direka dengan teliti yang merangkumi corak animasi yang sebenarnya digunakan oleh projek kami. Tidak perlu meneka sama ada animasi pudar sudah wujud di suatu tempat dalam pangkalan kod kami. Tiada lagi menimpa animasi daripada komponen lain secara tidak sengaja. Tetapi inilah kuncinya: ini bukan sekadar animasi salin-tampal statik. Mereka direka bentuk untuk menjadi dinamik dan boleh disesuaikan melalui sifat tersuai CSS, membolehkan kami mengekalkan konsistensi sambil masih mempunyai fleksibiliti untuk menyesuaikan animasi kepada kes penggunaan tertentu, seperti jika anda memerlukan animasi "nadi" yang lebih besar sedikit di satu tempat. Membina Token Kerangka Utama Pertama Salah satu buah-buahan rendah yang pertama yang perlu kita tangani ialah animasi "fade-in". Dalam salah satu projek saya baru-baru ini, saya menemui lebih daripada sedozen definisi pudar dalam yang berasingan, dan ya, semuanya hanya menghidupkan kelegapan dari 0 hingga 1. Jadi, mari kita cipta helaian gaya baharu, panggil ia kf-tokens.css, importnya ke dalam projek kami dan letakkan bingkai utama kami dengan ulasan yang betul di dalamnya. /* keyframes-tokens.css */
/* * Fade In - animasi masuk fade * Penggunaan: animasi: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { daripada { kelegapan: 0; } kepada { kelegapan: 1; } }
Pengisytiharan @keyframes tunggal ini menggantikan semua animasi pudar masuk yang bertaburan merentasi pangkalan kod kami. Bersih, ringkas dan boleh digunakan secara global. Dan sekarang setelah kami menetapkan token ini, kami boleh menggunakannya daripada mana-mana komponen sepanjang projek kami: .modal { animasi: kf-fade-in 0.3s ease-out; }
.tooltip { animasi: kf-fade-in 0.2s kemudahan-in-out; }
.pemberitahuan { animasi: kf-fade-in 0.5s ease-out; }
Lihat Token Kerangka Kunci Pen - Demo 2 [bercabang] oleh Amit Sheen. Nota: Kami menggunakan awalan kf dalam semua nama @keyframes kami. Awalan ini berfungsi sebagai ruang nama yang menghalang percanggahan penamaan dengan animasi sedia ada dalam projek dan menjelaskan dengan segera bahawa bingkai utama ini datang daripada fail token bingkai utama kami. Membuat Slaid Dinamik Kerangka kunci kf-fade-in berfungsi dengan baik kerana ia ringkas dan terdapat sedikit ruang untuk mengacaukan keadaan. Walau bagaimanapun, dalam animasi lain, kita perlu menjadi lebih dinamik, dan di sini kita boleh memanfaatkan kuasa besar sifat tersuai CSS. Di sinilah token bingkai utama benar-benar bersinar berbanding animasi statik bertaburan. Mari kita ambil senario biasa: animasi "slaid masuk". Tetapi meluncur dari mana? 100px dari kanan? 50% dari kiri? Sekiranya ia masuk dari bahagian atas skrin? Atau mungkin terapung dari bawah? Begitu banyak kemungkinan, tetapi bukannya mencipta bingkai utama yang berasingan untuk setiap arah dan setiap variasi, kami boleh membina satu token fleksibel yang menyesuaikan diri dengan semua senario: /* * Slaid Dalam - animasi slaid berarah * Gunakan --kf-slide-from untuk mengawal arah * Lalai: slaid masuk dari kiri (-100%) * Penggunaan: * animasi: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // slaid dari kiri * --kf-slide-from: 100px 0; // slaid dari kanan * --kf-slide-from: 0 -50px; // slaid dari atas */
@keyframes kf-slide-in { daripada { terjemah: var(--kf-slide-from, -100% 0); } kepada { terjemah: 0 0; } }
Kini kita boleh menggunakan token @keyframes tunggal ini untuk sebarang arah slaid hanya dengan menukar --kf-slide-from sifat tersuai: .bar sisi { animasi: kf-slide-in 0.3s ease-out; /* Menggunakan nilai lalai: slaid dari kiri */ }
.pemberitahuan { animasi: kf-slide-in 0.4s ease-out; --kf-slaid-dari: 0 -50px; /* slaid dari atas */ }
.modal { animasi: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slaid-dari: 50px 50px; /* slaid dari bawah-kanan */ }
Pendekatan ini memberi kita fleksibiliti yang luar biasa sambil mengekalkan konsistensi. Satu pengisytiharan kerangka utama, kemungkinan yang tidak terhingga. Lihat Token Kerangka Kunci Pen - Demo 3 [bercabang] oleh Amit Sheen. Dan jika kami mahu menjadikan animasi kami lebih fleksibel, membenarkan kesan "keluar slaid" juga, kami bolehcuma tambahkan --kf-slide-to sifat tersuai, serupa dengan apa yang akan kita lihat dalam bahagian seterusnya. Bingkai Kekunci Zum Dwiarah Satu lagi animasi biasa yang menjadi pendua merentas projek ialah kesan "zum". Sama ada skala kecil untuk mesej roti bakar, zum masuk dramatik untuk modal atau kesan skala kecil untuk tajuk, animasi zum ada di mana-mana. Daripada mencipta bingkai utama yang berasingan untuk setiap nilai skala, mari bina satu set bingkai kunci kf-zoom yang fleksibel:
/* * Zum - animasi skala * Gunakan --kf-zoom-from dan --kf-zoom-to untuk mengawal nilai skala * Lalai: zum daripada 80% kepada 100% (0.8 hingga 1) * Penggunaan: * animasi: kf-zoom 0.2s ease-out; * --kf-zoom-dari: 0.5; --kf-zoom-ke: 1; // zum dari 50% hingga 100% * --kf-zoom-dari: 1; --kf-zoom-ke: 0; // zum daripada 100% kepada 0% * --kf-zoom-dari: 1; --kf-zoom-ke: 1.1; // zum daripada 100% kepada 110% */
@keyframes kf-zoom { daripada { skala: var(--kf-zoom-daripada, 0.8); } kepada { skala: var(--kf-zoom-to, 1); } }
Dengan satu definisi, kami boleh mencapai sebarang variasi zum yang kami perlukan: .toast { animasi: kf-slide-in 0.2s, kf-zoom 0.4s pelonggaran; --kf-slaid-dari: 0 100%; /* slaid dari atas */ /* Menggunakan zum lalai: skala dari 80% hingga 100% */ }
.modal { animasi: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-dari: 0; /* zum dramatik dari 0% hingga 100% */ }
.heading { animasi: kf-fade-in 2s, kf-zoom 2s kemudahan masuk; --kf-zoom-dari: 1.2; --kf-zum-ke: 0.8; /* skala perlahan turun */ }
Lalai 0.8 (80%) berfungsi dengan sempurna untuk kebanyakan elemen UI, seperti mesej dan kad roti bakar, sementara masih mudah disesuaikan untuk kes khas. Lihat Token Kerangka Kunci Pen - Demo 4 [bercabang] oleh Amit Sheen. Anda mungkin perasan sesuatu yang menarik dalam contoh terkini: kami telah menggabungkan animasi. Salah satu kelebihan utama bekerja dengan token @keyframes ialah ia direka bentuk untuk berintegrasi dengan lancar antara satu sama lain. Komposisi licin ini adalah disengajakan, bukan sengaja. Kami akan membincangkan komposisi animasi dengan lebih terperinci kemudian, termasuk di mana ia boleh menjadi masalah, tetapi kebanyakan kombinasi adalah mudah dan mudah untuk dilaksanakan. Nota: Semasa menulis artikel ini, dan mungkin kerana menulisnya, saya mendapati diri saya memikirkan semula keseluruhan idea animasi masuk. Dengan semua kemajuan terkini dalam CSS, adakah kita masih memerlukannya sama sekali? Nasib baik, Adam Argyle meneroka soalan yang sama dan menyatakannya dengan cemerlang dalam blognya. Ini tidak bercanggah dengan apa yang ditulis di sini, tetapi ia memberikan pendekatan yang patut dipertimbangkan, terutamanya jika projek anda sangat bergantung pada animasi masuk. Animasi Berterusan Walaupun animasi masuk, seperti "pudar", "slaid" dan "zum" berlaku sekali dan kemudian berhenti, animasi berterusan berpusing selama-lamanya untuk menarik perhatian atau menunjukkan aktiviti yang sedang berjalan. Dua animasi berterusan yang paling biasa yang saya temui ialah "pusing" (untuk penunjuk pemuatan) dan "nadi" (untuk menyerlahkan elemen penting). Animasi ini memberikan cabaran unik apabila ia datang untuk mencipta token bingkai utama. Tidak seperti animasi masuk yang biasanya pergi dari satu keadaan ke keadaan lain, animasi berterusan perlu sangat disesuaikan dalam corak tingkah lakunya. Doktor Spin Setiap projek nampaknya menggunakan berbilang animasi putaran. Ada yang berputar mengikut arah jam, yang lain mengikut lawan jam. Ada yang melakukan satu putaran 360 darjah, yang lain melakukan beberapa pusingan untuk kesan yang lebih pantas. Daripada mencipta bingkai utama yang berasingan untuk setiap variasi, mari kita bina satu putaran fleksibel yang mengendalikan semua senario:
/* * Putaran - animasi putaran * Gunakan --kf-spin-from dan --kf-spin-to untuk mengawal julat putaran * Gunakan --kf-spin-turns untuk mengawal jumlah putaran * Lalai: berputar dari 0deg hingga 360deg (1 putaran penuh) * Penggunaan: * animasi: kf-spin 1s linear tak terhingga; * --kf-pusing-pusing: 2; // 2 putaran penuh * --kf-spin-dari: 0deg; --kf-spin-ke: 180deg; // separuh putaran * --kf-spin-dari: 0deg; --kf-spin-ke: -360deg; // lawan jam */
@keyframes kf-spin { daripada { putar: var(--kf-spin-daripada, 0deg); } kepada { putar: calc(var(--kf-spin-dari, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Kini kita boleh mencipta sebarang variasi putaran yang kita suka:
.loading-spinner { animasi: kf-spin 1s linear tak terhingga; /* Menggunakan lalai: berputar dari 0deg hingga 360deg */ }
.fast-loader { animasi: kf-spin 1.2s mudah-masuk-keluar silih berganti; --kf-pusing-pusing: 3; /* 3 putaran penuh untuk setiap arah setiap kitaran*/ }
.step-reverse { animasi: kf-spin 1.5s langkah(8) tak terhingga; --kf-spin-ke: -360deg; /* lawan jam */ }
.halus-goyang { animasi: kf-spin 2s mudah-masuk-keluar silih berganti; --kf-spin-dari: -16deg; --kf-spin-kepada: 32deg; /* goyang 36 darjah: antara -18deg dan +18deg */ }
Lihat Token Kerangka Kunci Pen - Demo 5 [bercabang] oleh Amit Sheen. Keindahan pendekatan ini ialah kerangka utama yang sama berfungsi untuk memuatkan pemutar, ikon berputar, kesan goyang dan juga animasi berbilang pusingan yang kompleks. Paradoks Nadi Animasi nadi adalah lebih rumit kerana ia boleh "menimbulkan" sifat yang berbeza. Beberapa denyutan skala, yang lain berdenyut kelegapan, dan beberapa sifat warna denyut seperti kecerahan atau ketepuan. Daripada membuat bingkai utama yang berasingan untuk setiap sifat, kami boleh mencipta bingkai utama yang berfungsi dengan mana-mana harta CSS. Berikut ialah contoh kerangka utama nadi dengan pilihan skala dan kelegapan:
/* * Denyutan - animasi berdenyut * Gunakan --kf-pulse-scale-from dan --kf-pulse-scale-to untuk mengawal julat skala * Gunakan --kf-pulse-opacity-from dan --kf-pulse-opacity-to untuk mengawal julat kelegapan * Lalai: tiada nadi (semua nilai 1) * Penggunaan: * animasi: kf-nadi 2s mudah-masuk-keluar silih berganti; * --kf-skala-nadi-dari: 0.95; --kf-skala-nadi-kepada: 1.05; // nadi skala * --kf-nadi-kelegapan-daripada: 0.7; --kf-nadi-kelegapan-kepada: 1; // nadi kelegapan */
@keyframes kf-pulse { daripada { skala: var(--kf-pulse-scale-from, 1); kelegapan: var(--kf-nadi-kelegapan-daripada, 1); } kepada { skala: var(--kf-pulse-scale-to, 1); kelegapan: var(--kf-pulse-opacity-to, 1); } }
Ini mencipta nadi fleksibel yang boleh menghidupkan berbilang sifat: .seruan untuk bertindak { animasi: kf-nadi 0.6s silih berganti; --kf-nadi-kelegapan-daripada: 0.5; /* nadi kelegapan */ }
.notification-dot { animasi: kf-nadi 0.6s mudah-masuk-keluar silih berganti; --kf-skala-nadi-dari: 0.9; --kf-skala-nadi-kepada: 1.1; /* nadi skala */ }
.text-highlight { animasi: kf-pulse 1.5s ease-out tak terhingga; --kf-skala-nadi-dari: 0.8; --kf-nadi-kelegapan-daripada: 0.2; /* skala dan nadi kelegapan */ }
Lihat Token Kerangka Kunci Pen - Demo 6 [bercabang] oleh Amit Sheen. Kerangka utama nadi kf tunggal ini boleh mengendalikan segala-galanya daripada tarikan perhatian yang halus hingga ke sorotan dramatik, sambil mudah untuk disesuaikan. Pelonggaran Lanjutan Salah satu perkara hebat tentang menggunakan token bingkai utama ialah betapa mudahnya untuk mengembangkan pustaka animasi kami dan memberikan kesan yang kebanyakan pembangun tidak akan peduli untuk menulis dari awal, seperti anjal atau lantunan. Berikut ialah contoh token bingkai utama "lantunan" mudah yang menggunakan sifat tersuai --kf-lantun-daripada untuk mengawal ketinggian lompatan. /* * Lantunan - animasi masuk melantun * Gunakan --kf-bounce-from untuk mengawal ketinggian lompatan * Lalai: melompat dari 100vh (luar skrin) * Penggunaan: * animasi: kf-bounce 3s kemudahan masuk; * --kf-lantun-daripada: 200px; // melompat dari ketinggian 200px */
@keyframes kf-bounce { 0% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -1); }
34% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.4); }
55% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.2); }
72% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.1); }
85% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.05); }
94% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.025); }
99% { terjemah: 0 calc(var(--kf-lantun-daripada, 100vj) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { terjemah: 0 0; animasi-fungsi-masa: ease-out; } }
Animasi seperti "anjal" agak rumit kerana pengiraan di dalam bingkai utama. Kita perlu mentakrifkan --kf-elastik-daripada-X dan --kf-elastik-daripada-Y secara berasingan (kedua-duanya adalah pilihan), dan bersama-sama mereka membenarkan kami mencipta pintu masuk anjal dari mana-mana titik pada skrin.
/* * Anjal Dalam - animasi pintu masuk anjal * Gunakan --kf-elastic-from-X dan --kf-elastic-from-Y untuk mengawal kedudukan mula * Lalai: masuk dari tengah atas (0, -100vh) * Penggunaan: * animasi: kf-anjal-dalam-2s memudahkan-masuk-keluar kedua-duanya; * --kf-anjal-dari-X: -50px; * --kf-anjal-daripada-Y: -200px; // masuk dari (-50px, -200px) */
@keyframes kf-elastic-in { 0% { terjemah: calc(var(--kf-elastik-daripada-X, -50vw) * 1) calc(var(--kf-elastik-dari-Y, 0px) * 1); }
16% { terjemah: calc(var(--kf-anjal-daripada-X, -50vw) * -0.3227) calc(var(--kf-anjal-daripada-Y, 0px) * -0.3227); }
28% { terjemah: calc(var(--kf-elastik-daripada-X, -50vw) * 0.1312)calc(var(--kf-elastik-daripada-Y, 0px) * 0.1312); }
44% { terjemah: calc(var(--kf-anjal-daripada-X, -50vw) * -0.0463) calc(var(--kf-anjal-daripada-Y, 0px) * -0.0463); }
59% { terjemah: calc(var(--kf-anjal-daripada-X, -50vw) * 0.0164) calc(var(--kf-anjal-daripada-Y, 0px) * 0.0164); }
73% { terjemah: calc(var(--kf-anjal-daripada-X, -50vw) * -0.0058) calc(var(--kf-anjal-daripada-Y, 0px) * -0.0058); }
88% { terjemah: calc(var(--kf-anjal-daripada-X, -50vw) * 0.0020) calc(var(--kf-anjal-daripada-Y, 0px) * 0.0020); }
100% { terjemah: 0 0; } }
Pendekatan ini memudahkan penggunaan semula dan menyesuaikan bingkai utama lanjutan merentas projek kami, hanya dengan menukar satu sifat tersuai.
.lantun-dan-zum { animasi: kf-bounce 3s kemudahan masuk, kf-zoom 3s linear; --kf-zoom-dari: 0; }
.melantun dan slaid { animasi-komposisi: tambah; /* Kedua-dua animasi menggunakan terjemah */ animasi: kf-bounce 3s kemudahan masuk, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.elastik-dalam { animasi: kf-anjal-dalam-2s memudahkan-masuk-keluar kedua-duanya; }
Lihat Token Kerangka Kunci Pen - Demo 7 [bercabang] oleh Amit Sheen. Sehingga tahap ini, kami telah melihat cara kami boleh menyatukan bingkai utama dengan cara yang bijak dan cekap. Sudah tentu, anda mungkin ingin mengubah suai perkara agar lebih sesuai dengan keperluan projek anda, tetapi kami telah merangkumi contoh beberapa animasi biasa dan kes penggunaan harian. Dan dengan adanya token bingkai utama ini, kami kini mempunyai blok binaan yang berkuasa untuk mencipta animasi yang konsisten dan boleh diselenggara merentas keseluruhan projek. Tiada lagi bingkai utama pendua, tiada lagi konflik skop global. Hanya cara yang bersih dan mudah untuk mengendalikan semua keperluan animasi kami. Tetapi persoalan sebenar ialah: Bagaimanakah kita menyusun blok binaan ini bersama-sama? Menyatukan Semuanya Kami telah melihat bahawa menggabungkan token kerangka utama asas adalah mudah. Kami tidak memerlukan sesuatu yang istimewa tetapi untuk menentukan animasi pertama, menentukan yang kedua, tetapkan pembolehubah mengikut keperluan, dan itu sahaja. /* Pudar masuk + slaid masuk */ .toast { animasi: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* Zum masuk + pudar masuk */ .modal { animasi: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-dari: 0.7; --kf-zoom-ke: 1; }
/* Luncurkan masuk + nadi */ .pemberitahuan { animasi: kf-slide-in 0.5s, kf-nadi 1.2s mudah-masuk-keluar silih berganti; --kf-slide-from: -100px 0; --kf-skala-nadi-dari: 0.95; --kf-skala-nadi-kepada: 1.05; }
Gabungan ini berfungsi dengan baik kerana setiap animasi menyasarkan sifat yang berbeza: kelegapan, mengubah (terjemah/skala), dsb. Tetapi kadangkala terdapat konflik dan kita perlu tahu sebab dan cara menanganinya. Apabila dua animasi cuba menghidupkan sifat yang sama — contohnya, kedua-dua skala animasi atau kedua-dua kelegapan animasi — hasilnya tidak akan seperti yang anda jangkakan. Secara lalai, hanya satu daripada animasi yang benar-benar digunakan pada sifat itu, iaitu yang terakhir dalam senarai animasi. Ini adalah had cara CSS mengendalikan berbilang animasi pada harta yang sama. Sebagai contoh, ini tidak akan berfungsi seperti yang dimaksudkan kerana hanya animasi kf-pulse akan digunakan. .bad-combo { animasi: kf-zoom 0.5s ke hadapan, kf-nadi 1.2s silih berganti tak terhingga; --kf-zoom-dari: 0.5; --kf-zoom-ke: 1.2; --kf-skala-nadi-dari: 0.8; --kf-skala-nadi-kepada: 1.1; }
Penambahan Animasi Cara paling mudah dan paling langsung untuk mengendalikan berbilang animasi yang mempengaruhi sifat yang sama ialah menggunakan sifat komposisi animasi. Dalam contoh terakhir di atas, animasi kf-pulse menggantikan animasi kf-zoom, jadi kami tidak akan melihat zum awal dan tidak akan mendapat skala yang dijangkakan kepada 1.2. Dengan menetapkan komposisi animasi untuk ditambah, kami memberitahu penyemak imbas untuk menggabungkan kedua-dua animasi. Ini memberikan kita hasil yang kita inginkan. .komponen-dua { animasi-komposisi: tambah; }
Lihat Token Kerangka Kunci Pen - Demo 8 [bercabang] oleh Amit Sheen. Pendekatan ini berfungsi dengan baik untuk kebanyakan kes di mana kita ingin menggabungkan kesan pada harta yang sama. Ia juga berguna apabila kita perlu menggabungkan animasi dengan nilai sifat statik. Sebagai contoh, jika kita mempunyai elemen yang menggunakan sifat terjemah untuk meletakkannya tepat di tempat yang kita mahu, dan kemudian kita ingin menganimasikannya dengan bingkai utama kf-slide-in, kita akan mendapat lompatan yang boleh dilihat dengan buruk tanpa komposisi animasi. Lihat Token Kerangka Kunci Pen - Demo 9 [bercabang] oleh Amit Sheen. Dengan set komposisi animasi untuk ditambah, animasi digabungkan dengan yang sedia adaberubah, jadi elemen kekal pada tempatnya dan bernyawa seperti yang diharapkan. Animasi Stagger Cara lain untuk mengendalikan berbilang animasi adalah dengan "mengejutkannya" — iaitu, mulakan animasi kedua sedikit selepas yang pertama selesai. Ia bukan penyelesaian yang berfungsi untuk setiap kes, tetapi ia berguna apabila kita mempunyai animasi masuk diikuti dengan animasi berterusan. /* pudar masuk + nadi kelegapan */ .pemberitahuan { animasi: kf-fade-in 2s ease-out, kf-nadi 0.5s 2s mudah-masuk-keluar silih berganti; --kf-nadi-kelegapan-kepada: 0.5; }
Lihat Token Kerangka Kunci Pen - Demo 10 [bercabang] oleh Amit Sheen. Urusan Pesanan Sebahagian besar animasi yang kami gunakan menggunakan sifat transform. Dalam kebanyakan kes, ini lebih mudah. Ia juga mempunyai kelebihan prestasi kerana animasi transformasi boleh dipercepatkan GPU. Tetapi jika kita menggunakan transformasi, kita perlu menerima bahawa susunan kita melakukan transformasi adalah penting. banyak. Dalam bingkai utama kami setakat ini, kami telah menggunakan perubahan individu. Mengikut spesifikasi, ini sentiasa digunakan dalam susunan tetap: pertama, elemen itu diterjemahkan, kemudian diputar, kemudian skala. Ini masuk akal dan itulah yang diharapkan oleh kebanyakan kita. Walau bagaimanapun, jika kita menggunakan sifat transformasi, susunan fungsi ditulis ialah susunan ia digunakan. Dalam kes ini, jika kita menggerakkan sesuatu 100 piksel pada paksi-X dan kemudian memutarkannya sebanyak 45 darjah, ia tidak sama seperti mula-mula memutarkannya sebanyak 45 darjah dan kemudian mengalihkannya 100 piksel. /* Segi empat merah jambu: Terjemah dahulu, kemudian putar */ .contoh-satu { transform: translateX(100px) rotate(45deg); }
/* Petak hijau: Putar dahulu, kemudian terjemah */ .contoh-dua { transform: rotate(45deg) translateX(100px); }
Lihat Token Kerangka Kunci Pen - Demo 11 [bercabang] oleh Amit Sheen. Tetapi mengikut susunan transformasi, semua perubahan individu — semua yang kami gunakan untuk token bingkai utama — berlaku sebelum fungsi transformasi. Ini bermakna apa sahaja yang anda tetapkan dalam sifat transformasi akan berlaku selepas animasi. Tetapi jika anda menetapkan, sebagai contoh, menterjemah bersama-sama kerangka utama kf-spin, terjemahan akan berlaku sebelum animasi. Masih keliru?! Ini membawa kepada situasi di mana nilai statik boleh menyebabkan hasil yang berbeza untuk animasi yang sama, seperti dalam kes berikut:
/* Animasi biasa untuk kedua-dua pemutar */ .pemutar { animasi: kf-spin 1s linear tak terhingga; }
/* Pemintal merah jambu: terjemah sebelum diputar (transformasi individu) */ .spinner-pink { terjemah: 100% 50%; }
/* Pemutar hijau: putar kemudian terjemah (tertib fungsi) */ .spinner-green { mengubah: terjemah(100%, 50%); }
Lihat Token Kerangka Kunci Pen - Demo 12 [bercabang] oleh Amit Sheen. Anda boleh melihat bahawa pemutar pertama (merah jambu) mendapat terjemahan yang berlaku sebelum putaran kf-spin, jadi ia mula-mula bergerak ke tempatnya dan kemudian berputar. Pemutar kedua (hijau) mendapat fungsi translate() yang berlaku selepas perubahan individu, jadi elemen pertama berputar, kemudian bergerak relatif kepada sudut semasanya, dan kita mendapat kesan orbit yang luas itu. Tidak, ini bukan pepijat. Ia hanyalah satu daripada perkara yang perlu kita ketahui tentang CSS dan perlu diingat apabila bekerja dengan berbilang animasi atau berbilang perubahan. Jika perlu, anda juga boleh membuat set tambahan kf-spin-alt keyframes yang memutar elemen menggunakan fungsi rotate(). Pergerakan Dikurangkan Dan semasa kita bercakap tentang kerangka kunci alternatif, kita tidak boleh mengabaikan pilihan "tiada animasi". Salah satu kelebihan terbesar menggunakan token bingkai utama ialah kebolehcapaian boleh dipanggang, dan ia sebenarnya agak mudah dilakukan. Dengan mereka bentuk bingkai utama kami dengan mengambil kira kebolehaksesan, kami boleh memastikan bahawa pengguna yang lebih suka pergerakan yang dikurangkan mendapat pengalaman yang lebih lancar dan kurang mengganggu, tanpa kerja tambahan atau pertindihan kod. Maksud tepat "Gerakan Berkurangan" boleh berubah sedikit dari satu animasi ke animasi yang lain, dan dari projek ke projek, tetapi berikut ialah beberapa perkara penting yang perlu diingat: Meredamkan Bingkai Utama Walaupun sesetengah animasi boleh dilembutkan atau diperlahankan, terdapat yang lain yang akan hilang sepenuhnya apabila gerakan yang dikurangkan diminta. Animasi nadi adalah contoh yang baik. Untuk memastikan animasi ini tidak berjalan dalam mod gerakan yang dikurangkan, kami hanya boleh membungkusnya dalam pertanyaan media yang sesuai.
@media ( prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { daripada { skala: var(--kf-pulse-scale-from, 1); kelegapan: var(--kf-nadi-kelegapan-daripada, 1); } kepada { skala: var(--kf-pulse-scale-to, 1); kelegapan:var(--kf-pulse-opacity-to, 1); } } }
Ini memastikan bahawa pengguna yang telah menetapkan prefers-reduced-motion untuk mengurangkan tidak akan melihat animasi dan akan mendapat pengalaman yang sepadan dengan pilihan mereka. Masuk Segera Terdapat beberapa bingkai utama yang tidak boleh kami alih keluar begitu sahaja, seperti animasi masuk. Nilai mesti berubah, mesti menghidupkan; jika tidak, elemen itu tidak akan mempunyai nilai yang betul. Tetapi dalam gerakan yang dikurangkan, peralihan ini daripada nilai awal harus segera. Untuk mencapai matlamat ini, kami akan menentukan set bingkai utama tambahan yang nilainya melonjak serta-merta ke keadaan akhir. Ini menjadi bingkai utama lalai kami. Kemudian, kami akan menambah bingkai utama biasa di dalam pertanyaan media untuk pilihan-dikurangkan-gerakan ditetapkan kepada tiada keutamaan, sama seperti dalam contoh sebelumnya. /* pop masuk serta-merta untuk mengurangkan gerakan */ @keyframes kf-zoom { daripada, kepada { skala: var(--kf-zoom-to, 1); } }
@media ( prefers-reduced-motion: no-preference) { /* Bingkai kekunci zum asal */ @keyframes kf-zoom { daripada { skala: var(--kf-zoom-daripada, 0.8); } kepada { skala: var(--kf-zoom-to, 1); } } }
Dengan cara ini, pengguna yang lebih suka gerakan yang dikurangkan akan melihat elemen muncul serta-merta dalam keadaan terakhirnya, manakala orang lain mendapat peralihan animasi. Pendekatan Lembut Terdapat kes di mana kita mahu mengekalkan beberapa pergerakan, tetapi lebih lembut dan lebih tenang daripada animasi asal. Sebagai contoh, kita boleh menggantikan pintu masuk lantunan dengan fade-in yang lembut.
@keyframes kf-bounce { /* Fade-in lembut untuk gerakan berkurangan */ }
@media ( prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Bingkai utama lantunan asal */ } }
Kini, pengguna dengan gerakan dikurangkan didayakan masih mendapat deria penampilan, tetapi tanpa pergerakan lantunan atau animasi anjal yang sengit. Dengan adanya blok binaan, persoalan seterusnya ialah bagaimana menjadikannya sebahagian daripada aliran kerja sebenar. Menulis bingkai kunci yang fleksibel adalah satu perkara, tetapi menjadikannya boleh dipercayai dalam projek besar memerlukan beberapa strategi yang saya perlu pelajari dengan cara yang sukar. Strategi Pelaksanaan & Amalan Terbaik Sebaik sahaja kami mempunyai perpustakaan token bingkai utama yang kukuh, cabaran sebenar ialah cara membawanya ke dalam kerja harian.
Godaan adalah untuk menggugurkan semua bingkai utama dalam sekali gus dan mengisytiharkan masalah selesai, tetapi dalam praktiknya saya telah mendapati bahawa hasil terbaik datang daripada penggunaan secara beransur-ansur. Mulakan dengan animasi yang paling biasa, seperti pudar atau slaid. Ini adalah kemenangan mudah yang menunjukkan nilai serta-merta tanpa memerlukan penulisan semula yang besar. Penamaan adalah satu lagi perkara yang patut diberi perhatian. Awalan atau ruang nama yang konsisten menjelaskan animasi mana yang merupakan token dan yang mana satu kali tempatan. Ia juga menghalang perlanggaran tidak sengaja dan membantu ahli pasukan baharu mengenali sistem yang dikongsi sepintas lalu. Dokumentasi adalah sama pentingnya dengan kod itu sendiri. Malah ulasan pendek di atas setiap token bingkai utama boleh menjimatkan jam meneka kemudian. Pembangun seharusnya boleh membuka fail token, mengimbas kesan yang mereka perlukan dan menyalin corak penggunaan terus ke dalam komponennya. Fleksibiliti adalah yang menjadikan pendekatan ini berbaloi dengan usaha. Dengan mendedahkan sifat tersuai yang wajar, kami memberi ruang kepada pasukan untuk menyesuaikan animasi tanpa melanggar sistem. Pada masa yang sama, cuba untuk tidak terlalu rumit. Sediakan tombol yang penting dan pastikan yang lain berpandangan. Akhir sekali, ingat kebolehaksesan. Tidak setiap animasi memerlukan alternatif gerakan yang dikurangkan, tetapi banyak yang melakukannya. Memasak dalam pelarasan ini lebih awal bermakna kami tidak perlu mengubah suainya kemudian, dan ini menunjukkan tahap penjagaan yang pengguna kami akan perhatikan walaupun mereka tidak pernah menyebutnya.
Mengikut pengalaman saya, menganggap token bingkai utama sebagai sebahagian daripada aliran kerja token reka bentuk kami adalah perkara yang membuatkan token tersebut melekat. Sebaik sahaja mereka berada di tempatnya, mereka berhenti berasa seperti kesan khas dan menjadi sebahagian daripada bahasa reka bentuk, lanjutan semula jadi tentang cara produk bergerak dan bertindak balas. Membungkus Animasi boleh menjadi salah satu bahagian yang paling menggembirakan dalam membina antara muka, tetapi tanpa struktur, ia juga boleh menjadi salah satu sumber kekecewaan terbesar. Dengan menganggap bingkai utama sebagai token, anda mengambil sesuatu yang biasanya tidak kemas dan sukar untuk diurus dan mengubahnya menjadi sistem yang jelas dan boleh diramal. Nilai sebenar bukan hanya dalam menyimpan beberapa baris kod. Dengan keyakinan bahawa apabila anda menggunakan pudar, slaid, zum atau putaran, anda tahu dengan tepat bagaimana ia akan bertindak merentas projek. Ia adalah dalam fleksibiliti yang datang dari sifat tersuai tanpa kekacauan variasi yang tidak berkesudahan. Dan ia adalah dalam kebolehcapaian yang dibina ke dalam asas dan bukannya ditambah sebagaisesuatu yang difikirkan semula. Saya telah melihat idea ini berfungsi dalam pasukan yang berbeza dan pangkalan kod yang berbeza, dan coraknya sentiasa sama. Sebaik sahaja token tersedia, bingkai utama berhenti menjadi koleksi helah yang berselerak dan menjadi sebahagian daripada bahasa reka bentuk. Mereka menjadikan produk berasa lebih disengajakan, lebih konsisten dan lebih hidup. Jika anda mengambil satu perkara daripada artikel ini, biarkan begini: animasi berhak mendapat penjagaan dan struktur yang sama yang telah kami berikan kepada warna, tipografi dan jarak. Pelaburan kecil dalam token bingkai utama membuahkan hasil setiap kali antara muka anda bergerak.
