برگه تقلب توابع Easing
توابع Easing نرخ تغییر یک پارامتر را در طی زمان تعیین می‌کنند
حرکت اشیا در دنیای واقعی به طور ناگهانی شروع و متوقف نمی‌شود و تقریبا هیچگاه با سرعت ثابت حرکت نمی‌کنند. هنگامی که یک کشو را باز می‌کنیم، ابتدا آن را به سرعت حرکت می‌دهیم، و سپس همینطور که بیرون می‌آید سرعت آن را کمتر می‌کنیم. اگر جسمی را از ارتفاعی رها کنید، سرعت آن حین حرکت به سمت زمین افزایش پیدا می‌کند و پس از برخورد با زمین دوباره به بالا می‌جهد.
این صفحه به شما کمک می‌کند تا تابع Easing مناسب را انتخاب کنید.
منبع باز
کمک کنید این وبسایت به زبان شما ترجمه شود.
x
t
CSS
در CSS، پراپرتی‌های transition و animation به شما اجازه می‌دهند تا یک تابع Easing را مشخص کنید.
.block { transition: transform 0.6s ; }
در cubic-bezier.com ویرایش کنید.
در CSS می‌توانید این تابع را به کمک
@keyframes پیاده سازی کنید.:اندازه
در حال بارگذاری...
موقعیت
در حال بارگذاری...
شفافیت
در حال بارگذاری...
PostCSS
در PostCSS، توصیف تابع Easing بسیار آسان‌تر است. پلاگینی به نام postcss-easings وجود دارد که اطلاعات جا به جایی را از همان سایت دریافت می‌کند.
.block { transition: transform 0.6s ; }
اعلان بالا به تابع بالا تبدیل می‌شود.
متاسفانه پلاگینی برای استفاده از این تابع Easing وجود ندارد. امکان پیاده سازی با استفاده از
@keyframes وجود دارد. بالا را نگاه کنید.گرادینت
امکان ترسیم گرادینت با استفاده از postcss-easing-gradients وجود دارد.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
تابع ریاضی
در پایین کد این تابع Easing را به زبان TypeScript می‌بینید. متغیر x پیشرفت مطلق انیمیشن را نشان می‌دهد. دامنه متغیر x بین 0 (شروع انیمیشن) و 1 (پایان انیمیشن) است.
function (x: number): number {
}در پایین کد این تابع Easing را به زبان TypeScript می‌بینید. متغیر x پیشرفت مطلق انیمیشن را نشان می‌دهد. دامنه متغیر x بین 0 (شروع انیمیشن) و 1 (پایان انیمیشن) است.
function (x: number): number {
}این تابع Easing را برای تغییرات زیر بررسی کنید:
این تابع:
این تابع
تابع خطی:
تابع خطی