مکعب بزیه: از ریاضیات تا حرکت

اول، آنچه واقعا پشت آن است cubic-bezier ویژگی ای که ما مدام در پایگاه های کد CSS خود می بینیم؟ خوب، به بیان ساده، این تابع چیزی را که a نامیده می شود، تعریف می کند منحنی مکعب بزیه. این نوع خاصی از منحنی است که به عملکرد کمک می کند چگونه انتقال از حالت اولیه به حالت پایانی می رود.

چرا مکعبی? اینجاست که قسمت ریاضی این مقاله وارد عمل می شود. برای شروع، اجازه دهید به تعریف اصطلاح کلی “منحنی بزیه” نگاه کنیم:

منحنی بزیه یک منحنی پارامتریک است که توسط مجموعه ای از نقاط کنترل تعریف می شود

می‌توانیم کشف منحنی‌های Bezier را با نگاه کردن به ساده‌ترین شکل آن‌ها آغاز کنیم تا بفهمیم این «نقاط کنترل» چیست، و سپس به آرامی مسیر خود را در پیچیدگی افزایش دهیم تا به شکل مکعبی برسیم.

درون یابی خطی

بیایید به دو نکته متفاوت نگاه کنیم P0 و P1و یک نکته دیگر P که بین آنها قرار دارد. در این سناریو P0 و P1 هستند پست های بازرسی روی منحنی، و P نقطه ای است که بین آنها حرکت می کند. ما می توانیم موقعیت را تعیین کنیم P با مقدار بین 0 و 1 نام برد t این شبیه به درصد است:

• اگر t = 1، P حرکت خواهد کرد P1

• اگر t = 0، P حرکت خواهد کرد P0

• هر مقدار بین 0 و 1 “ترکیبی” از P0 و P1

من این مثال را در ویجت زیر ارائه کرده ام P0 و P1 در انتهای منحنی هستند و P است نقطه آبی بین آنها حرکت می کند. خواهید دید که هر چه به 1 نزدیک تر باشد t خوب، در closer از انتهای منحنی P خواهد بود.

به این می گویند a درون یابی خطی.

بزیر درجه دوم

یک نکته دیگر هم اضافه کنیم! اکنون می توانیم دو تا داشته باشیم نقاط درون یابی، بین هر بخش، بر این اساس در امتداد محور حرکت می کند P0 -> P1 و P1 -> P2. اگر این دو نقطه (نقاط قرمز) را با یک قطعه به هم وصل کنیم و یک نقطه درون یابی (نقطه آبی) را روی آن قرار دهیم، چیز بسیار جالبی به دست می آید:

می توانید این را ببینید نقطه آبی مسیر خاصی را دنبال می کند که شبیه یک منحنی است. این خاص a نامیده می شود منحنی بزیه درجه دوم.

در اینجا نسخه جاوا اسکریپت این فرمول است که من برای بدست آوردن مختصات استفاده می کنم x و y از تمام موقعیت های نقطه آبی به مدت 1 ثانیه با سرعت 60 فریم در ثانیه برای رسم منحنی بالا:

