Təsəvvür edin: yeni layihəyə qoşulursunuz, kod bazasına daxil olursunuz və ilk bir neçə saat ərzində əsəbiləşəcək dərəcədə tanış bir şey kəşf edirsiniz. Üslub vərəqlərinə səpələnmiş, eyni əsas animasiyalar üçün çoxlu @keyframes tərifləri tapa bilərsiniz. Üç fərqli solma effekti, iki və ya üç slayd dəyişikliyi, bir ovuc böyütmə animasiyaları və ən azı iki fərqli spin animasiyası, çünki yaxşı, niyə olmasın? @keyframes pulse { {dan miqyas: 1; } { miqyas: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { miqyas: 1; } 10%, 40% { miqyas: 1.2; } }
Bu ssenari tanış səslənirsə, tək deyilsiniz. Müxtəlif layihələr üzrə təcrübəmə əsasən, çatdıra biləcəyim ən ardıcıl sürətli qalibiyyətlərdən biri əsas kadrların birləşdirilməsi və standartlaşdırılmasıdır. Bu o qədər etibarlı nümunəyə çevrildi ki, indi hər hansı yeni kod bazasında ilk tapşırıqlarımdan biri kimi bu təmizləməni səbirsizliklə gözləyirəm. Xaosun arxasındakı məntiq Bu barədə düşünəndə bu artıqlıq mükəmməl məna kəsb edir. Biz hamımız gündəlik işimizdə eyni fundamental animasiyalardan istifadə edirik: solma, sürüşmə, böyütmə, fırlanma və digər ümumi effektlər. Bu animasiyalar olduqca sadədir və işi yerinə yetirmək üçün sürətli @keyframes tərifini hazırlamaq asandır. Mərkəzləşdirilmiş animasiya sistemi olmadan tərtibatçılar təbii olaraq bu əsas kadrları sıfırdan yazır, oxşar animasiyaların kod bazasında başqa yerlərdə artıq mövcud olduğundan xəbərsizdirlər. Bu, xüsusilə komponent əsaslı arxitekturalarda işləyərkən (bu günlərdə çoxumuz bunu edirik), çünki komandalar tez-tez tətbiqin müxtəlif hissələrində paralel işləyirlər. Nəticə? Animasiya xaos. Kiçik Problem Açar kadrların təkrarlanması ilə bağlı ən açıq problemlər inkişaf etdirmə vaxtı və lazımsız kod şişməsidir. Çoxlu açar kadr tərifləri tələblər dəyişdikdə yeniləmə üçün bir çox yer deməkdir. Fade animasiyanızın vaxtını tənzimləmək lazımdır? Kod bazanızdakı hər bir nümunəni ovlamalısınız. Asanlaşdırma funksiyalarını standartlaşdırmaq istəyirsiniz? Bütün variasiyaları tapmaqda uğurlar. Baxım nöqtələrinin bu şəkildə çoxaldılması hətta sadə animasiya yeniləmələrini vaxt aparan bir işə çevirir. Daha Böyük Problem Bu əsas kadrların təkrarlanması səthin altında gizlənən daha məkrli bir problem yaradır: qlobal əhatə dairəsi tələsi. Komponent əsaslı arxitekturalarla işləyərkən belə, CSS açar kadrları həmişə qlobal miqyasda müəyyən edilir. Bu o deməkdir ki, bütün açar kadrlar bütün komponentlərə aiddir. Həmişə. Bəli, animasiyanız mütləq komponentinizdə müəyyən etdiyiniz əsas kadrlardan istifadə etmir. O, qlobal əhatə dairəsinə yüklənmiş eyni ada uyğun gələn son açar kadrlardan istifadə edir. Bütün açar kadrlarınız eyni olduğu müddətcə bu, kiçik bir problem kimi görünə bilər. Ancaq müəyyən bir istifadə halı üçün animasiyanı fərdiləşdirmək istədiyiniz anda problem yaşayırsınız və ya daha da pisi, onlara səbəb olan siz olacaqsınız. Ya sizin animasiyanız işləməyəcək, çünki sizdən sonra yüklənən başqa bir komponent əsas kadrlarınızı yazır, ya da komponentiniz ən son yüklənir və təsadüfən həmin açar kadrın adından istifadə edərək hər bir komponent üçün animasiya davranışını dəyişir və siz bunu dərk etməyə də bilərsiz. Problemi nümayiş etdirən sadə bir nümunə: .komponent-bir { /* komponent üslubları */ animasiya: impuls 1s asan-in-out sonsuz alternativ; }
/* bu @keyframes tərifi işləməyəcək */ @keyframes pulse { {dan miqyas: 1; } üçün { miqyas: 1.1; } }
/* sonra kodda... */
.komponent-iki { /* komponent üslubları */ animasiya: impuls 1s asan-in-out sonsuz; }
/* bu açar kadrlar hər iki komponentə tətbiq olunacaq */ @keyframes pulse { 0%, 20%, 100% { miqyas: 1; } 10%, 40% { miqyas: 1.2; } }
Hər iki komponent eyni animasiya adından istifadə edir, lakin ikinci @keyframes tərifi birincinin üzərinə yazır. İndi hər iki komponent-bir və komponent-ikinci əsas kadrları hansı komponentin hansı açar kadrları təyin etməsindən asılı olmayaraq, ikinci açar kadrlardan istifadə edəcəklər. Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 1 [forked]. Ən pis hissəsi? Bu, çox vaxt yerli inkişafda mükəmməl işləyir, lakin qurma prosesləri üslub vərəqlərinizin yükləmə sırasını dəyişdirəndə istehsalda müəmmalı şəkildə pozulur. Hansı komponentlərin yüklənməsindən və hansı ardıcıllıqla bağlı olaraq fərqli davranan animasiyalarla nəticələnirsiniz. Həll yolu: Vahid Açar Kadrlar Bu xaosun cavabı təəccüblü dərəcədə sadədir: paylaşılan üslub cədvəlində saxlanılan əvvəlcədən təyin edilmiş dinamik açar kadrlar. Hər bir komponentə öz animasiyalarını təyin etmək əvəzinə, biz yaxşı sənədləşdirilmiş, asan idarə olunan mərkəzləşdirilmiş açar kadrlar yaradırıq.istifadə, saxlanıla bilən və layihənizin xüsusi ehtiyaclarına uyğunlaşdırılmışdır. Bunu əsas kadrlar tokenləri kimi düşünün. Necə ki, biz rənglər və boşluqlar üçün tokenlərdən istifadə edirik və bir çoxumuz artıq animasiya xüsusiyyətləri üçün, məsələn, müddət və asanlaşdırma funksiyaları üçün tokenlərdən istifadə edirik, niyə əsas kadrlar üçün də tokenlərdən istifadə etməyək? Bu yanaşma həm kiçik problemi (kodların təkrarlanması), həm də daha böyük problemi (qlobal əhatə dairəsi münaqişələri) bir anda həll edərkən, istifadə etdiyiniz hər hansı cari dizayn işarəsi iş axını ilə təbii şəkildə inteqrasiya edə bilər. İdeya sadədir: bütün ümumi animasiyalarımız üçün vahid həqiqət mənbəyi yaradın. Bu paylaşılan üslub cədvəlində layihəmizin əslində istifadə etdiyi animasiya nümunələrini əhatə edən diqqətlə hazırlanmış əsas kadrlar var. Artıq kod bazamızda solğun animasiyanın mövcud olub-olmadığını təxmin etməyə ehtiyac yoxdur. Artıq təsadüfən digər komponentlərdən animasiyaların üzərinə yazmaq olmaz. Amma əsas budur: bunlar sadəcə statik surətdə yapışdırıb-yapışdıran animasiyalar deyil. Onlar CSS fərdi xüsusiyyətləri vasitəsilə dinamik və fərdiləşdirilə bilən olmaq üçün nəzərdə tutulmuşdur ki, bu da bizə bir yerdə bir az daha böyük “nəbz” animasiyasına ehtiyacınız olduğu halda, animasiyaları xüsusi istifadə hallarına uyğunlaşdırmaq çevikliyinə malik olmaqla, ardıcıllığı qorumağa imkan verir. İlk Açar Kadrlar Tokeninin qurulması Mübarizə etməli olduğumuz ilk aşağı asılmış meyvələrdən biri “sönən” animasiyadır. Son layihələrimdən birində mən ondan çox ayrı-ayrılıqda solğun təriflər tapdım və bəli, onların hamısı sadəcə olaraq qeyri-şəffaflığı 0-dan 1-ə qədər canlandırdı. Beləliklə, gəlin yeni üslub cədvəli yaradaq, onu kf-tokens.css adlandıraq, onu layihəmizə idxal edək və onun daxilində müvafiq şərhlərlə əsas kadrlarımızı yerləşdirək. /* keyframes-tokens.css */
/* * Fade In - solğun giriş animasiyası * İstifadə: animasiya: kf-fade-in 0.3s asan-out; */ @keyframes kf-fade-in { {dan qeyri-şəffaflıq: 0; } üçün { qeyri-şəffaflıq: 1; } }
Bu tək @keyframes bəyannaməsi kod bazamızda bütün səpələnmiş solğun animasiyaları əvəz edir. Təmiz, sadə və qlobal səviyyədə tətbiq oluna bilər. İndi bu işarəni təyin etdikdən sonra onu layihəmiz boyu istənilən komponentdən istifadə edə bilərik: .modal { animasiya: kf-fade-in 0,3s asan çıxış; }
.alət məsləhəti { animasiya: kf-fade-in 0.2s asan-in-out; }
.bildiriş { animasiya: kf-fade-in 0,5s asan çıxış; }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 2 [çəngəllənmiş]. Qeyd: Bütün @keyframes adlarımızda kf- prefiksindən istifadə edirik. Bu prefiks layihədə mövcud animasiyalar ilə adlandırma konfliktlərinin qarşısını alan ad məkanı kimi xidmət edir və bu açar kadrların bizim açar kadrlar token faylımızdan gəldiyini dərhal aydınlaşdırır. Dinamik Slaydın Hazırlanması Kf-fade-in açar kadrları əla işləyir, çünki sadədir və hər şeyi qarışdırmaq üçün yer azdır. Digər animasiyalarda isə biz daha dinamik olmalıyıq və burada biz CSS-in xüsusi xüsusiyyətlərinin böyük gücündən istifadə edə bilərik. Bu, səpələnmiş statik animasiyalarla müqayisədə açar kadrların tokenlərinin həqiqətən parladığı yerdir. Ümumi bir ssenari götürək: “slide-in” animasiyaları. Amma haradan sürüşmək? sağdan 100px? 50% soldan? Ekranın yuxarısından daxil edilməlidir? Və ya bəlkə aşağıdan üzür? Çoxlu imkanlar var, lakin hər bir istiqamət və hər variasiya üçün ayrıca açar kadrlar yaratmaq əvəzinə, biz bütün ssenarilərə uyğunlaşan bir çevik token qura bilərik: /* * Slide In - istiqamətli slayd animasiyası * İstiqamətə nəzarət etmək üçün --kf-slide-fndən istifadə edin * Defolt: soldan sürüşür (-100%) * İstifadəsi: * animasiya: kf-slide-in 0.3s asan-çıxış; * --kf-slide-from: -100px 0; // soldan sürüşdürün * --kf-slide-from: 100px 0; // sağdan sürüşdürün * --kf-slide-from: 0 -50px; // yuxarıdan sürüşdürün */
@keyframes kf-slide-in { {dan tərcümə et: var(--kf-slide-from, -100% 0); } üçün { tərcümə et: 0 0; } }
İndi biz sadəcə olaraq --kf-slide-from xüsusi xüsusiyyətini dəyişdirərək istənilən slayd istiqaməti üçün bu tək @keyframes nişanından istifadə edə bilərik: .yan panel { animasiya: kf-slide-in 0.3s asan çıxış; /* Defolt dəyəri istifadə edir: soldan slaydlar */ }
.bildiriş { animasiya: kf-slide-in 0.4s asan çıxış; --kf-slide-from: 0 -50px; /* yuxarıdan sürüşdürün */ }
.modal { animasiya: kf-sönmə 0,5 saniyə, kf-slide-in 0,5s kub-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* aşağıdan sağa sürüşdürün */ }
Bu yanaşma ardıcıllığı qoruyarkən bizə inanılmaz çeviklik verir. Bir açar kadr bəyannaməsi, sonsuz imkanlar. Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 3 [çəngəllənmiş]. Əgər biz animasiyalarımızı daha da çevik etmək, “sürüşdürmə” effektlərinə də imkan vermək istəyiriksə, edə biləriksadəcə olaraq növbəti bölmədə görəcəyimizə bənzər --kf-slide-to fərdi xüsusiyyət əlavə edin. İki istiqamətli böyütmə açar kadrları Layihələr arasında təkrarlanan başqa bir ümumi animasiya “zoom” effektləridir. İstər tost mesajları üçün incə miqyaslı böyütmə, modallar üçün dramatik böyütmə, istərsə də başlıqlar üçün yumşaq kiçilmə effekti olsun, böyütmə animasiyaları hər yerdə mövcuddur. Hər bir miqyas dəyəri üçün ayrıca açar kadrlar yaratmaq əvəzinə, bir çevik kf-zoom açar kadrlar dəsti yaradaq:
/* * Zoom - miqyaslı animasiya * Şkala dəyərlərinə nəzarət etmək üçün --kf-zoom-from və --kf-zoom-to istifadə edin * Defolt: 80%-dən 100%-ə qədər böyüdür (0,8-1) * İstifadəsi: * animasiya: kf-zoom 0.2s asanlaşdırma; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // 50%-dən 100%-ə qədər böyüt * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100%-dən 0%-ə qədər böyüt * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100%-dən 110%-ə qədər böyüt */
@keyframes kf-zoom { {dan miqyas: var(--kf-zoom-from, 0.8); } üçün { miqyas: var(--kf-zoom-to, 1); } }
Bir təriflə, ehtiyacımız olan hər hansı böyütmə dəyişikliyinə nail ola bilərik: .tost { animasiya: kf-slide-in 0.2s, kf-zoom 0.4s asanlaşdırma; --kf-slide-from: 0 100%; /* yuxarıdan sürüşdürün */ /* Defolt miqyasdan istifadə edir: 80%-dən 100%-ə qədər ölçülər */ }
.modal { animasiya: kf-zoom 0,3s kub-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0; /* 0%-dən 100%-ə qədər dramatik böyütmə */ }
.başlıq { animasiya: kf-söndürmə 2 saniyə, kf-zoom 2s asanlaşdırma; --kf-zoom-from: 1.2; --kf-zoom-to: 0,8; /* zərif miqyasını aşağı salın */ }
Defolt 0.8 (80%), tost mesajları və kartlar kimi əksər UI elementləri üçün mükəmməl işləyir, eyni zamanda xüsusi hallar üçün fərdiləşdirmək asandır. Pen Keyframes Tokens - Amit Sheen tərəfindən Demo 4 [çəngəllənmiş] baxın. Son nümunələrdə maraqlı bir şey görmüsünüz: biz animasiyaları birləşdiririk. @keyframes tokenləri ilə işləməyin əsas üstünlüklərindən biri onların bir-biri ilə problemsiz inteqrasiya üçün nəzərdə tutulmasıdır. Bu hamar kompozisiya təsadüfi deyil, qəsdəndir. Biz daha sonra animasiya kompozisiyasını daha ətraflı müzakirə edəcəyik, o cümlədən onların problem yarada biləcəyi yerlər, lakin kombinasiyaların çoxu sadə və tətbiqi asandır. Qeyd: Bu məqaləni yazarkən və bəlkə də onu yazdığım üçün giriş animasiyalarının bütün ideyasını yenidən düşünərkən tapdım. CSS-dəki bütün son irəliləyişlərə baxmayaraq, onlara hələ də ehtiyacımız varmı? Xoşbəxtlikdən, Adam Argyle eyni sualları araşdırdı və bloqunda parlaq şəkildə ifadə etdi. Bu, burada yazılanlarla ziddiyyət təşkil etmir, lakin xüsusilə layihələriniz giriş animasiyalarına çox etibar edirsə, nəzərə alınmağa dəyər bir yanaşma təqdim edir. Davamlı Animasiyalar “Solğunlaşma”, “sürüşdürmə” və “yaxşılaşdırma” kimi giriş animasiyaları bir dəfə baş verib, sonra dayansa da, davamlı animasiyalar diqqəti cəlb etmək və ya davam edən fəaliyyəti göstərmək üçün qeyri-müəyyən dövrə vurur. Qarşılaşdığım ən çox görülən iki davamlı animasiya "spin" (indikatorları yükləmək üçün) və "nəbz" (vacib elementləri vurğulamaq üçün) dir. Bu animasiyalar əsas kadrların tokenlərinin yaradılmasına gəldikdə unikal problemlər yaradır. Adətən bir vəziyyətdən digərinə keçən giriş animasiyalarından fərqli olaraq, davamlı animasiyalar davranış nümunələrində yüksək səviyyədə fərdiləşdirilə bilən olmalıdır. Spin Doktoru Hər bir layihə birdən çox spin animasiyasından istifadə edir. Bəziləri saat yönünün əksinə, digərləri isə saat yönünün əksinə fırlanır. Bəziləri tək 360 dərəcə fırlanma edir, digərləri daha sürətli təsir üçün bir neçə növbə edir. Hər variasiya üçün ayrıca açar kadrlar yaratmaq əvəzinə, bütün ssenariləri idarə edən bir çevik spin quraq:
/* * Spin - fırlanma animasiyası * Fırlanma diapazonunu idarə etmək üçün --kf-spin-f və --kf-spin-to istifadə edin * Fırlanma miqdarını idarə etmək üçün --kf-spin-turns istifadə edin * Defolt: 0deq-dən 360deg arasında fırlanır (1 tam fırlanma) * İstifadəsi: * animasiya: kf-spin 1s xətti sonsuz; * --kf-spin-dönmələr: 2; // 2 tam fırlanma * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // yarım fırlanma * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // saat yönünün əksinə */
@keyframes kf-spin { {dan döndərmək: var(--kf-spin-from, 0deg); } üçün { döndürün: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
İndi biz istədiyimiz hər hansı spin variasiyasını yarada bilərik:
.loading-spinner { animasiya: kf-spin 1s xətti sonsuz; /* Defoltdan istifadə edir: 0deq-dən 360deg arasında fırlanır */ }
.sürətli yükləyici { animasiya: kf-spin 1.2s asan-in-out sonsuz alternativ; --kf-spin-dönmələri: 3; /* Hər dövrə üçün hər istiqamət üçün 3 tam fırlanma*/ }
.pilləli tərs { animasiya: kf-spin 1.5s addımlar(8) sonsuz; --kf-spin-to: -360deg; /* saat yönünün əksinə */ }
.incə tərpənmək { animasiya: kf-spin 2s asan-in-out sonsuz alternativ; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* 36 dərəcə tərpənmək: -18 dərəcə ilə +18 dərəcə arasında */ }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 5 [forked]. Bu yanaşmanın gözəlliyi ondan ibarətdir ki, eyni açar kadrlar əyiriciləri yükləmək, fırlanan nişanlar, tərpənmə effektləri və hətta mürəkkəb çox dönmə animasiyaları üçün işləyir. Nəbz Paradoksu Nəbz animasiyaları daha çətin olur, çünki onlar müxtəlif xassələri “nəbz edə” bilirlər. Bəziləri miqyasda impuls verir, digərləri qeyri-şəffaflığı, bəziləri isə parlaqlıq və ya doyma kimi rəng xüsusiyyətlərini impuls edir. Hər bir xüsusiyyət üçün ayrıca açar kadrlar yaratmaq əvəzinə, biz istənilən CSS xüsusiyyəti ilə işləyən açar kadrlar yarada bilərik. Budur, miqyas və qeyri-şəffaflıq seçimləri ilə impuls açar kadrının nümunəsi:
/* * Pulse - impulslu animasiya * Ölçək diapazonunu idarə etmək üçün --kf-pulse-scale-f və --kf-pulse-scale-to istifadə edin * Qeyri-şəffaflıq diapazonunu idarə etmək üçün --kf-pulse-opacity-from və --kf-pulse-opacity-to istifadə edin * Defolt: nəbz yoxdur (bütün dəyərlər 1) * İstifadəsi: * animasiya: kf-pulse 2s asan-in-out sonsuz alternativ; * --kf-pulse-scale-from: 0,95; --kf-pulse-scale-to: 1.05; // miqyaslı nəbz * --kf-pulse-şəffaflıq-from: 0.7; --kf-pulse-opacity-to: 1; // qeyri-şəffaflıq nəbzi */
@keyframes kf-pulse { {dan miqyas: var(--kf-pulse-scale-from, 1); qeyri-şəffaflıq: var(--kf-pulse-opacity-from, 1); } üçün { miqyas: var(--kf-pulse-scale-to, 1); qeyri-şəffaflıq: var(--kf-pulse-opacity-to, 1); } }
Bu, bir çox xüsusiyyətləri canlandıra bilən çevik bir nəbz yaradır: .hərəkətə çağırış { animasiya: kf-pulse 0.6s sonsuz alternativ; --kf-pulse-şəffaflıq-from: 0,5; /* qeyri-şəffaflıq nəbzi */ }
.bildiriş nöqtəsi { animasiya: kf-pulse 0.6s asan-in-out sonsuz alternativ; --kf-pulse-scale-from: 0,9; --kf-pulse-scale-to: 1.1; /* miqyaslı nəbz */ }
.text-highlight { animasiya: kf-pulse 1.5s asan çıxış sonsuz; --kf-pulse-scale-from: 0,8; --kf-pulse-şəffaflıq-from: 0,2; /* miqyas və qeyri-şəffaflıq nəbzi */ }
Pen Keyframes Tokens - Amit Sheen tərəfindən Demo 6 [çəngəllənmiş] baxın. Bu tək kf-pulse açar kadrı incə diqqət cəlb etməkdən tutmuş dramatik məqamlara qədər hər şeyi idarə edə bilər, eyni zamanda fərdiləşdirmək asandır. Qabaqcıl Asanlaşma Açar kadrların tokenlərindən istifadə ilə bağlı ən yaxşı şeylərdən biri bizim animasiya kitabxanamızı genişləndirməyin və əksər tərtibatçıların elastik və ya sıçrayış kimi sıfırdan yazmağa zəhmət çəkməyəcəyi effektləri təmin etməyin nə qədər asan olmasıdır. Burada sıçrayış hündürlüyünə nəzarət etmək üçün --kf-bounce-from xüsusi xassəsindən istifadə edən sadə “sıçrayış” açar kadrlar nişanı nümunəsidir. /* * Bounce - sıçrayan giriş animasiyası * Atlama hündürlüyünə nəzarət etmək üçün --kf-bounce-fndən istifadə edin * Defolt: 100vh-dan tullanır (ekrandan kənar) * İstifadəsi: * animasiya: kf-bounce 3s asan giriş; * --kf-bounce-from: 200px; // 200px hündürlükdən tullanmaq */
@keyframes kf-bounce { 0% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { tərcümə et: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { tərcümə et: 0 0; animasiya vaxtı funksiyası: asanlıq; } }
“Elastik” kimi animasiyalar əsas kadrlar daxilindəki hesablamalara görə bir qədər çətin olur. Biz --kf-elastic-from-X və --kf-elastic-from-Y-ni ayrıca müəyyən etməliyik (hər ikisi isteğe bağlıdır) və onlar birlikdə ekranın istənilən nöqtəsindən elastik giriş yaratmağa imkan verir.
/* * Elastik In - elastik giriş animasiyası * Başlanğıc mövqeyini idarə etmək üçün --kf-elastic-from-X və --kf-elastic-from-Y istifadə edin * Defolt: yuxarı mərkəzdən daxil olur (0, -100vh) * İstifadəsi: * animasiya: kf-elastic-in 2s asan-in-out hər ikisi; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // daxil edin (-50px, -200px) */
@keyframes kf-elastic-in { 0% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { tərcümə et: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { tərcümə et: 0 0; } }
Bu yanaşma tək bir fərdi xüsusiyyəti dəyişdirməklə layihəmizdə təkmil açar kadrların təkrar istifadəsini və fərdiləşdirilməsini asanlaşdırır.
.bounce-and-zoom { animasiya: kf-bounce 3s asan giriş, kf-zoom 3s xətti; --kf-zoom-from: 0; }
.bounce-and-slide { animasiya-kompozisiya: əlavə et; /* Hər iki animasiya tərcümədən istifadə edir */ animasiya: kf-bounce 3s asan giriş, kf-slide-in 3s asan çıxış; --kf-slide-from: -200px; }
.elastik-in { animasiya: kf-elastic-in 2s asan-in-out hər ikisi; }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 7 [çəngəllənmiş]. Bu nöqtəyə qədər biz əsas kadrları ağıllı və səmərəli şəkildə necə birləşdirə biləcəyimizi gördük. Əlbəttə ki, siz layihənizin ehtiyaclarına daha yaxşı uyğunlaşmaq üçün hər şeyi düzəltmək istəyə bilərsiniz, lakin biz bir neçə ümumi animasiya və gündəlik istifadə nümunələrini əhatə etdik. Və bu əsas kadrlar tokenləri ilə indi bütün layihə üzrə ardıcıl, davamlı animasiyalar yaratmaq üçün güclü tikinti bloklarımız var. Artıq təkrarlanan əsas kadrlar, qlobal əhatə dairəsi münaqişələri yoxdur. Bütün animasiya ehtiyaclarımızı idarə etmək üçün sadəcə təmiz, rahat bir yol. Ancaq əsl sual budur: Bu tikinti bloklarını birlikdə necə düzəldirik? Hamısını Bir araya gətirmək Biz gördük ki, əsas kadrlar tokenlərini birləşdirmək sadədir. Bizim xüsusi bir şeyə ehtiyacımız yoxdur, ancaq birinci animasiyanı təyin etmək, ikincini təyin etmək, dəyişənləri lazım olduqda təyin etmək və bu qədər. /* Solğun + sürüşdürün */ .tost { animasiya: kf-söndürmə 0.4s, kf-slide-in 0,4s kub-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Böyüt + yaxınlaşdır */ .modal { animasiya: kf-söndürmə 0.3s, kf-zoom 0,3s kub-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0,7; --kf-zoom-to: 1; }
/* Sürüşdürün + nəbz */ .bildiriş { animasiya: kf-slide-in 0,5s, kf-pulse 1.2s asan-in-out sonsuz alternativ; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0,95; --kf-pulse-scale-to: 1.05; }
Bu kombinasiyalar gözəl işləyir, çünki hər bir animasiya fərqli xüsusiyyəti hədəfləyir: qeyri-şəffaflıq, transformasiya (tərcümə/miqyas) və s. Amma bəzən münaqişələr olur və biz onlarla niyə və necə məşğul olacağımızı bilməliyik. İki animasiya eyni xüsusiyyəti canlandırmağa çalışdıqda - məsələn, hər iki miqyasda və ya qeyri-şəffaflığı canlandırarkən - nəticə gözlədiyiniz kimi olmayacaq. Varsayılan olaraq, animasiyalardan yalnız biri həqiqətən animasiya siyahısında sonuncu olan həmin xüsusiyyətə tətbiq edilir. Bu, CSS-in eyni xüsusiyyətdə çoxlu animasiyaları necə idarə etməsinə məhdudiyyətdir. Məsələn, bu, nəzərdə tutulduğu kimi işləməyəcək, çünki yalnız kf-pulse animasiyası tətbiq olunacaq. .bad-kombo { animasiya: kf-zoom 0,5s irəli, kf-pulse 1.2s sonsuz alternativ; --kf-zoom-from: 0,5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0,8; --kf-pulse-scale-to: 1.1; }
Animasiya əlavəsi Eyni xassə təsir edən çoxsaylı animasiyaları idarə etməyin ən sadə və birbaşa yolu animasiya-kompozisiya xassəsindən istifadə etməkdir. Yuxarıdakı sonuncu misalda kf-pulse animasiyası kf-zoom animasiyasını əvəz edir, ona görə də biz ilkin böyütməni görməyəcəyik və gözlənilən miqyası 1.2-yə çatdırmayacağıq. Əlavə etmək üçün animasiya kompozisiyasını təyin etməklə biz brauzerə hər iki animasiyanı birləşdirməyi əmr edirik. Bu bizə istədiyimiz nəticəni verir. .komponent-iki { animasiya-kompozisiya: əlavə et; }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 8 [çəngəllənmiş]. Bu yanaşma eyni xüsusiyyətə təsirləri birləşdirmək istədiyimiz əksər hallarda yaxşı işləyir. Animasiyaları statik xüsusiyyət dəyərləri ilə birləşdirməyə ehtiyac duyduğumuzda da faydalıdır. Məsələn, translate xassəsindən istifadə edən elementimiz varsa və onu tam istədiyimiz yerdə yerləşdirsək və sonra onu kf-slide-in açar kadrları ilə canlandırmaq istəsək, animasiya-kompozisiya olmadan pis görünən sıçrayış əldə edirik. Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 9 [çəngəllənmiş]. Animasiya kompozisiyası əlavə edilməklə, animasiya mövcud olanlarla rəvan şəkildə birləşdirilirçevrilir, beləliklə element yerində qalır və gözlənildiyi kimi canlanır. Animasiya Stagger Çoxsaylı animasiyaları idarə etməyin başqa bir yolu onları “çaşdırmaq”dır, yəni birincisi bitdikdən sonra ikinci animasiyaya bir qədər başlamaq lazımdır. Bu, hər bir vəziyyət üçün işləyən bir həll deyil, lakin davamlı animasiya ilə müşayiət olunan giriş animasiyamız olduqda faydalıdır. /* solğun + qeyri-şəffaflıq nəbzi */ .bildiriş { animasiya: kf-fade-in 2s asan çıxış, kf-pulse 0.5s 2s asan-in-out sonsuz alternativ; --kf-pulse-şəffaflıq-to: 0,5; }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 10 [forked]. Sifariş Məsələləri İşlədiyimiz animasiyaların böyük bir hissəsi transform xüsusiyyətindən istifadə edir. Əksər hallarda bu, sadəcə olaraq daha rahatdır. Transformasiya animasiyaları GPU ilə sürətləndirilə bildiyi üçün o, həm də performans üstünlüyünə malikdir. Amma transformasiyalardan istifadə etsək, qəbul etməliyik ki, çevrilmələrimizi hansı ardıcıllıqla yerinə yetirdiyimiz vacibdir. çox. İndiyə qədər açar kadrlarımızda fərdi transformasiyalardan istifadə etmişik. Xüsusiyyətlərə görə, bunlar həmişə sabit qaydada tətbiq olunur: əvvəlcə element tərcümə olunur, sonra fırlanır, sonra miqyaslanır. Bu məntiqlidir və çoxumuzun gözlədiyi budur. Lakin transform xassəsindən istifadə etsək, funksiyaların yazılma sırası onların tətbiq olunma sırasıdır. Bu halda nəyisə X oxunda 100 piksel hərəkət etdirib sonra 45 dərəcə döndərsək, bu, əvvəlcə onu 45 dərəcə fırladıb, sonra 100 pikselə çevirməklə eyni deyil. /* Çəhrayı kvadrat: Əvvəlcə tərcümə et, sonra çevir */ .nümunə-bir { çevirmək: translateX(100px) döndərmək(45deg); }
/* Yaşıl kvadrat: Əvvəlcə fırladın, sonra tərcümə edin */ .misal-iki { çevirmək: döndərmək (45deg) translateX(100px); }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 11 [forked]. Lakin transformasiya sırasına əsasən, bütün fərdi transformasiyalar – əsas kadrlar üçün istifadə etdiyimiz hər şey – transformasiya funksiyalarından əvvəl baş verir. Bu o deməkdir ki, transformasiya xüsusiyyətində təyin etdiyiniz hər şey animasiyalardan sonra baş verəcək. Lakin, məsələn, kf-spin açar kadrları ilə birlikdə tərcümə etsəniz, tərcümə animasiyadan əvvəl baş verəcək. Hələ çaşqın?! Bu, aşağıdakı vəziyyətdə olduğu kimi statik dəyərlərin eyni animasiya üçün fərqli nəticələrə səbəb ola biləcəyi vəziyyətlərə gətirib çıxarır:
/* Hər iki spinner üçün ümumi animasiya */ .spinner { animasiya: kf-spin 1s xətti sonsuz; }
/* Pink spinner: fırlanmadan əvvəl tərcümə edin (fərdi çevrilmə) */ .spinner-pink { tərcümə: 100% 50%; }
/* Yaşıl əyirici: döndürün, sonra tərcümə edin (funksiya sırası) */ .spinner-yaşıl { çevirmək: tərcümə (100%, 50%); }
Pen Keyframes Tokenlərinə baxın - Amit Sheen tərəfindən Demo 12 [çəngəllənmiş]. Görürsünüz ki, ilk əyirici (çəhrayı) kf-spin fırlanmasından əvvəl baş verən tərcüməni alır, ona görə də əvvəlcə öz yerinə hərəkət edir və sonra fırlanır. İkinci əyirici (yaşıl) fərdi transformasiyadan sonra baş verən translate() funksiyasını alır, beləliklə, element əvvəlcə fırlanır, sonra cari bucağına nisbətən hərəkət edir və biz həmin geniş orbit effektini əldə edirik. Xeyr, bu səhv deyil. Bu, CSS haqqında bilməli olduğumuz və çoxsaylı animasiyalar və ya çoxlu çevrilmələrlə işləyərkən yadda saxlamalı olduğumuz şeylərdən yalnız biridir. Lazım gələrsə, siz həmçinin rotate() funksiyasından istifadə edərək elementləri döndərən əlavə kf-spin-alt açar kadrlar dəsti yarada bilərsiniz. Azaldılmış Hərəkət Alternativ açar kadrlar haqqında danışarkən, "animasiya yoxdur" seçimini nəzərdən qaçıra bilmərik. Açar kadrlardan istifadə etməyin ən böyük üstünlüklərindən biri əlçatanlığın bişirilə bilməsidir və bunu etmək əslində olduqca asandır. Əsas kadrlarımızı əlçatanlığı nəzərə alaraq dizayn etməklə, azaldılmış hərəkətə üstünlük verən istifadəçilərin əlavə iş və ya kodun təkrarlanması olmadan daha hamar, daha az diqqəti yayındıran təcrübə əldə etmələrini təmin edə bilərik. “Azaldılmış Hərəkət”in dəqiq mənası bir animasiyadan digərinə və layihədən layihəyə bir qədər dəyişə bilər, lakin burada bir neçə vacib məqamı yadda saxlamaq lazımdır: Açar kadrları susdurmaq Bəzi animasiyaları yumşaltmaq və ya yavaşlatmaq olar, bəziləri isə azaldılmış hərəkət tələb edildikdə tamamilə yox olmalıdır. Pulse animasiyaları yaxşı bir nümunədir. Bu animasiyaların azaldılmış hərəkət rejimində işləmədiyinə əmin olmaq üçün onları sadəcə müvafiq media sorğusuna sarıya bilərik.
@media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { @keyfrmaes kf-pulse { {dan miqyas: var(--kf-pulse-scale-from, 1); qeyri-şəffaflıq: var(--kf-pulse-opacity-from, 1); } üçün { miqyas: var(--kf-pulse-scale-to, 1); qeyri-şəffaflıq:var(--kf-pulse-opacity-to, 1); } } }
Bu, azaltmaq üçün prioritet-azaldılmış-hərəkəti təyin etmiş istifadəçilərin animasiyanı görməyəcəyini və onların seçiminə uyğun təcrübə əldə edəcəyini təmin edir. Instant In Sadəcə silə bilmədiyimiz bəzi açar kadrlar var, məsələn, giriş animasiyaları. Dəyər dəyişməli, canlandırmalıdır; əks halda elementin düzgün dəyərləri olmayacaq. Lakin azaldılmış hərəkətdə ilkin dəyərdən bu keçid ani olmalıdır. Buna nail olmaq üçün dəyərin dərhal son vəziyyətə keçdiyi əlavə açar kadrlar dəsti müəyyən edəcəyik. Bunlar bizim defolt açar kadrlarımıza çevrilir. Sonra, əvvəlki misalda olduğu kimi, üstünlük verilməmiş-azaldılmış hərəkət üçün media sorğusuna adi açar kadrları əlavə edəcəyik. /* azaldılmış hərəkət üçün dərhal daxil olun */ @keyframes kf-zoom { dan, { miqyas: var(--kf-zoom-to, 1); } }
@media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { /* Orijinal böyütmə əsas kadrları */ @keyframes kf-zoom { {dan miqyas: var(--kf-zoom-from, 0.8); } üçün { miqyas: var(--kf-zoom-to, 1); } } }
Bu yolla, azaldılmış hərəkətə üstünlük verən istifadəçilər elementin dərhal son vəziyyətində göründüyünü görəcək, digərləri isə animasiya keçidini əldə edəcəklər. Yumşaq yanaşma Bəzi hərəkətləri saxlamaq istədiyimiz hallar var, lakin orijinal animasiyadan daha yumşaq və sakitdir. Məsələn, sıçrayışlı girişi zərif solma ilə əvəz edə bilərik.
@keyframes kf-bounce { /* Hərəkəti azaltmaq üçün yumşaq sönmə */ }
@media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { @keyframes kf-bounce { /* Orijinal sıçrayış əsas kadrları */ } }
İndi, azaldılmış hərəkəti aktivləşdirən istifadəçilər hələ də görünüş hissi əldə edirlər, lakin sıçrayış və ya elastik animasiyanın intensiv hərəkəti olmadan. Tikinti blokları yerində olduqda, növbəti sual onları necə faktiki iş axınının bir hissəsi etməkdir. Çevik açar kadrların yazılması bir şeydir, lakin onları böyük bir layihədə etibarlı etmək çətin yoldan öyrənməli olduğum bir neçə strategiya tələb edir. İcra Strategiyaları və Ən Yaxşı Təcrübələr Əsas kadrların tokenlərinin möhkəm kitabxanasına sahib olduqdan sonra əsl problem onları gündəlik işə necə cəlb etməkdir.
Cazibədarlıq bütün əsas kadrları bir anda buraxmaq və problemin həll olunduğunu elan etməkdir, lakin praktikada ən yaxşı nəticələrin tədricən övladlığa götürməkdən gəldiyini gördüm. Fade və ya slide kimi ən çox yayılmış animasiyalarla başlayın. Bunlar, böyük yenidən yazılar tələb etmədən dərhal dəyər göstərən asan qələbələrdir. Adlandırma diqqət yetirməyə layiq olan başqa bir məqamdır. Ardıcıl prefiks və ya ad sahəsi hansı animasiyaların token, hansının isə yerli birdəfəlik olduğunu aydın edir. O, həmçinin təsadüfi toqquşmaların qarşısını alır və yeni komanda üzvlərinə paylaşılan sistemi bir baxışda tanımağa kömək edir. Sənədləşmə kodun özü qədər vacibdir. Hər bir açar kadr işarəsinin üstündəki qısa şərh belə sonradan təxmin etməyə saatlarla qənaət edə bilər. Tərtibatçı token faylını aça, ehtiyac duyduğu effekti skan edə və istifadə nümunəsini birbaşa komponentinə köçürə bilməlidir. Çeviklik bu yanaşmanı səylərə dəyər edən şeydir. Məntiqli fərdi xüsusiyyətləri ifşa etməklə biz komandalara sistemi pozmadan animasiyanı uyğunlaşdırmaq üçün yer veririk. Eyni zamanda, həddindən artıq mürəkkəbləşdirməməyə çalışın. Əhəmiyyətli olan düymələri təmin edin və qalanları rəydə saxlayın. Nəhayət, əlçatanlığı xatırlayın. Hər animasiya azaldılmış hərəkət alternativinə ehtiyac duymur, lakin çoxları buna ehtiyac duyur. Bu tənzimləmələri erkən bişirmək o deməkdir ki, biz onları sonradan heç vaxt təkmilləşdirməməliyik və bu, istifadəçilərimizin bunu heç vaxt qeyd etməsələr belə, hiss edəcəkləri qayğı səviyyəsini göstərir.
Təcrübəmə görə, açar kadrların tokenlərini dizayn nişanlarının iş axınımızın bir hissəsi kimi qəbul etmək onları yapışdırır. Onlar yerində olduqdan sonra onlar xüsusi effektlər kimi hiss etməyi dayandırır və dizayn dilinin bir hissəsinə çevrilirlər, məhsulun hərəkət və reaksiyasının təbii uzantısıdır. Sarma Animasiyalar interfeyslərin qurulmasının ən sevincli hissələrindən biri ola bilər, lakin struktursuz da ən böyük məyusluq mənbələrindən birinə çevrilə bilər. Əsas kadrları əlamət kimi qəbul etməklə siz adətən qarışıq və idarə olunması çətin olan bir şeyi götürür və onu aydın, proqnozlaşdırıla bilən sistemə çevirirsiniz. Əsl dəyər sadəcə bir neçə sətir kodu saxlamaqda deyil. Bu, əmindir ki, siz soldurma, sürüşdürmə, böyütmə və ya fırlatmadan istifadə etdiyiniz zaman onun layihə boyunca necə davranacağını dəqiq bilirsiniz. Sonsuz variasiyaların xaosu olmadan fərdi xüsusiyyətlərdən gələn çeviklikdədir. Və o, əlavə olaraq deyil, təmələ daxil edilmiş əlçatanlıqdadırsonradan bir fikir. Mən bu ideyaların müxtəlif komandalarda və müxtəlif kod bazalarında işlədiyini görmüşəm və nümunə həmişə eynidir. Tokenlər yerləşdikdən sonra açar kadrlar səpələnmiş hiylələr toplusu olmağı dayandırır və dizayn dilinin bir hissəsinə çevrilir. Onlar məhsulu daha məqsədyönlü, daha ardıcıl və daha canlı hiss etdirirlər. Bu məqalədən bir şeyi götürsəniz, qoy belə olsun: animasiyalar rənglərə, tipoqrafiyaya və boşluqlara verdiyimiz eyni qayğıya və quruluşa layiqdir. Əsas kadrlara kiçik bir investisiya, interfeysiniz hər dəfə hərəkət etdikdə öz bəhrəsini verir.
