این را تصور کنید: به یک پروژه جدید ملحق میشوید، در پایگاه کد فرو میروید، و در چند ساعت اول، چیز ناامیدکنندهای آشنا را کشف میکنید. به صورت پراکنده در برگههای سبک، چندین تعریف @keyframes را برای همان انیمیشنهای اصلی پیدا میکنید. سه افکت مختلف محو شدن، دو یا سه تغییر اسلاید، تعداد انگشت شماری انیمیشن زوم، و حداقل دو انیمیشن چرخشی مختلف، زیرا، خوب، چرا که نه؟ پالس @keyframes { از { مقیاس: 1; } به { مقیاس: 1.1; } }
@keyframes big-pulse { 0٪، 20٪، 100٪ { مقیاس: 1; } 10٪، 40٪ { مقیاس: 1.2; } }
اگر این سناریو آشنا به نظر می رسد، شما تنها نیستید. در تجربه من در پروژههای مختلف، یکی از ثابتترین دستاوردهای سریعی که میتوانم ارائه دهم، یکپارچهسازی و استاندارد کردن فریمهای کلیدی است. این به یک الگوی قابل اعتماد تبدیل شده است که من اکنون مشتاقانه منتظر این پاکسازی به عنوان یکی از اولین کارهایم در هر پایگاه کد جدید هستم. منطق پشت هرج و مرج وقتی به آن فکر می کنید، این افزونگی کاملاً منطقی است. همه ما از انیمیشن های اساسی یکسانی در کارهای روزمره خود استفاده می کنیم: محو شدن، اسلاید، بزرگنمایی، چرخش و سایر جلوه های رایج. این انیمیشن ها بسیار ساده هستند، و به راحتی می توان یک تعریف سریع @keyframes برای انجام کار ایجاد کرد. بدون یک سیستم متحرک متمرکز، توسعهدهندگان به طور طبیعی این فریمهای کلیدی را از ابتدا مینویسند، غافل از اینکه انیمیشنهای مشابه قبلاً در جای دیگری در پایگاه کد وجود دارد. این امر به ویژه هنگام کار در معماری های مبتنی بر مؤلفه رایج است (که این روزها اکثر ما انجام می دهیم)، زیرا تیم ها اغلب به صورت موازی در بخش های مختلف برنامه کار می کنند. نتیجه؟ هرج و مرج انیمیشن. مشکل کوچک بدیهی ترین مشکلات در مورد تکراری فریم های کلیدی، هدر رفتن زمان توسعه و نفخ غیر ضروری کد است. تعاریف چند فریم کلیدی به معنای مکانهای متعددی برای بهروزرسانی در هنگام تغییر نیازمندیها است. آیا نیاز به تنظیم زمان انیمیشن محو شدن دارید؟ شما باید هر نمونه را در پایگاه کد خود جستجو کنید. آیا می خواهید عملکردهای تسهیل را استاندارد کنید؟ در یافتن همه تغییرات موفق باشید. این چند برابر شدن امتیازات نگهداری، حتی بهروزرسانیهای ساده انیمیشن را به یک کار وقتگیر تبدیل میکند. مشکل بزرگتر این تکثیر فریمهای کلیدی مشکل بسیار موذیتری را در زیر سطح ایجاد میکند: تله دامنه جهانی. حتی هنگام کار با معماری های مبتنی بر کامپوننت، فریم های کلیدی CSS همیشه در محدوده جهانی تعریف می شوند. این بدان معنی است که همه فریم های کلیدی برای همه اجزا اعمال می شوند. همیشه. بله، انیمیشن شما لزوما از فریم های کلیدی که در کامپوننت خود تعریف کرده اید استفاده نمی کند. از آخرین فریم های کلیدی استفاده می کند که دقیقاً با همان نامی مطابقت دارند که در دامنه جهانی بارگذاری شده اند. تا زمانی که همه فریم های کلیدی شما یکسان هستند، ممکن است این یک مشکل جزئی به نظر برسد. اما لحظهای که میخواهید یک انیمیشن را برای یک مورد خاص سفارشی کنید، با مشکل مواجه میشوید، یا بدتر از آن، شما عامل ایجاد آن خواهید بود. یا انیمیشن شما کار نخواهد کرد زیرا مؤلفه دیگری که بعد از شما بارگذاری شده است، فریم های کلیدی شما را بازنویسی می کند، یا بارگذاری مؤلفه شما دوام می آورد و به طور تصادفی رفتار انیمیشن را برای هر مؤلفه دیگری با استفاده از نام آن فریم کلیدی تغییر می دهد و ممکن است حتی متوجه آن نباشید. در اینجا یک مثال ساده است که مشکل را نشان می دهد: .component-one { /* سبک های مؤلفه */ انیمیشن: pulse 1s ease-in-out infinite alternate; }
/* این تعریف @keyframes کار نخواهد کرد */ پالس @keyframes { از { مقیاس: 1; } به { مقیاس: 1.1; } }
/* در کد بعدی... */
جزء دو { /* سبک های مؤلفه */ انیمیشن: pulse 1s ease-in-out infinite. }
/* این فریم های کلیدی برای هر دو مؤلفه اعمال می شود */ پالس @keyframes { 0٪، 20٪، 100٪ { مقیاس: 1; } 10٪، 40٪ { مقیاس: 1.2; } }
هر دو مؤلفه از یک نام انیمیشن استفاده می کنند، اما تعریف دوم @keyframes اولین را بازنویسی می کند. اکنون هر دو جزء یک و جزء دو از فریم های کلیدی دوم استفاده می کنند، صرف نظر از اینکه کدام جزء کدام فریم های کلیدی را تعریف کرده است. توکن های Pen Keyframes - نسخه ی نمایشی 1 [فورک شده] توسط آمیت شین را ببینید. بدترین قسمت؟ این اغلب در توسعه محلی کاملاً کار میکند، اما زمانی که فرآیندهای ساخت، ترتیب بارگذاری شیوه نامههای شما را تغییر میدهند، به طرز مرموزی در تولید شکست میخورد. در نهایت با انیمیشنهایی مواجه میشوید که بسته به اینکه کدام مؤلفهها و در چه ترتیبی بارگذاری شدهاند، رفتار متفاوتی دارند. راه حل: فریم های کلیدی یکپارچه پاسخ به این هرج و مرج به طرز شگفت آوری ساده است: فریم های کلیدی پویا از پیش تعریف شده ذخیره شده در یک شیوه نامه مشترک. به جای اینکه اجازه دهیم هر مؤلفه انیمیشنهای خودش را تعریف کند، فریمهای کلیدی متمرکزی ایجاد میکنیم که به خوبی مستند شده و به راحتی قابل دسترسی هستند.استفاده، قابل نگهداری و متناسب با نیازهای خاص پروژه شما. آن را به عنوان نشانه های فریم کلیدی در نظر بگیرید. همانطور که از نشانهها برای رنگها و فاصلهها استفاده میکنیم، و بسیاری از ما در حال حاضر از نشانهها برای ویژگیهای انیمیشن، مانند عملکردهای مدت زمان و آسانسازی استفاده میکنیم، چرا از نشانهها برای فریمهای کلیدی نیز استفاده نکنیم؟ این رویکرد میتواند به طور طبیعی با هر جریان کاری نشانه طراحی فعلی که استفاده میکنید یکپارچه شود، در حالی که مشکل کوچک (تکثیر کد) و مشکل بزرگتر (تعارضات دامنه جهانی) را یکجا حل میکند. ایده ساده است: یک منبع حقیقت واحد برای همه انیمیشن های رایج ما ایجاد کنید. این شیوه نامه مشترک حاوی فریم های کلیدی است که با دقت طراحی شده اند که الگوهای انیمیشنی را که پروژه ما واقعاً استفاده می کند پوشش می دهد. دیگر حدس نمی زنیم که آیا یک انیمیشن محو از قبل جایی در پایگاه کد ما وجود دارد یا خیر. دیگر نیازی به رونویسی تصادفی انیمیشن ها از سایر اجزا نیست. اما نکته اصلی اینجاست: اینها فقط انیمیشن های کپی پیست ایستا نیستند. آنها به گونهای طراحی شدهاند که از طریق ویژگیهای سفارشی CSS، پویا و قابل تنظیم باشند، و به ما امکان میدهند تا ثبات را حفظ کنیم و در عین حال انعطافپذیری برای تطبیق انیمیشنها با موارد استفاده خاص داشته باشیم، مثلاً اگر به یک انیمیشن «پالسی» کمی بزرگتر در یک مکان نیاز دارید. ساخت اولین توکن Keyframes یکی از اولین میوههایی که باید به آن بپردازیم، انیمیشن «محو شدن» است. در یکی از پروژه های اخیرم، بیش از دوجین تعریف مجزای محو شدن پیدا کردم، و بله، همه آنها به سادگی کدورت را از 0 به 1 متحرک کردند. بنابراین، بیایید یک stylesheet جدید ایجاد کنیم، آن را kf-tokens.css بنامیم، آن را در پروژه خود وارد کنیم و فریم های کلیدی خود را با نظرات مناسب در داخل آن قرار دهیم. /* keyframes-tokens.css */
/* * محو شدن در - محو شدن انیمیشن ورودی * استفاده: انیمیشن: kf-fade-in 0.3s ease-out. */ @keyframes kf-fade-in { از { کدورت: 0; } به { کدورت: 1; } }
این اعلان کلید @keyframes جایگزین همه آن انیمیشنهای محو پراکنده در پایگاه کد ما میشود. تمیز، ساده و قابل اجرا در سطح جهانی. و اکنون که این توکن را تعریف کرده ایم، می توانیم از هر مؤلفه ای در سراسر پروژه خود استفاده کنیم: .modal { انیمیشن: kf-fade-in 0.3s ease-out; }
.tooltip { انیمیشن: kf-fade-in 0.2s ease-in-out; }
اطلاع رسانی { انیمیشن: kf-fade-in 0.5s ease-out; }
توکن های Pen Keyframes - نسخه ی نمایشی 2 [فورک شده] توسط آمیت شین را ببینید. توجه: ما از یک پیشوند kf- در نامهای @keyframes خود استفاده میکنیم. این پیشوند به عنوان فضای نامی عمل میکند که از تداخل نامگذاری با انیمیشنهای موجود در پروژه جلوگیری میکند و بلافاصله مشخص میکند که این فریمهای کلیدی از فایل نشانههای فریم کلیدی ما آمدهاند. ساخت اسلاید پویا فریمهای کلیدی kf-fade-in عالی کار میکنند زیرا ساده هستند و فضای کمی برای به هم ریختن کارها وجود دارد. با این حال، در انیمیشنهای دیگر، ما باید بسیار پویاتر باشیم و در اینجا میتوانیم از قدرت عظیم ویژگیهای سفارشی CSS استفاده کنیم. اینجاست که توکن های فریم های کلیدی در مقایسه با انیمیشن های استاتیک پراکنده واقعا می درخشند. بیایید یک سناریوی رایج را در نظر بگیریم: انیمیشنهای "اسلاید-در". اما از کجا وارد شوید؟ 100 پیکسل از سمت راست؟ 50 درصد از سمت چپ؟ آیا باید از بالای صفحه وارد شود؟ یا شاید از پایین شناور شوید؟ امکانات بسیار زیادی وجود دارد، اما به جای ایجاد فریم های کلیدی جداگانه برای هر جهت و هر تغییر، می توانیم یک توکن انعطاف پذیر بسازیم که با همه سناریوها سازگار باشد: /* * اسلاید در - انیمیشن اسلاید جهت دار * برای کنترل جهت از --kf-slide-from استفاده کنید * پیشفرض: از سمت چپ به داخل اسلاید میشود (-100%) * استفاده: * انیمیشن: kf-slide-in 0.3s ease-out. * --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 سفارشی، از این توکن @keyframes برای هر جهت اسلاید استفاده کنیم: نوار کناری { انیمیشن: kf-slide-in 0.3s ease-out; /* از مقدار پیش فرض استفاده می کند: از سمت چپ اسلاید می کند */ }
اطلاع رسانی { انیمیشن: kf-slide-in 0.4s ease-out; --kf-slide-from: 0 -50px; /* از بالا اسلاید */ }
.modal { انیمیشن: kf-fade-in 0.5s kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* اسلاید از پایین سمت راست */ }
این رویکرد در عین حفظ ثبات به ما انعطاف پذیری باورنکردنی می دهد. یک اعلان فریم کلیدی، امکانات بی نهایت. توکن های Pen Keyframes - نسخه ی نمایشی 3 [فورک شده] توسط آمیت شین را ببینید. و اگر میخواهیم انیمیشنهایمان را انعطافپذیرتر کنیم و جلوههای "slide-out" را نیز در اختیار داشته باشیم، میتوانیمبه سادگی یک --kf-slide- به ویژگی سفارشی اضافه کنید، مشابه آنچه در بخش بعدی خواهیم دید. زوم دو جهته فریم های کلیدی یکی دیگر از انیمیشنهای متداول که در پروژهها تکرار میشود، جلوههای «zoom» است. فرقی نمیکند که مقیاسپذیری ظریف برای پیامهای نان تست، بزرگنمایی چشمگیر برای مدالها، یا یک افکت کاهش ملایم برای سرفصلها، انیمیشنهای زوم همه جا هستند. به جای ایجاد فریم های کلیدی جداگانه برای هر مقدار مقیاس، بیایید یک مجموعه انعطاف پذیر از فریم های کلیدی با زوم kf بسازیم:
/* * بزرگنمایی - انیمیشن در مقیاس * از --kf-zoom-from و --kf-zoom-to برای کنترل مقادیر مقیاس استفاده کنید * پیش فرض: بزرگنمایی از 80٪ تا 100٪ (0.8 تا 1) * استفاده: * انیمیشن: kf-zoom 0.2s ease-out. * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // بزرگنمایی از 50% تا 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // بزرگنمایی از 100% تا 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // زوم از 100% تا 110% */
@keyframes kf-zoom { از { مقیاس: var(--kf-zoom-from, 0.8); } به { مقیاس: var(--kf-zoom-to, 1); } }
با یک تعریف، می توانیم به هر تغییر بزرگنمایی که نیاز داریم دست یابیم: نان تست { انیمیشن: kf-slide-in 0.2s, kf-zoom 0.4s ease out; --kf-slide-from: 0 100%; /* از بالا اسلاید */ /* از زوم پیش فرض استفاده می کند: از 80% تا 100% مقیاس می کند */ }
.modal { انیمیشن: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* بزرگنمایی چشمگیر از 0% تا 100% */ }
.heading { انیمیشن: kf-fade-in 2s kf-zoom 2s ease-in; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* کاهش ملایم مقیاس */ }
پیشفرض 0.8 (80%) برای اکثر عناصر UI، مانند پیامها و کارتهای تست، کاملاً کار میکند، در حالی که هنوز برای موارد خاص سفارشیسازی آسان است. توکن های Pen Keyframes - نسخه ی نمایشی 4 [فورک شده] توسط آمیت شین را ببینید. ممکن است در نمونههای اخیر متوجه چیز جالبی شده باشید: ما انیمیشنها را با هم ترکیب کردهایم. یکی از مزایای کلیدی کار با توکن های @keyframes این است که آنها به گونه ای طراحی شده اند که به طور یکپارچه با یکدیگر ادغام شوند. این ترکیب صاف عمدی است نه تصادفی. ما بعداً در مورد ترکیب بندی انیمیشن با جزئیات بیشتری صحبت خواهیم کرد، از جمله جایی که ممکن است مشکل ساز شوند، اما اکثر ترکیب ها ساده و آسان هستند. نکته: در حین نوشتن این مقاله و شاید به دلیل نوشتن آن، متوجه شدم که در کل ایده انیمیشن های ورودی تجدید نظر کرده ام. با تمام پیشرفت های اخیر در CSS، آیا ما هنوز به آنها نیاز داریم؟ خوشبختانه، آدام آرگیل همان سوالات را بررسی کرد و آنها را به طرز درخشانی در وبلاگ خود بیان کرد. این با آنچه در اینجا نوشته شده است مغایرتی ندارد، اما رویکردی را ارائه می دهد که ارزش بررسی دارد، به خصوص اگر پروژه های شما به شدت به انیمیشن های ورودی متکی باشند. انیمیشن های پیوسته در حالی که انیمیشن های ورودی، مانند «محو شدن»، «اسلاید» و «زوم» یک بار اتفاق می افتند و سپس متوقف می شوند، انیمیشن های پیوسته به طور نامحدود حلقه می زنند تا توجه را جلب کنند یا فعالیت در حال انجام را نشان دهند. دو متداول ترین انیمیشن پیوسته ای که من با آنها مواجه می شوم عبارتند از "spin" (برای بارگذاری نشانگرها) و "pulse" (برای برجسته کردن عناصر مهم). این انیمیشنها چالشهای منحصربهفردی را برای ایجاد توکنهای فریم کلیدی ارائه میکنند. برخلاف انیمیشن های ورودی که معمولاً از حالتی به حالت دیگر می روند، انیمیشن های پیوسته باید در الگوهای رفتاری خود بسیار قابل تنظیم باشند. دکتر اسپین به نظر می رسد هر پروژه ای از چندین انیمیشن چرخشی استفاده می کند. برخی در جهت عقربه های ساعت می چرخند، برخی دیگر در خلاف جهت عقربه های ساعت. برخی یک چرخش 360 درجه انجام می دهند، برخی دیگر برای جلوه سریع تر چرخش های متعددی انجام می دهند. به جای ایجاد فریم های کلیدی مجزا برای هر تغییر، بیایید یک چرخش انعطاف پذیر بسازیم که تمام سناریوها را مدیریت می کند:
/* * چرخش - انیمیشن چرخش * برای کنترل محدوده چرخش از --kf-spin-from و --kf-spin-to استفاده کنید * از --kf-spin-turns برای کنترل مقدار چرخش استفاده کنید * پیش فرض: از 0 درجه به 360 درجه می چرخد (1 چرخش کامل) * استفاده: * انیمیشن: kf-spin 1s linear infinite. * --kf-spin-turns: 2; // 2 چرخش کامل * --kf-spin-from: 0deg; --kf-spin-to: 180 deg; // نیم چرخش * --kf-spin-from: 0deg; --kf-spin-to: -360 deg. // خلاف جهت عقربه های ساعت */
@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 linear infinite; /* از پیش فرض استفاده می کند: از 0 درجه به 360 درجه می چرخد */ }
سریع لودر { انیمیشن: kf-spin 1.2s ease-in-out infinite alternate. --kf-spin-turns: 3; /* 3 چرخش کامل برای هر جهت در هر چرخه*/ }
.steped-reverse { انیمیشن: kf-spin 1.5s step(8) infinite; --kf-spin-to: -360 deg. /* خلاف جهت عقربه های ساعت */ }
.subtle-wiggle { انیمیشن: kf-spin 2s ease-in-out infinite alternate; --kf-spin-از: -16 درجه؛ --kf-spin-to: 32 deg; /* تکان دادن 36 درجه: بین -18 درجه و +18 درجه */ }
Tokens Pen Keyframes - Demo 5 [فورک شده] توسط Amit Sheen را ببینید. زیبایی این رویکرد این است که همان فریمهای کلیدی برای بارگیری اسپینرها، آیکونهای چرخان، جلوههای تکان دادن و حتی انیمیشنهای پیچیده چند چرخشی کار میکنند. پارادوکس پالس انیمیشنهای پالس پیچیدهتر هستند زیرا میتوانند ویژگیهای مختلف را «پالس» کنند. برخی مقیاس را پالس می کنند، برخی دیگر کدورت، و برخی از ویژگی های رنگ پالس مانند روشنایی یا اشباع. به جای ایجاد فریم های کلیدی جداگانه برای هر ویژگی، می توانیم فریم های کلیدی ایجاد کنیم که با هر ویژگی CSS کار می کنند. در اینجا نمونه ای از یک فریم کلیدی پالس با گزینه های مقیاس و کدورت آورده شده است:
/* * پالس - انیمیشن ضربان دار * از --kf-pulse-scale-from و --kf-pulse-scale-to برای کنترل محدوده مقیاس استفاده کنید * برای کنترل محدوده کدورت از --kf-pulse-opacity-from و --kf-pulse-opacity-to استفاده کنید * پیش فرض: بدون پالس (همه مقادیر 1) * استفاده: * انیمیشن: kf-pulse 2s ease-in-out infinite alternate. * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // پالس مقیاس * --kf-pulse-opacity-از: 0.7; --kf-pulse-opacity-to: 1; // پالس کدورت */
@keyframes kf-pulse { از { مقیاس: var(--kf-pulse-scale-from, 1); کدورت: var(--kf-pulse-opacity-from, 1); } به { مقیاس: var(--kf-pulse-scale-to, 1); کدورت: var(--kf-pulse-opacity-to, 1); } }
این یک پالس انعطاف پذیر ایجاد می کند که می تواند چندین ویژگی را متحرک کند: .call-to-action { انیمیشن: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-از: 0.5; /* پالس کدورت */ }
.notification-dot { انیمیشن: kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-از: 0.9; --kf-pulse-scale-to: 1.1; /* نبض مقیاس */ }
.text-highlight { انیمیشن: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-از: 0.8; --kf-pulse-opacity-از: 0.2; /* مقیاس و پالس کدورت */ }
توکن های Pen Keyframes - نسخه ی نمایشی 6 [فورک شده] توسط آمیت شین را ببینید. این فریم کلیدی تک پالس kf میتواند همه چیز را از جلب توجه ظریف گرفته تا برجستهسازیهای چشمگیر انجام دهد، در حالی که به راحتی قابل سفارشیسازی است. تسهیل پیشرفته یکی از نکات مهم در مورد استفاده از نشانههای فریم کلیدی این است که چقدر آسان است که کتابخانه انیمیشن خود را گسترش دهیم و افکتهایی را ارائه کنیم که اکثر توسعهدهندگان از نوشتن آنها از ابتدا خسته نباشند، مانند elastic یا bounce. در اینجا نمونهای از یک توکن فریم کلیدی ساده «جهش» است که از یک ویژگی --kf-bounce-from سفارشی برای کنترل ارتفاع پرش استفاده میکند. /* * پرش - انیمیشن ورودی پرش * از --kf-bounce-from برای کنترل ارتفاع پرش استفاده کنید * پیش فرض: پرش از 100 ولت ساعت (خاموش صفحه) * استفاده: * انیمیشن: kf-bounce 3s ease-in. * --kf-bounce-from: 200px. // پرش از ارتفاع 200 پیکسل */
@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; انیمیشن-زمان-عملکرد: 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; } }
این رویکرد استفاده مجدد و سفارشی کردن فریم های کلیدی پیشرفته را در پروژه ما، تنها با تغییر یک ویژگی سفارشی، آسان می کند.
.پرش و زوم { انیمیشن: kf-bounce 3s ease-in، kf-zoom 3s خطی; --kf-zoom-from: 0; }
Bounce-and-slide { انیمیشن-ترکیب: افزودن; /* هر دو انیمیشن از ترجمه استفاده می کنند */ انیمیشن: kf-bounce 3s ease-in، kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
الاستیک در { انیمیشن: kf-elastic-in 2s ease-in-out هر دو. }
Tokens Pen Keyframes - Demo 7 [فورک شده] توسط Amit Sheen را ببینید. تا این مرحله، ما دیدهایم که چگونه میتوانیم فریمهای کلیدی را به روشی هوشمندانه و کارآمد ادغام کنیم. البته، ممکن است بخواهید چیزهایی را تغییر دهید تا با نیازهای پروژه شما مطابقت داشته باشد، اما ما نمونه هایی از چندین انیمیشن رایج و موارد استفاده روزمره را پوشش داده ایم. و با وجود این توکنهای فریم کلیدی، اکنون بلوکهای سازنده قدرتمندی برای ایجاد انیمیشنهای ثابت و قابل نگهداری در کل پروژه داریم. دیگر خبری از فریمهای کلیدی تکراری نیست، دیگر خبری از تضاد دامنه جهانی نیست. فقط یک روش تمیز و راحت برای رسیدگی به تمام نیازهای انیمیشن ما. اما سوال واقعی این است: چگونه این بلوک های ساختمانی را با هم ترکیب کنیم؟ قرار دادن آن همه با هم ما دیدهایم که ترکیب نشانههای اصلی فریم کلیدی ساده است. ما به چیز خاصی نیاز نداریم جز اینکه انیمیشن اول را تعریف کنیم، دومی را تعریف کنیم، متغیرها را در حد نیاز تنظیم کنیم و تمام. /* محو شدن + اسلاید در */ نان تست { انیمیشن: kf-fade-in 0.4s kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* بزرگنمایی + محو کردن */ .modal { انیمیشن: kf-fade-in 0.3s kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/* اسلاید در + پالس */ اطلاع رسانی { انیمیشن: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
این ترکیب ها به زیبایی کار می کنند زیرا هر انیمیشن ویژگی متفاوتی را هدف قرار می دهد: opacity، تبدیل (ترجمه/مقیاس)، و غیره. اما گاهی اوقات تضادهایی وجود دارد و ما باید بدانیم چرا و چگونه با آنها برخورد کنیم. وقتی دو انیمیشن سعی میکنند یک ویژگی را متحرک کنند - برای مثال، هر دو مقیاس متحرک یا هر دو کدورت متحرک - نتیجه آن چیزی نخواهد بود که انتظار دارید. به طور پیش فرض، تنها یکی از انیمیشن ها در واقع به آن ویژگی اعمال می شود که آخرین مورد در لیست انیمیشن ها است. این یک محدودیت در نحوه مدیریت CSS چندین انیمیشن در یک ویژگی است. به عنوان مثال، این کار آنطور که در نظر گرفته شده است کار نخواهد کرد زیرا فقط انیمیشن kf-pulse اعمال می شود. .bad-combo { انیمیشن: kf-zoom 0.5s به جلو، kf-pulse 1.2s infinite alternate; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-از: 0.8; --kf-pulse-scale-to: 1.1; }
اضافه شدن انیمیشن ساده ترین و مستقیم ترین راه برای مدیریت انیمیشن های متعددی که روی یک ویژگی تأثیر می گذارند، استفاده از ویژگی animation-composition است. در آخرین مثال بالا، انیمیشن kf-pulse جایگزین انیمیشن kf-zoom شده است، بنابراین زوم اولیه را نخواهیم دید و مقیاس مورد انتظار را به 1.2 نخواهیم رساند. با تنظیم animation-composition برای افزودن، به مرورگر میگوییم که هر دو انیمیشن را ترکیب کند. این به ما نتیجه ای می دهد که می خواهیم. جزء دو { انیمیشن-ترکیب: افزودن; }
Tokens Pen Keyframes - Demo 8 [فورک شده] توسط Amit Sheen را ببینید. این رویکرد برای اکثر مواردی که میخواهیم افکتها را روی یک ویژگی ترکیب کنیم، به خوبی کار میکند. همچنین زمانی مفید است که ما نیاز به ترکیب انیمیشن ها با مقادیر ویژگی های ثابت داشته باشیم. به عنوان مثال، اگر عنصری داشته باشیم که از خاصیت translate برای قرار دادن آن در جایی که میخواهیم استفاده میکند، و سپس بخواهیم آن را با فریمهای کلیدی kf-slide-in متحرک کنیم، یک پرش ناخوشایند قابل مشاهده بدون انیمیشن-ترکیب دریافت میکنیم. توکن های Pen Keyframes - نسخه ی نمایشی 9 [فورک شده] توسط آمیت شین را ببینید. با مجموعه ای از انیمیشن-ترکیب برای اضافه کردن، انیمیشن به آرامی با موجود ترکیب می شودتبدیل شود، بنابراین عنصر در جای خود باقی می ماند و همانطور که انتظار می رود متحرک می شود. انیمیشن تلو تلو خوردن یکی دیگر از روشهای مدیریت چندین انیمیشن این است که آنها را «تلو تلو خوردن» کنید – یعنی انیمیشن دوم را کمی بعد از اتمام انیمیشن اول شروع کنید. این راه حلی نیست که برای هر موردی کار کند، اما زمانی مفید است که یک انیمیشن ورودی و به دنبال آن یک انیمیشن پیوسته داشته باشیم. /* محو شدن + پالس کدورت */ اطلاع رسانی { انیمیشن: kf-fade-in 2s ease out, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-palse-opacity-to: 0.5; }
Tokens Pen Keyframes - Demo 10 [فورک شده] توسط Amit Sheen را ببینید. سفارش مهم است بخش بزرگی از انیمیشن هایی که با آنها کار می کنیم از ویژگی transform استفاده می کنند. در بیشتر موارد، این به سادگی راحت تر است. همچنین دارای مزیت عملکردی است زیرا انیمیشن های تبدیل را می توان با GPU شتاب داد. اما اگر از تبدیل ها استفاده کنیم، باید بپذیریم که ترتیب انجام تبدیل هایمان اهمیت دارد. خیلی در فریم های کلیدی خود تاکنون، از تبدیل های فردی استفاده کرده ایم. با توجه به مشخصات، اینها همیشه به ترتیب ثابت اعمال می شوند: ابتدا عنصر ترجمه می شود، سپس می چرخد، سپس مقیاس می شود. این منطقی است و همان چیزی است که اکثر ما انتظار داریم. با این حال، اگر از ویژگی transform استفاده کنیم، ترتیبی که توابع در آن نوشته میشوند، ترتیبی است که در آن اعمال میشوند. در این حالت، اگر چیزی را 100 پیکسل روی محور X حرکت دهیم و سپس 45 درجه بچرخانیم، مثل این نیست که ابتدا آن را 45 درجه بچرخانیم و سپس آن را 100 پیکسل حرکت دهیم. /* مربع صورتی: ابتدا ترجمه کنید، سپس بچرخانید */ .example-one { transform: translateX(100px) rotate(45deg); }
/* مربع سبز: ابتدا بچرخانید، سپس ترجمه کنید */ .example-two { transform: rotate(45deg) translateX(100px); }
Tokens Pen Keyframes - Demo 11 [فورک شده] توسط Amit Sheen را ببینید. اما با توجه به ترتیب تبدیل، همه تبدیلهای منفرد - همه چیزهایی که برای نشانههای فریم کلیدی استفاده کردهایم - قبل از توابع تبدیل اتفاق میافتند. یعنی هر چیزی که در ویژگی transform تنظیم کنید بعد از انیمیشن ها اتفاق می افتد. اما اگر برای مثال، ترجمه را با فریم های کلیدی kf-spin تنظیم کنید، ترجمه قبل از انیمیشن اتفاق می افتد. هنوز گیج شدی؟! این منجر به موقعیتهایی میشود که مقادیر استاتیک میتوانند نتایج متفاوتی را برای یک انیمیشن ایجاد کنند، مانند مورد زیر:
/* انیمیشن مشترک برای هر دو اسپینر */ اسپینر { انیمیشن: kf-spin 1s linear infinite; }
/* Spinner صورتی: ترجمه قبل از چرخش (تبدیل فردی) */ .spiner-pink { ترجمه: 100% 50%; }
/* چرخنده سبز: چرخش و سپس ترجمه (ترتیب تابع) */ اسپینر-سبز { transform: translate(100%, 50%); }
توکن های Pen Keyframes - نسخه ی نمایشی 12 [فورک شده] توسط آمیت شین را ببینید. می بینید که اولین اسپینر (صورتی) یک ترجمه دریافت می کند که قبل از چرخش kf-spin اتفاق می افتد، بنابراین ابتدا به جای خود حرکت می کند و سپس می چرخد. اسپینر دوم (سبز) تابع translate() را دریافت میکند که پس از تبدیل فردی اتفاق میافتد، بنابراین عنصر ابتدا میچرخد، سپس نسبت به زاویه فعلی خود حرکت میکند و ما آن اثر مدار گسترده را دریافت میکنیم. نه، این یک باگ نیست. این فقط یکی از آن چیزهایی است که باید در مورد CSS بدانیم و هنگام کار با چندین انیمیشن یا چندین تبدیل به خاطر داشته باشیم. در صورت نیاز، میتوانید مجموعه دیگری از فریمهای کلیدی kf-spin-alt ایجاد کنید که عناصر را با استفاده از تابع rotate() بچرخانید. حرکت کاهش یافته و در حالی که ما در مورد فریم های کلیدی جایگزین صحبت می کنیم، نمی توانیم گزینه "بدون انیمیشن" را نادیده بگیریم. یکی از بزرگترین مزیتهای استفاده از نشانههای فریم کلیدی این است که قابلیت دسترسی را میتوان انجام داد و در واقع انجام آن بسیار آسان است. با طراحی فریمهای کلیدی خود با در نظر گرفتن قابلیت دسترسی، میتوانیم اطمینان حاصل کنیم که کاربرانی که حرکت کاهشیافته را ترجیح میدهند، بدون کار اضافی یا تکرار کد، تجربهای روانتر و کمتر حواسپرتی را به دست میآورند. معنای دقیق "حرکت کاهش یافته" می تواند کمی از انیمیشنی به انیمیشن دیگر و از پروژه ای به پروژه دیگر تغییر کند، اما در اینجا چند نکته مهم وجود دارد که باید در نظر داشته باشید: بیصدا کردن فریمهای کلیدی در حالی که برخی از انیمیشن ها را می توان نرم یا کاهش داد، برخی دیگر نیز وجود دارند که در صورت درخواست کاهش حرکت، به طور کامل ناپدید می شوند. انیمیشن های پالس مثال خوبی هستند. برای اطمینان از اینکه این انیمیشنها در حالت حرکت کاهشیافته اجرا نمیشوند، میتوانیم آنها را به سادگی در کوئری رسانه مناسب بپیچیم.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { از { مقیاس: var(--kf-pulse-scale-from, 1); کدورت: var(--kf-pulse-opacity-from, 1); } به { مقیاس: var(--kf-pulse-scale-to, 1); کدورت:var(--kf-pulse-opacity-to, 1); } } }
این تضمین میکند که کاربرانی که اولویتها-حرکت کاهشیافته را برای کاهش تنظیم کردهاند، انیمیشن را نبینند و تجربهای را دریافت کنند که با اولویت آنها مطابقت دارد. ورود فوری برخی از فریم های کلیدی وجود دارد که نمی توانیم به سادگی حذف کنیم، مانند انیمیشن های ورودی. مقدار باید تغییر کند، باید متحرک شود. در غیر این صورت، عنصر مقادیر صحیح را نخواهد داشت. اما در حرکت کاهش یافته، این انتقال از مقدار اولیه باید فوری باشد. برای رسیدن به این هدف، مجموعه اضافی از فریمهای کلیدی را تعریف میکنیم که در آن مقدار بلافاصله به حالت پایانی میپرد. این فریمهای کلیدی پیشفرض ما هستند. سپس، مانند مثال قبلی، فریمهای کلیدی معمولی را در داخل یک پرسوجو رسانه برای تنظیمات ترجیحی-کاهش-حرکت روی بدون ترجیح اضافه میکنیم. /* برای کاهش حرکت فوراً وارد شوید */ @keyframes kf-zoom { از، به { مقیاس: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* فریم های کلیدی بزرگنمایی اصلی */ @keyframes kf-zoom { از { مقیاس: var(--kf-zoom-from, 0.8); } به { مقیاس: var(--kf-zoom-to, 1); } } }
به این ترتیب، کاربرانی که حرکت کاهشیافته را ترجیح میدهند، میبینند که عنصر فوراً در حالت نهایی ظاهر میشود، در حالی که بقیه افراد انتقال متحرک را دریافت میکنند. رویکرد نرم مواردی وجود دارد که ما می خواهیم کمی حرکت را حفظ کنیم، اما بسیار نرم تر و آرام تر از انیمیشن اصلی. به عنوان مثال، ما می توانیم یک ورودی پرش را با یک محو شدن ملایم جایگزین کنیم.
@keyframes kf-bounce { /* محو شدن نرم برای کاهش حرکت */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* فریم های کلیدی پرش اصلی */ } }
اکنون، کاربرانی که حرکت کاهش یافته را فعال کردهاند، هنوز حس ظاهری را دارند، اما بدون حرکت شدید یک پویانمایی یا انیمیشن الاستیک. با وجود بلوک های ساختمانی، سوال بعدی این است که چگونه می توان آنها را بخشی از جریان کار واقعی کرد. نوشتن فریم های کلیدی انعطاف پذیر یک چیز است، اما قابل اعتماد ساختن آنها در یک پروژه بزرگ به چند استراتژی نیاز دارد که من مجبور شدم آنها را به سختی یاد بگیرم. استراتژی های پیاده سازی و بهترین شیوه ها هنگامی که یک کتابخانه جامد از نشانه های فریم کلیدی داشته باشیم، چالش واقعی این است که چگونه آنها را وارد کارهای روزمره کنیم.
وسوسه این است که همه فریم های کلیدی را به یکباره رها کنیم و مشکل را حل شده اعلام کنیم، اما در عمل متوجه شده ام که بهترین نتایج از پذیرش تدریجی حاصل می شود. با متداولترین انیمیشنها مانند fade یا slide شروع کنید. اینها بردهای آسانی هستند که ارزش فوری را بدون نیاز به بازنویسی های بزرگ نشان می دهند. نامگذاری نکته دیگری است که در خور توجه است. یک پیشوند یا فضای نام ثابت مشخص میکند که کدام انیمیشنها نشانهها و کدامها یکباره محلی هستند. همچنین از برخوردهای تصادفی جلوگیری می کند و به اعضای جدید تیم کمک می کند تا سیستم مشترک را در یک نگاه تشخیص دهند. مستندات به اندازه خود کد مهم هستند. حتی یک نظر کوتاه بالای هر توکن فریم کلیدی میتواند ساعتها بعد از حدس زدن صرفهجویی کند. یک توسعه دهنده باید بتواند فایل توکن ها را باز کند، اثر مورد نیاز خود را اسکن کند و الگوی استفاده را مستقیماً در مؤلفه خود کپی کند. انعطاف پذیری چیزی است که این رویکرد را ارزش تلاش را دارد. با افشای ویژگیهای سفارشی معقول، به تیمها فضایی میدهیم تا انیمیشن را بدون شکستن سیستم تطبیق دهند. در عین حال سعی کنید زیاد پیچیده نشوید. دستگیره های مهم را تهیه کنید و بقیه را در نظر بگیرید. در نهایت، دسترسی را به خاطر بسپارید. هر انیمیشنی به جایگزینی با حرکت کاهش یافته نیاز ندارد، اما بسیاری از آنها نیاز دارند. پخت در این تنظیمات به این معنی است که ما هرگز مجبور نیستیم آنها را بعداً بازسازی کنیم، و سطح مراقبتی را نشان می دهد که کاربران ما حتی اگر هرگز به آن اشاره نکنند متوجه آن خواهند شد.
در تجربه من، تلقی کردن توکنهای فریم کلیدی به عنوان بخشی از گردش کار نشانههای طراحی ما، چیزی است که باعث میشود آنها بمانند. هنگامی که آنها در جای خود قرار می گیرند، دیگر احساس جلوه های ویژه نمی کنند و به بخشی از زبان طراحی تبدیل می شوند، بسط طبیعی نحوه حرکت و واکنش محصول. بسته بندی انیمیشنها میتوانند یکی از شادترین بخشهای رابطهای ساختمان باشند، اما بدون ساختار، میتوانند به یکی از بزرگترین منابع ناامیدی نیز تبدیل شوند. با در نظر گرفتن فریمهای کلیدی بهعنوان توکن، چیزی را انتخاب میکنید که معمولاً مدیریت آن کثیف و سخت است و آن را به یک سیستم واضح و قابل پیشبینی تبدیل میکنید. ارزش واقعی فقط در ذخیره چند خط کد نیست. این اطمینان است که وقتی از محو، اسلاید، زوم یا چرخش استفاده میکنید، دقیقاً میدانید که چگونه در پروژه عمل میکند. این در انعطافپذیری است که از ویژگیهای سفارشی و بدون هرج و مرج تغییرات بیپایان ناشی میشود. و به جای اینکه به عنوان اضافه شود، در دسترس پذیری ساخته شده در پایه استیک فکر بعدی من دیدهام که این ایدهها در تیمهای مختلف و پایگاههای کد مختلف کار میکنند، و الگو همیشه یکسان است. هنگامی که توکن ها در جای خود قرار گرفتند، فریم های کلیدی دیگر مجموعه ای پراکنده از ترفندها نیستند و بخشی از زبان طراحی می شوند. آنها باعث می شوند که محصول عمدی تر، سازگارتر و زنده تر به نظر برسد. اگر یک چیز را از این مقاله بگیرید، بگذارید این باشد: انیمیشن ها سزاوار همان دقت و ساختاری هستند که قبلاً به رنگ ها، تایپوگرافی و فاصله گذاری می دهیم. هر بار که رابط کاربری شما جابه جا می شود، سرمایه گذاری کوچکی در توکن های فریم کلیدی نتیجه می دهد.