1
const quadratic = (P0, P1, P2) => {
12
    Math.pow(1 - t, 2) * x0 + 2 * (1 - t) * t * x1 + Math.pow(t, 2) * x2;
15
    Math.pow(1 - t, 2) * y0 + 2 * (1 - t) * t * y1 + Math.pow(t, 2) * y2;
20
  for (let t = 0; t  1; t = t + 1 / 60) {
23
    res.push({ x: valX, y: valY });
25
  res.push({ x: 1, y: 0 });

مکعب بزیه

حال اگر a را اضافه کنیم نکته چهارم (بنابراین اکنون ما نقاط کنترل را داریم P0، P1، P2، و P3) و همان روند قبلی را دنبال کنید:

1. ما بین هر یک از بخش هایی که 4 نقطه را به هم متصل می کنند یک نقطه درون یابی اضافه می کنیم (به رنگ قرمز در زیر)

2. ما این نقاط درون یابی را به هم متصل می کنیم و برای هر یک از بخش های تازه به دست آمده یک نقطه درون یابی تعریف می کنیم (به رنگ سبز)

3. این نقاط را دوباره به هم وصل می کنیم، یک قطعه بین آنها می کشیم و یک نقطه درون یابی شده دیگر (به رنگ آبی) اضافه می کنیم.

در نهایت فرمولی را به دست می آوریم که نشان دهنده a است مکعب بزیه یک منحنی می دانم که در این مرحله ممکن است بسیار پیچیده به نظر برسد، بنابراین امیدوارم تجسم زیر کار خوبی برای نشان دادن نحوه تولید این منحنی انجام دهد:

در زیر نسخه JS این فرمول را مشاهده خواهید کرد که مانند همتای درجه دوم آن، تمام مختصات را برمی گرداند. x و y از تمام نقاطی که موقعیت نقطه آبی را در این منحنی مکعبی Bezier توصیف می کند، برای 1 ثانیه با سرعت 60 فریم در ثانیه:

1
const cubic = (P0, P1, P2, P3) => {
15
    Math.pow(1 - t, 3) * y0 +
16
    3 * Math.pow(1 - t, 2) * t * y1 +
17
    3 * (1 - t) * Math.pow(t, 2) * y2 +
21
    Math.pow(1 - t, 3) * x0 +
22
    3 * Math.pow(1 - t, 2) * t * x1 +
23
    3 * (1 - t) * Math.pow(t, 2) * x2 +
28
  for (let t = 0; t  1; t = t + 1 / 60) {
31
    res.push({ x: valX, y: valY });
33
  res.push({ x: 1, y: 0 });

ما فقط قسمت سخت را انجام دادیم! 🎉 ما ریاضیات پشت منحنی های Bezier را به قطعات کوچک تقسیم کردیم و به آرامی آنها را با هم ترکیب کردیم تا فرمول مکعبی Bezier را بدست آوریم و منحنی مربوطه را نشان دهیم. اکنون می‌توانیم ببینیم که این منحنی مکعبی Bezier چگونه با انتقال و حرکت به طور کلی ارتباط دارد.

برای این قسمت، به فرمول Cubic Bezier از قسمت قبل نگاه می کنیم و نمایش آن را ترسیم می کنیم، اما با یک چرخش:

• نقطه کنترل را تنظیم می کنیم P0 با مختصات x:0, y:0

• نقطه کنترل را تنظیم می کنیم P3 با مختصات x:1, y:1

دلیل این امر این است که cubic-bezier تابع در CSS استفاده می کند دو نکته ضمنی:

• P0 نشان دهنده زمان شروع است x:0 و حالت اولیه y:0. این نقطه ای است که منحنی ما شروع می شود.

• P3 نشان دهنده زمان نهایی است x:1 و حالت نهایی y:1. این نقطه ای است که منحنی ما به پایان می رسد.

بنابراین این ما را تنها با دو نقطه کنترل برای تعریف باقی می گذارد: P1 و P2. به یاد بیاورید که الف را مثال زدم cubic-bezier تابعی که برای یکی از انتقال های مقدماتی خود استفاده کردم؟

cubic-bezier(0.34, 1.56, 0.64, 1)

چهار عدد ارسال شده به این تابع مختصات نقاط کنترل هستند P1 و P2: cubic-bezier(P1.x, P1.y, P2.x, P2.y). تنظیم این نقاط یک منحنی خاص به ما می دهد که نشان دهنده حرکتی است که عنصر با این تابع همگام سازی در طول انتقال خود دنبال می کند.

برای نشان دادن بهتر این موضوع، من کوچک را ساختم ویژوالایزر Cubic Bezier زیر ✨. با آن می توانید موقعیت را تغییر دهید P1 و P2 با حرکت دسته های خاکستری و گرفتن منحنی مکعبی Bezier مربوط به این مقادیر!

بیننده همچنین به شما اجازه می دهد:

1. موقعیت یک عنصر (نقطه آبی در این مورد) را در سراسر حرکت آن برای هر فریم ببینید

2. موقعیت عنصر را برای مشاهده تغییر نشان دهید y مقدار، یعنی ردی از حرکت عنصر در طول زمان، با تعویض Project Points در

با نمایش موقعیت ها در طول انتقال، می توانیم حرکت عنصر خود را که با یک مکعب Bezier با این نقاط کنترل خاص نشان داده شده است، “ببینیم”. اینگونه است که «ریاضیات به حرکت تبدیل می شود».

چند نکته جالب که با حرکت این نقطه می توانید مشاهده کنید:

• موقعیت نقطه را در هر فریم از حرکت رسم می کنیم

• هر چه دو نقطه متوالی در مسیر از هم دورتر باشند، حرکت سریعتر است: نقطه آبی “زمان کمتری” را در یک موقعیت معین صرف می کند.

• هرچه فاصله بین دو نقطه متوالی در ردیابی کمتر باشد، حرکت کندتر است: نقطه آبی “زمان بیشتری” را در آن موقعیت معین صرف می کند.

اکنون که می دانیم واقعاً چه چیزی پشت آن است cubic-bezier تابع CSS، ممکن است تعجب کنید که چگونه سایر توابع همگام سازی که ممکن است با آنها آشنا باشید، مانند ease-in یا linear رجوع به این شود در دو کلمه در واقع، آنها خود Cubic Bézier هستند!

Bezier مکعبی، Bezier مکعبی همه جا

ما می توانیم هر یک را توصیف کنیم linear، ease-in، ease-out، ease-out ج cubic-bézier فرم. تنها کاری که برای بدست آوردن این توابع زمانی خاص باید انجام دهید، تنظیم مقادیر مختصات است P1 و P2 به ترتیب.

اینها فقط مجموعه ای از cubic-bezier توابع همگام سازی خارج از جعبه در CSS در دسترس ما هستند. وجود دارد زیاد انواع انتقال “سبکی” که می توانند با منحنی های مکعبی خاص بزیر نشان داده شوند. می‌توانید پیش‌نمایش برخی از آنها را در زیر با موارد مربوطه مشاهده کنید P1 و P2 نکات:

بنابراین، این تنها رونمایی از ریاضیات پشت مکعب بزیه نبود که به ما کمک کرد تا درک کنیم. cubic-bézier تابع CSS، بلکه تعداد زیادی از توابع تسهیل کننده که توسط بسیاری به صورت روزانه استفاده می شود!

مکعب بزیه در حرکت فریمر

جنبه دیگری که رابطه نزدیک بین Cubic Bézier و توابع امدادی را تأیید می کند را می توان در تصمیمات طراحی اتخاذ شده در Framer Motion یافت. transition شی

برخلاف آنچه تاکنون در CSS دیده‌ایم، وجود ندارد cubic-bézier به خودی خود در Framer Motion وجود دارد. برای توصیف این نوع انتقال، فقط باید مقادیر مختصات را به خود منتقل کنید P1 و P2 به عنوان یک آرایه به ease دارایی:

1
import { motion } from 'framer-motion';
3
const Button = (props) => {
4
  const buttonVariants = {
18
      variants={buttonVariants}
20
        ease: [0.34, 1.56, 0.64, 1],

عجب سواری! ما از کاوش خارج شدیم cubic-bezier(0.34, 1.56, 0.64, 1) کمی نادان و نمیدانم یعنی چه:

• پیدا کردن مفاهیم ریاضی حاکم بر منحنی های بزیه

• تا بتوانم نمایش گرافیکی Bezier مکعبی را ترسیم کنید و دریابید چگونه به حرکت تبدیل می شود

• تجزیه و تحلیل رابطه نزدیک بین cubic-bézier و عملکردهای تسکین دهنده ما همیشه با آن آشنا بوده ایم

با این حال، حتی اگر با هم چیزهای زیادی یاد گرفتیم، فقط سطح را خراشیدیم! ما فقط به CSS نگاه کرده‌ایم، اما منحنی‌های Bezier و به خصوص شکل مکعبی آن را می‌توان در بسیاری از ابزارها/فرایندهای رابط مجاور دیگر مانند:

• در ابزارهای توسعه دهنده کروم یا سایر ابزارهای عالی رابط کاربری مانند Leva

• ابزارهایی مانند Figma را طراحی کنید تا همه چیز را از منحنی ها، شکل ها و حتی فونت ها ترسیم کنید!

امیدوارم این پست وبلاگ کنجکاوی شما را برآورده کرده باشد و به شما کمک کرده باشد تا برخی از چیزهای جالب پشت ابزارهایی را که ما هر روز استفاده می کنیم یاد بگیرید. اکنون می توانید با آن بازی کنید cubic-bézier با اطمینان به کد خود عمل کنید و دقیقاً بدانید که چه چیزی را باید تغییر دهید تا با انتقال ها و انیمیشن های منحصر به فرد / عالی برای اجزای خود بیایید.

یک فریاد سریع به 3 نفر بزرگ که به صورت مستقیم یا غیرمستقیم در ساخت این قطعه به من کمک کردند با به اشتراک گذاشتن خلاقیت های خود در مورد این موضوع:

• @pixelbeat که یک نمونه اولیه Framer عالی برای رندر منحنی های برجسته ایجاد کرد

• @FreyaHolmer که یک ویدیوی کاملا شگفت انگیز در یوتیوب در منحنی های Bezier ساخت. این موضوع بسیار فراتر از این مقاله به علف های هرز می رود، بنابراین اگر می خواهید جلوتر بروید، به شدت توصیه می کنم این ویدیو را بررسی کنید. روش او برای نشان دادن و توضیح این مفاهیم پیچیده واقعاً الهام بخش است.