Үүнийг төсөөлөөд үз дээ: та шинэ төсөлд нэгдэж, кодын сан руу шумбаж, эхний хэдэн цагийн дотор та урам хугармаар танил зүйлийг олж харах болно. Загварын хуудсууд даяар тархсан бөгөөд та ижил үндсэн хөдөлгөөнт дүрст олон @keyframes тодорхойлолтуудыг олж болно. Гурван өөр бүдгэрүүлэх эффект, хоёр эсвэл гурван слайдын хувилбар, цөөн хэдэн томруулах хөдөлгөөнт дүрс, дор хаяж хоёр өөр эргүүлэх хөдөлгөөнт дүрс, яагаад гэвэл яагаад болохгүй гэж? @keyframes импульс { {-аас масштаб: 1; } руу { масштаб: 1.1; } }
@keyframes том импульс { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { масштаб: 1.2; } }
Хэрэв энэ хувилбар танил сонсогдож байвал та ганцаараа биш гэсэн үг. Төрөл бүрийн төслүүдийн туршлагаас харахад миний хүргэж чадах хамгийн тогтвортой амжилтуудын нэг бол түлхүүр фрэймүүдийг нэгтгэж, стандартчилах явдал юм. Энэ нь маш найдвартай загвар болсон тул одоо би энэхүү цэвэрлэгээг аливаа шинэ кодын үндсэн ажлынхаа нэг болгон тэсэн ядан хүлээж байна. Эмх замбараагүй байдлын цаад логик Энэ илүүдэл нь энэ талаар бодоход төгс утга учиртай болно. Бид бүгд өдөр тутмын ажилдаа ижил үндсэн хөдөлгөөнт дүрсийг ашигладаг: бүдгэрч, слайд, томруулж, эргүүлэх болон бусад нийтлэг эффектүүд. Эдгээр хөдөлгөөнт дүрсүүд нь маш энгийн бөгөөд ажлаа дуусгахын тулд @keyframes-ийн хурдан тодорхойлолтыг хийхэд хялбар байдаг. Төвлөрсөн анимэйшн системгүй бол хөгжүүлэгчид эдгээр түлхүүр фрэймүүдийг эхнээс нь бичдэг бөгөөд кодын санд ижил төстэй хөдөлгөөнт дүрсүүд аль хэдийн байгаа гэдгийг мэддэггүй. Энэ нь ялангуяа бүрэлдэхүүн хэсэг дээр суурилсан архитектурт ажиллах үед түгээмэл тохиолддог (энэ нь бидний ихэнх нь өнөө үед хийдэг), учир нь багууд програмын өөр өөр хэсгүүдэд зэрэгцэн ажилладаг. Үр дүн? Анимэйшн эмх замбараагүй байдал. Жижиг асуудал Түлхүүр фрэймийн давхардалтай холбоотой хамгийн тодорхой асуудал бол боловсруулах цагийг дэмий үрэх, шаардлагагүй кодыг хавдах явдал юм. Олон тооны түлхүүр фрэймийн тодорхойлолтууд нь шаардлага өөрчлөгдөх үед олон газар шинэчлэх боломжтой гэсэн үг юм. Бүдгэрэх хөдөлгөөнт дүрсийнхээ цагийг тохируулах шаардлагатай байна уу? Та кодын сан дээрх тохиолдлууд бүрийг хайж олох хэрэгтэй болно. Хөнгөвчлөх функцийг стандартчилахыг хүсч байна уу? Бүх хувилбаруудыг олоход амжилт хүсье. Засвар үйлчилгээний цэгүүдийг ингэж үржүүлснээр энгийн хөдөлгөөнт дүрсний шинэчлэлтийг хүртэл цаг хугацаа шаардсан ажил болгодог. Хамгийн том асуудал Энэхүү түлхүүр фрэймийн давхардал нь гадаргын дор нуугдаж буй илүү нууцлаг асуудлыг бий болгодог: дэлхийн хамрах хүрээний урхи. Бүр бүрэлдэхүүн хэсэг дээр суурилсан архитектуртай ажиллах үед ч гэсэн CSS түлхүүр фрэймүүд нь дэлхийн хэмжээнд үргэлж тодорхойлогддог. Энэ нь бүх түлхүүр фрэймүүд бүх бүрэлдэхүүн хэсгүүдэд хамааралтай гэсэн үг юм. Үргэлж. Тиймээ, таны хөдөлгөөнт дүрс нь таны бүрэлдэхүүн хэсэгт тодорхойлсон түлхүүр фрэймүүдийг заавал ашиглах албагүй. Энэ нь дэлхийн хамрах хүрээ рүү ачаалагдсан яг ижил нэртэй таарч байгаа сүүлийн түлхүүр фрэймүүдийг ашигладаг. Таны бүх түлхүүр фрэйм ижил байвал энэ нь жижиг асуудал мэт санагдаж магадгүй. Гэхдээ та тодорхой хэрэглээнд зориулж хөдөлгөөнт дүрсийг өөрчлөхийг хүсч байгаа тэр мөчид танд асуудал тулгарна, эсвэл бүр дордвол та тэдгээрийг үүсгэгч байх болно. Таны анимэйшн ажиллахгүй, учир нь таны араас өөр нэг бүрэлдэхүүн хэсэг ачаалагдаж, таны түлхүүр фрэймийг дарж бичих эсвэл таны бүрэлдэхүүн хэсэг хамгийн сүүлд ачаалагдаж, тухайн түлхүүр фрэймийн нэрийг ашиглан бусад бүрэлдэхүүн хэсэг бүрийн хөдөлгөөнт дүрсийг санамсаргүйгээр өөрчилдөг ба та үүнийг ойлгохгүй байж магадгүй юм. Асуудлыг харуулсан энгийн жишээ энд байна: .бүрэлдэхүүн нэг { /* бүрэлдэхүүн хэсгүүдийн хэв маяг */ хөдөлгөөнт дүрс: импульсийн 1s-ийн хялбараар гарах хязгааргүй ээлж; }
/* энэ @keyframes тодорхойлолт ажиллахгүй */ @keyframes импульс { {-аас масштаб: 1; } руу { масштаб: 1.1; } }
/* дараа нь кодонд... */
.component-хоёр { /* бүрэлдэхүүн хэсгүүдийн хэв маяг */ хөдөлгөөнт дүрс: импульс 1s-ийн хялбараар гарах хязгааргүй; }
/* энэ түлхүүр фрэйм нь хоёр бүрэлдэхүүн хэсэгт хамаарна */ @keyframes импульс { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { масштаб: 1.2; } }
Хоёр бүрэлдэхүүн хэсэг нь ижил хөдөлгөөнт дүрсийг ашигладаг боловч хоёр дахь @keyframes тодорхойлолт нь эхнийх нь дарж бичдэг. Одоо нэг бүрэлдэхүүн хэсэг болон хоёр дахь бүрэлдэхүүн хэсэг нь аль бүрэлдэхүүн хэсэг нь аль түлхүүр фрэймийг тодорхойлсоноос үл хамааран хоёр дахь түлхүүр фрэймүүдийг ашиглах болно. Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Амит Шинийн Демо 1 [салаатай]. Хамгийн муу хэсэг нь? Энэ нь орон нутгийн хөгжилд ихэвчлэн төгс ажилладаг боловч бүтээх процессууд нь таны загварын хуудасны ачаалах дарааллыг өөрчлөх үед үйлдвэрлэлд нууцлаг байдлаар эвдэрдэг. Та ямар бүрэлдэхүүн хэсгүүд, ямар дарааллаар ачаалагдсанаас хамааран өөр өөр үйлдэл хийх хөдөлгөөнт дүрсүүдтэй болно. Шийдэл: Нэгдсэн түлхүүр фрэймүүд Энэхүү эмх замбараагүй байдлын хариулт нь гайхалтай энгийн: хуваалцсан загварын хүснэгтэд хадгалагдсан урьдчилан тодорхойлсон динамик түлхүүр фрэймүүд. Бүрэлдэхүүн хэсэг бүр өөрийн хөдөлгөөнт дүрслэлийг тодорхойлохын оронд бид сайн баримтжуулсан, ашиглахад хялбар төвлөрсөн түлхүүр фрэймүүдийг үүсгэдэг.ашиглах, засвар үйлчилгээ хийх боломжтой, таны төслийн тусгай хэрэгцээнд тохируулсан. Үүнийг түлхүүр фрэймийн жетон гэж төсөөлөөд үз дээ. Бид өнгө, зайны хувьд жетон ашигладаг бөгөөд бидний олонхи нь үргэлжлэх хугацаа, хөнгөвчлөх функц зэрэг хөдөлгөөнт шинж чанарт токен ашигладаг бол яагаад түлхүүр фрэймийн хувьд жетон ашиглаж болохгүй гэж? Энэ арга нь таны ашиглаж байгаа дизайны токен ажлын урсгалтай байгалийн жамаар нэгдэж, жижиг асуудал (кодын давхардал) болон том асуудал (дэлхийн хамрах хүрээний зөрчил) хоёуланг нь нэг дор шийдэж чадна. Санаа нь ойлгомжтой: бидний бүх нийтлэг хөдөлгөөнт дүрслэлд үнэний нэг эх сурвалжийг бий болгох. Энэхүү хуваалцсан загварын хуудас нь манай төслийн хэрэглэгдэх анимацийн хэв маягийг хамарсан нарийн боловсруулсан түлхүүр фрэймүүдийг агуулдаг. Манай кодын сангийн хаа нэгтээ бүдгэрсэн хөдөлгөөнт дүрс байгаа эсэхийг тааварлахаа больсон. Бусад бүрэлдэхүүн хэсгүүдийн хөдөлгөөнт дүрсийг санамсаргүйгээр дарж бичихгүй. Гэхдээ энд гол зүйл байна: эдгээр нь зүгээр л хөдөлгөөнгүй хуулж буулгах хөдөлгөөнт дүрс биш юм. Эдгээр нь CSS-ийн захиалгат шинж чанаруудаар дамжуулан динамик, өөрчлөх боломжтой байхаар бүтээгдсэн бөгөөд ингэснээр танд нэг дор бага зэрэг том "импульс" хөдөлгөөн хийх шаардлагатай гэх мэт тодорхой хэрэглээний тохиолдлуудад хөдөлгөөнт дүрсийг тохируулах уян хатан байдлаа хадгалах боломжийг олгодог. Анхны түлхүүр фрэймийн токеныг бүтээх Бидний шийдэх ёстой хамгийн эхний намхан жимсний нэг бол "бүдгэрэх" хөдөлгөөнт дүрс юм. Саяхан хэрэгжүүлсэн төслүүдийнхээ нэгэнд би арав гаруй бүдгэрсэн тодорхойлолтыг олсон бөгөөд тийм ээ, тэд бүгд зүгээр л 0-ээс 1 хүртэлх тунгалаг байдлыг харуулсан. Тиймээс шинэ загварын хуудас үүсгэж, kf-tokens.css гэж нэрлээд, төсөлдөө оруулж, дотор нь зохих тайлбар бүхий түлхүүр фрэймүүдийг байрлуулцгаая. /* keyframes-tokens.css */
/* * Fade In - бүдгэрч орох анимейшн * Хэрэглээ: хөдөлгөөнт дүрс: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { {-аас тунгалаг байдал: 0; } руу { тунгалаг байдал: 1; } }
Энэхүү ганц @keyframes мэдэгдэл нь манай кодын санд тархсан бүдгэрч буй бүх хөдөлгөөнт дүрсийг орлоно. Цэвэр, энгийн, дэлхий дахинд хэрэглэх боломжтой. Одоо бид энэ токеныг тодорхойлсон тул бид үүнийг төслийн бүх бүрэлдэхүүн хэсгээс ашиглаж болно: .modal { хөдөлгөөнт дүрс: kf-fade-in 0.3s ease-out; }
.хэрэгслийн зөвлөгөө { хөдөлгөөнт дүрс: kf-fade-in 0.2s ease-in-out; }
.мэдэгдэл { хөдөлгөөнт дүрс: kf-fade-in 0.5s ease-out; }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 2 [салаатай] Амит Шин. Тайлбар: Бид бүх @keyframes нэрэндээ kf- угтварыг ашиглаж байна. Энэхүү угтвар нь төсөлд байгаа хөдөлгөөнт дүрстэй нэрлэх зөрчилдөөнөөс сэргийлж, эдгээр түлхүүр фрэймүүд нь манай түлхүүр фрэймийн жетон файлаас ирсэн гэдгийг нэн даруй тодорхой болгодог нэрийн орон зай болж өгдөг. Динамик слайд хийх kf-fade-in түлхүүр фрэймүүд нь маш сайн ажилладаг, учир нь энэ нь энгийн бөгөөд юмыг замбараагүй болгох зай багатай. Гэхдээ бусад хөдөлгөөнт дүрслэлд бид илүү динамик байх ёстой бөгөөд энд CSS-ийн захиалгат шинж чанаруудын асар их хүчийг ашиглах боломжтой. Энэ нь тархсан статик хөдөлгөөнт дүрстэй харьцуулахад түлхүүр фрэймийн жетонууд үнэхээр гялалздаг газар юм. Нийтлэг хувилбарыг авч үзье: "гулсдаг" хөдөлгөөнт дүрс. Гэхдээ хаанаас гулсах вэ? баруун талаас 100px? Зүүн талаас 50%? Үүнийг дэлгэцийн дээд хэсгээс оруулах ёстой юу? Эсвэл доороос нь хөвж орж ирэх болов уу? Маш олон боломжууд байдаг, гэхдээ бид чиглэл, өөрчлөлт тус бүрт тусдаа түлхүүр фрэйм үүсгэхийн оронд бүх хувилбарт дасан зохицох нэг уян хатан токен бүтээх боломжтой: /* * Slide In - чиглэлтэй слайд хөдөлгөөнт дүрс * Чиглэлийг хянахын тулд --kf-slide-f-г ашиглана уу * Өгөгдмөл: зүүнээс гулсуулна (-100%) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-slide-in 0.3s хялбар гарах; * --kf-slide-from: -100px 0; // зүүнээс гулсуулна уу * --kf-slide-from: 100px 0; // баруун талаас гулс * --kf-slide-from: 0 -50px; // дээрээс нь гулсуулна уу */
@keyframes kf-slide-in { {-аас орчуулах: var(--kf-slide-from, -100% 0); } руу { орчуулах: 0 0; } }
Одоо бид зүгээр л --kf-slide-from custom шинж чанарыг өөрчилснөөр л слайдын аль ч чиглэлд энэ @keyframes токеныг ашиглаж болно: .sidebar { хөдөлгөөнт дүрслэл: kf-slide-in 0.3s хялбар гарах; /* Өгөгдмөл утгыг ашигладаг: зүүнээс гулсуулна */ }
.мэдэгдэл { хөдөлгөөнт дүрс: kf-slide-in 0.4s-ийн хялбаршуулах; --kf-slide-from: 0 -50px; /* дээрээс гулсах */ }
.modal { хөдөлгөөнт дүрс: kf- бүдгэрч 0.5 секунд, kf-slide-in 0.5s cuic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* баруун доод талаас гулсуулна уу */ }
Энэ арга нь тууштай байдлыг хадгалахын зэрэгцээ бидэнд гайхалтай уян хатан байдлыг өгдөг. Нэг түлхүүр фрэймийн мэдэгдэл, хязгааргүй боломжууд. Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 3 [салаатай] Амит Шин. Хэрэв бид хөдөлгөөнт дүрсээ илүү уян хатан болгож, "гулсдаг" эффектүүдийг бас бий болгохыг хүсвэлзүгээр л дараагийн хэсэгт харагдахтай адил --kf-slide-to өөрчлөн өмчийг нэмнэ үү. Хоёр чиглэлтэй томруулах түлхүүр фрэймүүд Төслүүд дээр давтагддаг өөр нэг нийтлэг хөдөлгөөнт дүрс бол "томруулах" эффект юм. Энэ нь шарсан талхны мессежийг нарийн томруулж, загваруудыг гайхалтай томруулж эсвэл гарчгийг зөөлхөн жижигрүүлж байгаа эсэхээс үл хамааран томруулах хөдөлгөөнт дүрсүүд хаа сайгүй байдаг. Хуваарийн утга тус бүрд тусад нь түлхүүр фрэйм үүсгэхийн оронд kf томруулсан түлхүүр фрэймүүдийн нэг уян хатан багцыг бүтээцгээе:
/* * Томруулах - масштабтай хөдөлгөөнт дүрс * Хуваарийн утгыг хянахын тулд --kf-zoom-from болон --kf-zoom-to ашиглана уу * Өгөгдмөл: 80%-аас 100% хүртэл томруулдаг (0.8-1) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-томруулах 0.2 сек хялбар болгох; * --kf-zoom-from: 0.5; --kf-томруулах: 1; // 50% -аас 100% хүртэл томруулах * --kf-zoom-from: 1; --kf-томруулах: 0; // 100% -аас 0% хүртэл томруулах * --kf-zoom-from: 1; --kf-томруулах: 1.1; // 100% -аас 110% хүртэл томруулах */
@keyframes kf-томруулах { {-аас масштаб: var(--kf-zoom-from, 0.8); } руу { масштаб: var(--kf-томруулах, 1); } }
Нэг тодорхойлолтоор бид шаардлагатай томруулах өөрчлөлтийг хийж чадна: .шарсан талх { хөдөлгөөнт дүрс: kf-slide-in 0.2 секунд, kf-томруулах 0.4 сек-ийн хурдыг багасгах; --kf-slide-from: 0 100%; /* дээрээс гулсах */ /* Өгөгдмөл томруулагчийг ашигладаг: 80% -аас 100% хүртэл масштабтай */ }
.modal { хөдөлгөөнт дүрс: kf-zoom 0.3s куб-безиер(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* 0% -аас 100% хүртэл гайхалтай томруулсан */ }
.гарчиг { хөдөлгөөнт дүрс: kf-2 секундэд бүдгэрч, kf-zoom 2s хялбар оруулах; --kf-zoom-from: 1.2; --kf-томруулах: 0.8; /* зөөлөн бууруулах */ }
Анхдагч 0.8 (80%) нь шарсан талх мессеж, карт гэх мэт ихэнх UI элементүүдэд төгс ажилладаг бөгөөд онцгой тохиолдлуудад тохируулахад хялбар хэвээр байна. Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 4 [салаатай] Амит Шин. Сүүлийн жишээнүүдээс та сонирхолтой зүйлийг анзаарсан байх: бид хөдөлгөөнт дүрсүүдийг нэгтгэж байна. @keyframes токенуудтай ажиллах гол давуу талуудын нэг нь тэдгээр нь хоорондоо уялдаа холбоотой байхаар бүтээгдсэн байдаг. Энэхүү гөлгөр найрлага нь санамсаргүй бус харин санаатай байдаг. Хөдөлгөөнт дүрслэлийн талаар бид дараа нь илүү дэлгэрэнгүй авч үзэх болно, үүнд асуудал үүсгэж болох ч ихэнх хослолууд нь энгийн бөгөөд хэрэгжүүлэхэд хялбар байдаг. Тайлбар: Энэ нийтлэлийг бичиж байхдаа, магадгүй үүнийг бичсэнийхээ төлөө би орцны хөдөлгөөнт дүрсний санааг бүхэлд нь дахин бодож байгааг олж мэдэв. CSS-ийн сүүлийн үеийн дэвшилтүүд бидэнд эдгээр нь огт хэрэг болж байна уу? Аз болоход Адам Аргайл ижил асуултуудыг судалж, блогтоо гайхалтайгаар илэрхийлэв. Энэ нь энд бичсэнтэй зөрчилддөггүй, гэхдээ таны төслүүд орох хаалганы хөдөлгөөнт дүрс дээр тулгуурладаг бол анхаарч үзэх хэрэгтэй. Тасралтгүй хөдөлгөөнт дүрсүүд "Бүдгэрэх", "гулсуулах", "томруулах" гэх мэт оролтын хөдөлгөөнт дүрсүүд нэг удаа тохиолдож, дараа нь зогсох үед тасралтгүй хөдөлгөөнт дүрс нь анхаарлыг татах эсвэл үргэлжилж буй үйл ажиллагааг илтгэх зорилгоор тодорхойгүй хугацаагаар давтагдана. Миний байнга тааралддаг хамгийн түгээмэл хоёр хөдөлгөөн бол "эргэх" (заагчдыг ачаалах) ба "импульс" (чухал элементүүдийг тодруулах) юм. Эдгээр хөдөлгөөнт дүрс нь түлхүүр фрэймийн жетон үүсгэхэд онцгой сорилтуудыг бий болгодог. Ихэвчлэн нэг төлөвөөс нөгөөд шилждэг орцны хөдөлгөөнт дүрсүүдээс ялгаатай нь тасралтгүй хөдөлгөөнт дүрсүүд нь зан үйлийн хэв маягаараа маш их өөрчлөгддөг байх ёстой. Спин эмч Төсөл бүр олон эргүүлэх хөдөлгөөнт дүрсийг ашигладаг бололтой. Зарим нь цагийн зүүний дагуу, зарим нь цагийн зүүний эсрэг эргэлддэг. Зарим нь нэг удаа 360 градус эргүүлдэг бол зарим нь илүү хурдан нөлөө үзүүлэхийн тулд олон эргэлт хийдэг. Хувилбар бүрийн хувьд тусдаа түлхүүр фрэйм үүсгэхийн оронд бүх хувилбарыг зохицуулах нэг уян хатан эргэлтийг бүтээцгээе:
/* * Spin - эргүүлэх хөдөлгөөнт дүрс * Эргэлтийн хүрээг хянахын тулд --kf-spin-f болон --kf-spin-to-г ашиглана уу * Эргэлтийн хэмжээг хянахын тулд --kf-spin-turns-ийг ашиглана уу * Өгөгдмөл: 0 градусаас 360 градус хүртэл эргэлддэг (1 бүтэн эргэлт) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-spin 1s шугаман хязгааргүй; * --kf-spin-turns: 2; // 2 бүтэн эргэлт * --kf-spin-from: 0deg; --kf-spin-to: 180 градус; // хагас эргэлт * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // цагийн зүүний эсрэг */
@keyframes kf-spin { {-аас эргүүлэх: var(--kf-spin-from, 0deg); } руу { эргүүлэх: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Одоо бид дуртай эргэлтийн хувилбарыг үүсгэж болно:
.loading-spinner { хөдөлгөөнт дүрс: kf-spin 1s шугаман хязгааргүй; /* Өгөгдмөлийг ашигладаг: 0 градусаас 360 градус хүртэл эргэдэг */ }
.хурдан ачаалагч { хөдөлгөөнт дүрс: kf-spin 1.2s ease-in-out хязгааргүй ээлжлэн; --kf-spin-turns: 3; /* Нэг мөчлөгт чиглэл бүрт 3 бүтэн эргэлт*/ }
.шаталсан-урвуу { хөдөлгөөнт дүрс: kf-spin 1.5s алхам(8) хязгааргүй; --kf-spin-to: -360deg; /* цагийн зүүний эсрэг */ }
.subtle-wiggle { хөдөлгөөнт дүрс: kf-spin 2s ease-in-out хязгааргүй ээлжлэн; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* 36 хэм хөдлөх: -18 хэмээс +18 хэмийн хооронд */ }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 5 [салаа] Amit Sheen. Энэ аргын гоо үзэсгэлэн нь ижил түлхүүр фрэймүүд нь эргүүлэгчийг ачаалах, эргүүлэх дүрс, хөдөлгөөнт эффектүүд, тэр ч байтугай олон эргэлттэй цогц хөдөлгөөнт дүрслэлүүдэд ажилладаг. Пульсийн парадокс Импульсийн хөдөлгөөнт дүрс нь өөр өөр шинж чанарыг "импульс" болгож чаддаг тул илүү төвөгтэй байдаг. Зарим нь масштабын импульс, зарим нь тунгалаг байдлын импульс, зарим нь тод байдал эсвэл ханасан байдал зэрэг өнгөний шинж чанарыг идэвхжүүлдэг. Бид өмч тус бүрт тусдаа түлхүүр фрэйм үүсгэхийн оронд ямар ч CSS шинж чанартай ажиллах түлхүүр фрэймүүдийг үүсгэж болно. Масштаб болон тунгалаг байдлын сонголт бүхий импульсийн түлхүүр фрэймийн жишээ энд байна:
/* * Пульс - импульсийн хөдөлгөөнт дүрс * Хэмжээний мужийг хянахын тулд --kf-pulse-scale-f болон --kf-pulse-scale-to-г ашиглана уу. * Тунгалаг байдлын мужийг хянахын тулд --kf-pulse-opacity-from болон --kf-pulse-opacity-to-г ашиглана уу. * Өгөгдмөл: импульс байхгүй (бүх утгууд 1) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-импульс 2s хялбар-д-гадаг хязгааргүй ээлжлэн; * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // импульсийн масштаб * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // тунгалаг байдлын импульс */
@keyframes kf-импульс { {-аас масштаб: var(--kf-pulse-scale-from, 1); тунгалаг байдал: var(--kf-pulse-opacity-from, 1); } руу { scale: var(--kf-pulse-scale-to, 1); тунгалаг байдал: var(--kf-pulse-opacity-to, 1); } }
Энэ нь олон шинж чанарыг идэвхжүүлэх уян хатан импульс үүсгэдэг: .үйдэлд уриалах { хөдөлгөөнт дүрс: kf-pulse 0.6s хязгааргүй ээлжлэн; --kf-pulse-opacity-from: 0.5; /* тунгалаг байдлын импульс */ }
.мэдэгдэл-цэг { хөдөлгөөнт дүрс: kf-импульс 0.6s хялбар-д-гадаг хязгааргүй ээлжлэн; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* масштабын импульс */ }
.текст тодотгох { хөдөлгөөнт дүрс: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* масштаб ба тунгалаг байдлын импульс */ }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 6 [салаа] Amit Sheen. Энэхүү ганц kf-импульсийн түлхүүр фрэйм нь анхаарал татахаас эхлээд гайхалтай онцлох үйл явдлууд хүртэл бүх зүйлийг зохицуулж, өөрчлөхөд хялбар байдаг. Нарийвчилсан зөөлрүүлэх Түлхүүр фрэймийн жетоныг ашиглах нэг сайхан зүйл бол хөдөлгөөнт номын санг өргөжүүлэх, уян харимхай эсвэл үсрэх гэх мэт ихэнх хөгжүүлэгчид эхнээс нь бичихэд төвөг учруулахгүй эффект өгөхөд хялбар байдаг. Энд үсрэлтийн өндрийг хянахын тулд --kf-bounce-from захиалгат шинж чанарыг ашигладаг энгийн "bounce" түлхүүр фрэймийн токенуудын жишээ энд байна. /* * Bounce - үсэрч буй орох анимейшн * Үсрэлтийн өндрийг хянахын тулд --kf-bounce-f-г ашиглана уу * Өгөгдмөл: 100vh-ээс үсрэх (дэлгэц унтраах) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-bounce 3s хялбар оруулах; * --kf-bounce-from: 200px; // 200px өндрөөс үсрэх */
@keyframes kf-bounce { 0% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { орчуулах: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { орчуулах: 0 0; animation-time-function: ease-out; } }
Түлхүүр фрэймийн доторх тооцоололтой тул "уян" гэх мэт хөдөлгөөнт дүрс нь арай төвөгтэй байдаг. Бид --kf-elastic-from-X болон --kf-elastic-from-Y-ийг тусад нь тодорхойлох хэрэгтэй (хоёулаа сонголттой) бөгөөд тэд хамтдаа дэлгэцийн аль ч цэгээс уян харимхай орц үүсгэх боломжийг олгодог.
/* * Elastic In - уян хатан орох хөдөлгөөнт дүрс * Эхлэх байрлалыг хянахын тулд --kf-elastic-from-X болон --kf-elastic-from-Y-г ашиглана уу. * Өгөгдмөл: дээд төвөөс оруулна (0, -100vh) * Хэрэглээ: * хөдөлгөөнт дүрс: kf-elastic-in 2s ease-in-out хоёулаа; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px)-аас оруулна уу */
@keyframes kf-elastic-in { 0% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { орчуулах: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { орчуулах: 0 0; } }
Энэ арга нь зөвхөн нэг захиалгат шинж чанарыг өөрчлөх замаар манай төслийн хүрээнд дэвшилтэт түлхүүр фрэймүүдийг дахин ашиглах, өөрчлөхөд хялбар болгодог.
.bounce-and-zoom { хөдөлгөөнт дүрс: kf-bounce 3s хялбар оруулах, kf-zoom 3s шугаман; --kf-zoom-from: 0; }
.bounce-and-slide { хөдөлгөөнт-бүрэлдэхүүн: нэмэх; /* Хоёр хөдөлгөөнт дүрс нь орчуулгыг ашигладаг */ хөдөлгөөнт дүрс: kf-bounce 3s хялбар оруулах, kf-slide-in 3s хялбар гарах; --kf-slide-from: -200px; }
.уян хөдөлгөөнт дүрс: kf-elastic-in 2s ease-in-out хоёулаа; }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Amit Sheen-ийн Демо 7 [салаатай]. Энэ хүртэл бид түлхүүр фрэймүүдийг хэрхэн ухаалаг, үр ашигтайгаар нэгтгэж болохыг олж харсан. Мэдээжийн хэрэг, та төслийн хэрэгцээнд илүү нийцүүлэн өөрчлөхийг хүсч болох ч бид хэд хэдэн нийтлэг хөдөлгөөнт дүрс, өдөр тутмын хэрэглээний жишээнүүдийг авч үзсэн. Эдгээр түлхүүр фрэймийн жетонуудыг суулгаснаар бид одоо бүх төслийн хүрээнд тогтвортой, тогтвортой хөдөлгөөнт дүрс үүсгэх хүчирхэг блокуудтай боллоо. Давхардсан түлхүүр фрэймүүд, дэлхийн хамрах хүрээний зөрчил байхгүй болно. Бидний бүх хөдөлгөөнт дүрсний хэрэгцээг хангах цэвэрхэн, тохиромжтой арга. Гэхдээ жинхэнэ асуулт бол: Бид эдгээр барилгын блокуудыг хэрхэн хамтад нь бүрдүүлэх вэ? Бүгдийг нэгтгэх Үндсэн фрэймийн жетонуудыг нэгтгэх нь энгийн зүйл гэдгийг бид харсан. Эхний хөдөлгөөнт дүрсийг тодорхойлж, хоёрдахь анимацийг тодорхойлж, шаардлагатай хувьсагчдыг тохируулахаас өөр зүйл бидэнд хэрэггүй, тэгээд л болоо. /* Бүдгэрэх + гулсуулах */ .шарсан талх { хөдөлгөөнт дүрс: kf- бүдгэрч 0.4 секунд, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* Томруулах + бүдгэрүүлэх */ .modal { хөдөлгөөнт дүрс: 0.3 секундын дотор kf бүдгэрч, kf-zoom 0.3s куб-безиер(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-томруулах: 1; }
/* Слайд + импульс */ .мэдэгдэл { хөдөлгөөнт дүрс: kf-slide-in 0.5 секунд, kf-импульс 1.2s хялбар-д-гадаг хязгааргүй ээлжлэн; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
Эдгээр хослолууд нь маш сайн ажилладаг, учир нь хөдөлгөөнт дүрс бүр өөр өөр шинж чанарыг онилдог: тунгалаг байдал, хувиргах (орчуулах/масштаб) гэх мэт. Гэвч заримдаа зөрчилдөөн гардаг бөгөөд бид тэдгээрийг яагаад, хэрхэн шийдвэрлэх талаар мэдэх хэрэгтэй. Хоёр хөдөлгөөнт дүрс нь ижил шинж чанарыг хөдөлгөөнтэй болгохыг оролдоход, жишээлбэл, масштабыг хөдөлгөөнтэй болгох эсвэл тунгалаг байдлыг хоёуланг нь хөдөлгөхөд үр дүн нь таны хүлээж байсан шиг болохгүй. Анхдагч байдлаар, хөдөлгөөнт дүрсүүдийн зөвхөн нэг нь тухайн шинж чанарт хэрэгждэг бөгөөд энэ нь хөдөлгөөнт дүрсний жагсаалтын сүүлчийнх юм. Энэ нь CSS нь ижил өмч дээр олон хөдөлгөөнт дүрсийг хэрхэн зохицуулах хязгаарлалт юм. Жишээлбэл, энэ нь зөвхөн kf-импульсийн хөдөлгөөнт дүрсийг ашиглах тул зориулалтын дагуу ажиллахгүй. .муу-комбо { хөдөлгөөнт дүрс: kf-томруулах 0.5 секунд урагш, kf-импульс 1.2s хязгааргүй ээлжлэн; --kf-zoom-from: 0.5; --kf-томруулах: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
Анимацын нэмэлт Ижил шинж чанарт нөлөөлж буй олон хөдөлгөөнт дүрсийг зохицуулах хамгийн энгийн бөгөөд шууд арга бол хөдөлгөөнт дүрслэлийг ашиглах явдал юм. Дээрх сүүлийн жишээнд kf-pulse хөдөлгөөнт дүрс нь kf-zoom хөдөлгөөнт дүрсийг орлуулсан тул бид анхны томруулагчийг харахгүй бөгөөд хүлээгдэж буй масштабыг 1.2 хүртэл авахгүй. Нэмэх хөдөлгөөнт дүрсийг тохируулснаар бид хөтөчийг хоёр хөдөлгөөнт дүрсийг нэгтгэхийг хэлнэ. Энэ нь бидний хүссэн үр дүнг өгдөг. .component-хоёр { хөдөлгөөнт-бүрэлдэхүүн: нэмэх; }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 8 [салаа] Amit Sheen. Энэ арга нь ижил өмч дээр нөлөөллийг нэгтгэхийг хүсдэг ихэнх тохиолдолд сайн ажилладаг. Энэ нь хөдөлгөөнт дүрсийг статик шинж чанарын утгуудтай хослуулах шаардлагатай үед бас хэрэгтэй. Жишээлбэл, хэрэв бидэнд орчуулах шинж чанарыг ашигладаг элемент байгаа бол түүнийг яг хүссэн газартаа байрлуулж, дараа нь kf-slide-in түлхүүр фрэймүүдээр хөдөлгөөнт дүрс оруулахыг хүсвэл бид хөдөлгөөнт-бүрэлдэхүүнгүйгээр харагдахуйц муухай үсрэлт авах болно. Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Amit Sheen-ийн Демо 9 [салаатай]. Хөдөлгөөнт-бүрэлдэхүүнийг нэмэхээр тохируулсан бол хөдөлгөөнт дүрс нь одоо байгаатай жигд нийлдэгхувиргах тул элемент нь байрандаа үлдэж, хүлээгдэж буй байдлаар хөдөлдөг. Animation Stagger Олон тооны хөдөлгөөнт дүрсийг зохицуулах өөр нэг арга бол тэдгээрийг "ганхуулах" буюу эхнийх нь дууссаны дараа хоёр дахь хөдөлгөөнт дүрсийг бага зэрэг эхлүүлэх явдал юм. Энэ нь тохиолдол бүрт тохирох шийдэл биш, гэхдээ бид орох анимейшн, дараа нь тасралтгүй хөдөлгөөнт дүрстэй үед хэрэг болно. /* бүдгэрэх + тунгалаг байдлын импульс */ .мэдэгдэл { хөдөлгөөнт дүрс: kf-fade-in 2s ease-out, kf-импульс 0.5s 2s хялбар-орох хязгааргүй ээлжлэн; --kf-pulse-opacity-to: 0.5; }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Amit Sheen-ийн Демо 10 [салаатай]. Захиалгын асуудал Бидний хамтран ажилладаг анимэйшнүүдийн ихэнх хэсэг нь хувиргах шинж чанарыг ашигладаг. Ихэнх тохиолдолд энэ нь илүү тохиромжтой байдаг. Мөн хувиргах хөдөлгөөнт дүрсийг GPU хурдасгах боломжтой тул гүйцэтгэлийн давуу талтай. Гэхдээ хэрэв бид хувиргалтыг ашигладаг бол бидний өөрчлөлтийг хийх дараалал чухал гэдгийг хүлээн зөвшөөрөх хэрэгтэй. Маш их. Одоогоор бид түлхүүр фрэймүүдэд хувь хүний хувиргалтыг ашигласан. Техникийн дагуу эдгээрийг тогтмол дарааллаар ашигладаг: эхлээд элементийг орчуулж, дараа нь эргүүлж, дараа нь масштаблана. Энэ нь утга учиртай бөгөөд бидний ихэнх нь хүлээж байгаа зүйл юм. Гэсэн хэдий ч, хэрэв бид хувиргах шинж чанарыг ашигладаг бол функцүүдийн бичсэн дарааллыг тэдгээрийг хэрэглэх дарааллаар тодорхойлно. Энэ тохиолдолд бид ямар нэг зүйлийг X тэнхлэг дээр 100 пикселээр хөдөлгөж, дараа нь 45 градус эргүүлбэл эхлээд 45 градус эргүүлж, дараа нь 100 пикселээр хөдөлгөж байгаатай адилгүй. /* Ягаан дөрвөлжин: Эхлээд орчуул, дараа нь эргүүл */ .жишээлбэл нэг { хувиргах: translateX(100px) эргүүлэх(45deg); }
/* Ногоон дөрвөлжин: Эхлээд эргүүлээд дараа нь орчуулна */ . жишээ-хоёр { хувиргах: эргүүлэх (45 градус) translateX (100 пиксел); }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Демо 11 [салаатай] Амит Шин. Гэхдээ хувиргах дарааллын дагуу бүх бие даасан хувиргалтууд - бидний түлхүүр фрэймийн жетонд ашигласан бүх зүйл нь хувиргах функцээс өмнө хийгддэг. Энэ нь таны хувиргах шинж чанарт тохируулсан бүх зүйл хөдөлгөөнт дүрсний дараа болно гэсэн үг юм. Гэхдээ хэрэв та жишээ нь kf-spin түлхүүр фрэймүүдтэй хамт орчуулахыг тохируулсан бол орчуулга хөдөлгөөнт дүрсээс өмнө хийгдэнэ. Одоохондоо андуурч байна уу?! Энэ нь дараах тохиолдолд статик утгууд нь ижил хөдөлгөөнт дүрст өөр өөр үр дүнд хүргэж болзошгүй нөхцөл байдалд хүргэдэг.
/* Хоёр спиннерийн нийтлэг хөдөлгөөнт дүрс */ .spinner { хөдөлгөөнт дүрс: kf-spin 1s шугаман хязгааргүй; }
/* Ягаан эргүүлэгч: эргүүлэхийн өмнө орчуулах (хувь хүний хувиргалт) */ .spinner-pink { орчуулах: 100% 50%; }
/* Ногоон ээрэх: эргүүлээд дараа нь орчуулах (функцийн дараалал) */ .spinner-ногоон { хувиргах: орчуулах (100%, 50%); }
Үзэгний түлхүүр фрэймийн жетонуудыг үзнэ үү - Amit Sheen-ийн Демо 12 [салаатай]. Эхний ээрэх (ягаан) нь kf-spin-ийг эргүүлэхээс өмнө орчуулга авдаг тул эхлээд байрандаа шилжиж, дараа нь эргэлдэж байгааг харж болно. Хоёрдахь ээрэх (ногоон) нь хувь хүний хувиргалт хийсний дараа хийгдэх translate() функцийг авдаг тул элемент эхлээд эргэлдэж, дараа нь одоогийн өнцөгтэйгээ харьцуулахад хөдөлдөг бөгөөд бид тойрог замын өргөн эффектийг олж авдаг. Үгүй ээ, энэ алдаа биш. Энэ бол бидний CSS-ийн талаар мэдэх ёстой зүйлүүдийн нэг бөгөөд олон хөдөлгөөнт дүрс эсвэл олон хувиргалттай ажиллахдаа санаж байх ёстой. Шаардлагатай бол та rotate() функцийг ашиглан элементүүдийг эргүүлдэг kf-spin-alt түлхүүр фрэймийн нэмэлт багц үүсгэж болно. Хөдөлгөөнийг багасгасан Бид өөр түлхүүр фрэймийн тухай ярьж байгаа ч "хөдөлгөөнгүй" сонголтыг үл тоомсорлож болохгүй. Түлхүүр фрэймийн жетон ашиглахын хамгийн том давуу талуудын нэг нь хүртээмжтэй байх боломжтой бөгөөд үүнийг хийхэд үнэхээр хялбар байдаг. Түлхүүр фрэймүүдийг хүртээмжтэй болгосноор бид хөдөлгөөнийг багасгахыг илүүд үздэг хэрэглэгчдэд нэмэлт ажил, код давхардалгүйгээр илүү жигд, анхаарал сарниулах туршлага олж авах боломжтой. "Багассан хөдөлгөөн"-ийн яг утга нь нэг анимэйшнээс нөгөөд, төслөөс төсөлд бага зэрэг өөрчлөгдөж болох боловч энд хэд хэдэн чухал зүйлийг анхаарч үзэх хэрэгтэй: Түлхүүр фрэймийн дууг хаах Зарим хөдөлгөөнт дүрсийг зөөлрүүлж эсвэл удаашруулж болох ч хөдөлгөөнийг багасгах хүсэлт гаргавал зарим нь бүрмөсөн алга болдог. Импульсийн хөдөлгөөнт дүрс нь сайн жишээ юм. Эдгээр хөдөлгөөнт дүрсүүд хөдөлгөөн багассан горимд ажиллахгүй байгаа эсэхийг шалгахын тулд бид тэдгээрийг тохирох медиа асуулгад зүгээр л боож болно.
@media (prefers-reducted-motion: no-preference) { @keyfrmaes kf-импульс { {-аас масштаб: var(--kf-pulse-scale-from, 1); тунгалаг байдал: var(--kf-pulse-opacity-from, 1); } руу { scale: var(--kf-pulse-scale-to, 1); тунгалаг байдал:var(--kf-pulse-opacity-to, 1); } } }
Энэ нь prepres-reduced-motion-г багасгах тохиргоог хийсэн хэрэглэгчид хөдөлгөөнт дүрсийг харахгүй бөгөөд тэдний сонголтод тохирсон туршлагыг олж авах болно. Шууд орох Орцны хөдөлгөөнт дүрс гэх мэт бид зүгээр л устгаж чадахгүй зарим түлхүүр фрэймүүд байдаг. Утга нь өөрчлөгдөх ёстой, хөдөлгөөнтэй байх ёстой; эс бөгөөс элемент нь зөв утгыг агуулж чадахгүй. Гэхдээ багассан хөдөлгөөнтэй үед анхны утгаас энэ шилжилт шууд явагдах ёстой. Үүнд хүрэхийн тулд бид утга нь эцсийн төлөв рүү шууд шилжих нэмэлт түлхүүр фрэймийг тодорхойлох болно. Эдгээр нь бидний үндсэн түлхүүр фрэйм болж хувирдаг. Дараа нь бид өмнөх жишээн дээрх шиг давуу-багасгасан-хөдөлгөөний тохиргоог үл сонгох горимын ердийн түлхүүр фрэймүүдийг медиа асуулгад нэмнэ. /* хөдөлгөөнийг багасгахын тулд шууд оруулаарай */ @keyframes kf-томруулах { эхлэн, { масштаб: var(--kf-томруулах, 1); } }
@media (prefers-reducted-motion: no-preference) { /* Жинхэнэ томруулсан үндсэн кадрууд */ @keyframes kf-томруулах { {-аас масштаб: var(--kf-zoom-from, 0.8); } руу { масштаб: var(--kf-томруулах, 1); } } }
Ингэснээр хөдөлгөөнийг багасгахыг илүүд үздэг хэрэглэгчид тухайн элемент шууд эцсийн төлөвт нь гарч ирэхийг харах бөгөөд бусад бүх хүмүүс хөдөлгөөнт шилжилтийг авах болно. Зөөлөн хандлага Бид зарим хөдөлгөөнийг хадгалахыг хүсдэг ч анхны хөдөлгөөнт дүрсээс хамаагүй зөөлөн, тайван байх тохиолдол байдаг. Жишээлбэл, бид үсрэх орцыг зөөлөн бүдгэрч орлуулж болно.
@keyframes kf-bounce { /* Хөдөлгөөнийг багасгахын тулд зөөлөн бүдгэрүүлэгч */ }
@media (prefers-reducted-motion: no-preference) { @keyframes kf-bounce { /* Жинхэнэ гол фрэймүүд */ } }
Хөдөлгөөнийг багасгасан хэрэглэгчид одоо ч гэсэн харагдах мэдрэмжийг олж авдаг, гэхдээ үсрэх, уян харимхай хөдөлгөөнт хөдөлгөөнгүйгээр. Барилгын блокууд бэлэн байгаа тул тэдгээрийг хэрхэн бодит ажлын урсгалын нэг хэсэг болгох вэ гэдэг дараагийн асуулт юм. Уян хатан түлхүүр фрэйм бичих нь нэг хэрэг, гэхдээ тэдгээрийг том төсөл дээр найдвартай болгохын тулд би хэцүү аргаар сурах ёстой хэд хэдэн стратеги шаарддаг. Хэрэгжүүлэх стратеги ба шилдэг туршлага Бид түлхүүр фрэймийн жетонуудын хатуу сантай болмогц тэдгээрийг хэрхэн өдөр тутмын ажилд оруулах вэ гэдэг нь жинхэнэ сорилт юм.
Уруу таталт нь бүх түлхүүр фрэймүүдийг нэг дор хаяж, асуудлыг шийдсэн гэж зарлах боловч практик дээр би хамгийн сайн үр дүнг аажмаар үрчилж авснаар олж мэдсэн. Бүдгэрэх, гулсуулах гэх мэт хамгийн түгээмэл хөдөлгөөнт дүрсүүдээс эхэл. Эдгээр нь том дахин бичих шаардлагагүйгээр шууд үнэ цэнийг харуулдаг хялбар ялалтууд юм. Нэрлэх нь анхаарал татахуйц бас нэг зүйл юм. Тогтмол угтвар эсвэл нэрийн орон зай нь аль хөдөлгөөнт дүрс нь токен, аль нь орон нутгийн нэг удаагийнх болохыг тодорхой болгодог. Энэ нь мөн санамсаргүй мөргөлдөхөөс сэргийлж, багийн шинэ гишүүдэд хуваалцсан системийг нэг дороос танихад тусалдаг. Баримт бичиг нь кодтой адил чухал юм. Түлхүүр фрэймийн токен бүрийн дээрх богино тайлбар ч гэсэн дараа нь таамаглахад хэдэн цаг хэмнэх болно. Хөгжүүлэгч нь токен файлыг нээж, шаардлагатай эффектийг хайж олох, хэрэглээний загварыг шууд бүрэлдэхүүн хэсэг рүү хуулах боломжтой байх ёстой. Уян хатан байдал нь энэ аргыг хүчин чармайлт гаргахад үнэ цэнэтэй болгодог зүйл юм. Мэдрэмжтэй захиалгат шинж чанаруудыг ил болгосноор бид багуудад системийг эвдэхгүйгээр хөдөлгөөнт дүрсийг тохируулах боломжийг олгодог. Үүний зэрэгцээ хэт төвөгтэй болгохгүй байхыг хичээ. Чухал ач холбогдол бүхий товчлууруудыг өгч, үлдсэнийг нь бодолцох хэрэгтэй. Эцэст нь хүртээмжтэй байдлыг санаарай. Хөдөлгөөнт дүрс болгонд хөдөлгөөнийг багасгасан хувилбар хэрэггүй, гэхдээ олонх нь үүнийг шаарддаг. Эдгээр тохируулгыг эрт хийх нь бид дараа нь хэзээ ч шинэчлэх шаардлагагүй гэсэн үг бөгөөд энэ нь манай хэрэглэгчид хэзээ ч дурдаагүй байсан ч анхаарал халамж тавих түвшинг харуулж байна.
Миний туршлагаас харахад түлхүүр фрэймийн жетоныг манай дизайны токенуудын ажлын урсгалын нэг хэсэг болгон авч үзэх нь тэдгээрийг наалддаг зүйл юм. Тэдгээрийг байрлуулсны дараа тэд онцгой эффект мэт санагдахаа больж, дизайны хэлний нэг хэсэг болж, бүтээгдэхүүн хэрхэн хөдөлж, хариу үйлдэл үзүүлэхийн байгалийн өргөтгөл болдог. Боож байна Хөдөлгөөнт дүрслэл нь интерфейсийг бүтээх хамгийн баяр баясгалантай хэсгүүдийн нэг байж болох ч бүтэцгүйгээр тэд бухимдах хамгийн том эх үүсвэрүүдийн нэг болж чаддаг. Түлхүүр фрэймийг токен болгон авч үзвэл та ихэвчлэн замбараагүй, удирдахад хэцүү зүйлийг авч, тодорхой, урьдчилан таамаглах боломжтой систем болгон хувиргадаг. Жинхэнэ үнэ цэнэ нь зөвхөн хэдэн мөр код хадгалахад биш юм. Та бүдгэрүүлэх, гулсуулах, томруулах, эргүүлэх үйлдлийг ашиглахдаа энэ нь төслийн хүрээнд хэрхэн ажиллахыг сайн мэддэг гэдэгт итгэлтэй байна. Энэ нь хязгааргүй өөрчлөлтүүдийн эмх замбараагүй байдалгүйгээр захиалгат шинж чанараас үүдэлтэй уян хатан чанар юм. Мөн энэ нь нэмсэн гэхээсээ илүү суурь дээр суурилагдсан хүртээмжтэй байдагдараах бодол. Эдгээр санаанууд өөр өөр баг, өөр өөр кодын бааз дээр ажиллаж байгааг би харсан бөгөөд загвар нь үргэлж ижил байдаг. Токенуудыг байрлуулсны дараа түлхүүр фрэймүүд нь тархай бутархай заль мэхийн цуглуулга байхаа больж, дизайны хэлний нэг хэсэг болно. Тэд бүтээгдэхүүнийг илүү санаатай, илүү тогтвортой, илүү амьд болгодог. Хэрэв та энэ нийтлэлээс нэг зүйлийг авч үзвэл, анимэйшн нь өнгө, хэвлэх, зай зэрэгт бидний өгсөн ижил анхаарал, бүтэцтэй байх ёстой. Түлхүүр фрэймийн жетонд хийсэн бага хэмжээний хөрөнгө оруулалт нь таны интерфэйс шилжих бүрт үр дүнгээ өгдөг.
