چطور یک منحنی easing سفارشی cubic-bezier برای CSS بسازم؟

دو دسته نقطه کنترل روی نمودار را بکشید، مقادیر دقیق x1, y1, x2, y2 را تایپ کنید، یا یک پیشتعریف انتخاب کنید. سپس CSS را در «قالب خروجی» انتخاب کنید و روی «کپی» کلیک کنید تا مقدار ()cubic-bezier برای transition-timing-function را بگیرید.

چطور با cubic-bezier یک افکت پرش یا فراجهش بسازم؟

یک دسته را به بالا یا پایین کادر بکشید تا مقدار Y آن از ۰-۱ فراتر رود. Y میتواند از آن بازه تجاوز کند، در حالی که X بین ۰ و ۱ میماند. پیشتعریفهای back-out و anticipate نقاط شروع آماده فراجهش هستند.

آیا میتوانم easing را برای Tailwind، Framer Motion یا anime.js بگیرم؟

بله. زبانههای قالب خروجی CSS، Tailwind، Framer Motion و anime.js هستند. همه آنها همان چهار عدد را قالببندی میکنند، بنابراین یک زبانه را انتخاب و روی «کپی» کلیک کنید تا قطعه کد در کلیپبوردتان قرار گیرد.

چطور یک مقدار cubic-bezier موجود را برای ویرایش بارگذاری کنم؟

مقداری مانند cubic-bezier(.17, .67, .83, .67) را در کادر وارد کردن جایگذاری کنید و روی «بارگذاری» بزنید. اگر چهار عدد خوانده نشود، پیام خطا میگیرید. منحنی پس از علامت # در نشانی صفحه هم ذخیره میشود، پس میتوان آن را به اشتراک گذاشت.

چرا پیشنمایش کندتر از انتقالهای واقعی من به نظر میرسد؟

«پیشنمایش حرکت» از تنظیم «مدتزمان» استفاده میکند که میتوانید تغییرش دهید، و پیشفرضها کندترند تا بتوانید منحنی را بررسی کنید. «مدتزمان» را کوتاه کنید، سپس از پخش مجدد برای دیدن حرکت با سرعتی که قصد انتشار دارید استفاده کنید.

آیا واقعاً رایگان است؟

بله. همه ابزارها رایگان هستند، بدون حساب کاربری و بدون کارت اعتباری. پردازش بهجای سرورهای ما روی دستگاه شما انجام میشود و همین است که رایگان ماندن آن را ممکن میکند.

آیا در موبایل کار میکند؟

بله. روی مرورگرهای امروزی موبایل در iOS و اندروید اجرا میشود و نیازی به نصب چیزی نیست.

📈

تولید Cubic-Bezier CSS رایگان

منحنی‌های easing CSS را با کشیدن نقاط کنترل طراحی کنید، حرکت را به صورت زنده پیش‌نمایش بگیرید و مقدار cubic-bezier() را کپی کنید. شامل پیش‌تنظیم‌های overshoot/bounce.

در مرورگر شما اجرا می‌شودبدون ثبت‌نام، بدون پاپ‌آپورود لازم نیسترایگان برای همیشه

پس از بارگذاری آفلاین کار می‌کند

دستگیره‌های فیروزه‌ای و رزگونه را بکشید تا شکل منحنی تغییر کند

نقاط کنترل

x1y1x2y2

پیش‌نمایش حرکت

مدت‌زمان۱٫۶s

انتقال عرض

مقدار CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

پیش‌تنظیم‌ها

دستگیره‌های رزگونه و فیروزه‌ای می‌توانند بالا یا پایین کادر بروند (Y خارج از ۰-۱) تا افکت‌های overshoot و پرش مانند back-out و anticipate ایجاد کنند. X در محدوده ۰-۱ می‌ماند (زمان نمی‌تواند برگردد).

کاربردهای رایج

انتقال CSS سفارشی Easingeasing را برای افکت های hover، منوها و انتقال های رابط کاربری طراحی کنید.
انیمیشن های جهش و سرریزحرکت بهاری/سالگرد شادانه ایجاد کنید با کشیدن نقاط کنترل فراتر از کادر.
Easing برای انیمیشن های @keyframesanimation-timing-function مناسب را برای انیمیشن های keyframe CSS انتخاب کنید.
مقادیر Easing برای کتابخانه های JS Animationمقادیر cubic-bezier را برای GSAP، Framer Motion، anime.js و موارد دیگر دریافت کنید.
درک کنید Easing چگونه کار می کندرابطه بین منحنی بزیر و حرکتی که تولید می کند را ببینید.

نحوه کار

ویرایشگر کاملاً در مرورگر با استفاده از حالت React و SVG ساخته شده — هیچ کتابخانه‌ای ریاضی منحنی را مدیریت نمی‌کند. دو نقطه کنترل قابل‌کشیدن یک مسیر بزیه کوبیک SVG را تعریف می‌کنند، و موتور انیمیشن CSS خود مرورگر پیش‌نمایش حرکت را با تزریق مستقیم مقدار cubic-bezier() حاصل به یک قاعده @keyframes اجرا می‌کند.

1
بکشید یا نقاط کنترل را تایپ کنید
دو دستگیره (P1 به رنگ فیروزه‌ای، P2 به رنگ رز) روی یک بوم SVG قرار دارند. کشیدن از API رویدادهای اشاره‌گر با setPointerCapture استفاده می‌کند پس دستگیره انگشت یا نشانگر شما را حتی خارج از مرز SVG ردیابی می‌کند. همچنین می‌توانید دستگیره‌ها را با کلیدهای جهت‌نما هُل دهید یا مقادیر دقیق را در ورودی‌های عددی x1/y1/x2/y2 تایپ کنید.
2
SVG منحنی را در زمان واقعی می‌کشد
منحنی یک عنصر تک <path> SVG است که دستور C (بزیه کوبیک) آن در هر به‌روزرسانی حالت از چهار مختصات نقطه کنترل دوباره محاسبه می‌شود. بدون بوم، بدون کتابخانه خارجی — رندرکننده SVG مرورگر مسیر را مستقیماً می‌کشد.
3
موتور CSS مرورگر نرم‌سازی را پیش‌نمایش می‌کند
سه انیمیشن زنده (یک نقطه لغزنده، یک انتقال عرض، و یک مقیاس) CSS @keyframes را با مقدار cubic-bezier() تزریق‌شده درون‌خطی اجرا می‌کنند. موتور انیمیشن خود مرورگر منحنی را تفسیر می‌کند، پس آنچه می‌بینید دقیقاً همان چیزی است که CSS تولیدی شما خواهد ساخت.
4
قطعه را در سینتکس فریم‌ورک خود کپی کنید
تب‌ها همان چهار عدد را به‌صورت یک transition-timing-function مربوط به CSS، یک کلاس مقدار-دلخواه Tailwind، یک آرایه ease مربوط به Framer Motion، یا یک رشته easing مربوط به anime.js قالب‌بندی می‌کنند. قطعه با navigator.clipboard در کلیپ‌بورد نوشته می‌شود. منحنی همچنین در هش URL کدگذاری می‌شود (#b=x1,y1,x2,y2) پس می‌توانید آن را به اشتراک بگذارید یا نشان‌گذاری کنید.