سی ایس ایس کیوبک بیزیئر جنریٹر

سی ایس ایس کیوبک بیزیئر جنریٹر کو آسان کرنے کے افعال بنائیں

کنٹرول پوائنٹس

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

مقبول آسان پیش سیٹ

سی ایس ایس آؤٹ پٹ

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Bezier منحنی تصور

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

کیوبک بیزیئر دستاویزات

کیوبک بیزیئر وکر کیا ہے؟

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

سی ایس ایس نحو

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

عام استعمال کے معاملات

  • متحرک ٹرانزیشنز:خصوصیات کو تبدیل کرنے والے عناصر کے لئے ہموار متحرک تصاویر بنائیں۔
  • اسکرول اثرات:اسکرول اینیمیشن کی رفتار کو کنٹرول کریں۔
  • انٹرایکٹو عناصر:اس بات کی وضاحت کریں کہ عناصر صارف کے تعاملات جیسے منڈلانا یا کلک کرنے کا جواب دیتے ہیں۔
  • موشن ڈیزائن:UI عناصر کے لیے پیچیدہ حرکت کی ترتیب تیار کریں۔

مقبول آسانی کے افعال

Ease (default)

سست شروع ہوتا ہے، تیزی سے تیز ہوتا ہے، اور پھر دوبارہ سست ہوجاتا ہے۔

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

شروع سے آخر تک مستقل رفتار۔

cubic-bezier(0, 0, 1, 1)

Ease-in

آہستہ شروع ہوتا ہے، پھر تیز ہوتا ہے۔

cubic-bezier(0.42, 0, 1, 1)

Ease-out

تیزی سے شروع ہوتا ہے، پھر سست ہوجاتا ہے۔

cubic-bezier(0, 0, 0.58, 1)

اپنی مرضی کے منحنی خطوط بنانے کے لئے نکات

  1. x اقدار کو 0 اور 1 کے درمیان رکھیں:اس حد سے باہر کی قدریں غیر متوقع رویے کا سبب بن سکتی ہیں۔
  2. وکر کو تصور کریں:یہ سمجھنے کے لیے انٹرایکٹو گراف کا استعمال کریں کہ تبدیلیاں کس طرح حرکت پذیری کو متاثر کرتی ہیں۔
  3. اصلی عناصر کے ساتھ ٹیسٹ:اپنے منحنی خطوط کا ہمیشہ حقیقی UI اجزاء کے ساتھ پیش نظارہ کریں تاکہ یہ یقینی بنایا جا سکے کہ یہ صحیح محسوس ہوتا ہے۔
  4. پیش سیٹ محفوظ کریں:مستقبل کے منصوبوں کے لیے مفید منحنی خطوط کو بُک مارک کریں۔

Related Tools