ForHosting KIT · أدوات المطورين

استيفاء اللون بمنحنى بيزيه تكعيبي

يحسب استيفاء اللون بمنحنى بيزيه تكعيبي اللون الدقيق الواقع بين نقطتي نهاية سداسيتين بعد أن يحوّل منحنى التوقيت الكسر المطلوب.

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

أدخلوا لون البداية ولون النهاية، وكسرًا من صفر إلى واحد، وإحداثيات التحكم الأربع المستخدمة في easing من نوع cubic-bezier في CSS. تتضمن النتيجة الكسر بعد التيسير، والألوان الموحّدة، والقيمة السداسية، وقنوات RGB، مما يتيح إعادة إنتاج الانتقالات في أدوات التصميم ومسارات الرسوم المتحركة والاختبارات والأصول المولّدة دون الاعتماد على ساعة الرسوم المتحركة في المتصفح.

افصلوا تقدّم الزمن عن التقدّم المرئي للون

يعامل المزج الخطي مرور خمسين في المئة من الزمن على أنه قطع خمسين في المئة من المسافة بين لونين. غير أن الواجهات الفعلية تحتاج غالبًا إلى إيقاع مختلف؛ فقد يبدأ الانتقال برفق، ثم يتسارع في وسطه، ويستقر ببطء قرب وجهته. تطبق هذه الإمكانية منحنى توقيت بيزيه تكعيبي قبل مزج قنوات RGB. يظل الإدخال t هو الكسر على الخط الزمني، بينما يعرض eased_t كسر اللون الذي أنتجه المنحنى. يسهّل هذا الفصل فحص النتيجة وإعادة استخدامها. عند الزمن صفر يُعاد لون البداية، وعند الزمن واحد يُعاد لون النهاية. وبين النقطتين يتحكم المنحنى في سرعة تقدّم القنوات. ولأن العملية تتلقى أرقامًا صريحة ولا تستشير ساعة، فإن الطلبات المتكررة ذات المدخلات المتطابقة تنتج مخرجات متطابقة. يفيد ذلك عندما يلزم أن يتفق عارض أو مصدّر تصميم أو حزمة اختبارات أو إجراء بناء على إطار انتقالي من دون تشغيل رسم متحرك أو تقدير ما عرضه المتصفح في لحظة بعينها.

كيفية حل كسر منحنى بيزيه التكعيبي

يبدأ منحنى بيزيه التكعيبي بأسلوب CSS من صفر وينتهي عند واحد، وله نقطتا تحكم يقدمهما طالب العملية. ينتمي كسر الزمن المطلوب إلى المحور x للمنحنى، ولذلك فإن تقييم كثيرة الحدود y مباشرة بالرقم نفسه يكون خاطئًا في معظم المنحنيات. تعثر الحاسبة أولًا على معامل المنحنى الداخلي الذي يطابق إحداثيه x الكسر المطلوب. تستخدم بحث نيوتن محدودًا عندما يكون الميل مناسبًا، وبحث تنصيف بعدد ثابت من الخطوات بديلًا مستقرًا. ثم تقيّم الإحداثي y عند المعامل المحسوب. يجب أن تبقى إحداثيات التحكم x بين صفر وواحد، مما يحافظ على رتابة الزمن ويعطي جوابًا فريدًا. ويمكن أن تتراوح قيم y من سالب عشرة إلى عشرة للسماح بمنحنيات الاستباق والتجاوز. إذا خرج easing عن المجال الطبيعي، تُحصر قنوات RGB المستوفاة ضمن قيم البايت الصحيحة. تُقرّب الكسور المعروضة بصورة متسقة، وتُقرّب القنوات إلى أقرب عدد صحيح. تزيل هذه القواعد الاعتماد على محرك المتصفح ومعدل الإطارات وأسلوب أخذ عينات الرسوم المتحركة الخاص بكل منصة.

اختاروا المدخلات واستخدموا اللون المعاد

أدخلوا كل لون في صورة ثلاثة أو ستة أرقام سداسية، مع إمكانية إضافة علامة الشباك في البداية. تُوسّع الألوان المختصرة، ويُعاد كل لون مقبول في صورة موحّدة من ست خانات صغيرة. قدموا t بين صفر وواحد، ثم x1 وy1 وx2 وy2 بترتيب cubic-bezier المألوف. على سبيل المثال، يستخدم الشكل الشائع ease-in-out القيم 0.42 و0 و0.58 و1. تحتفظ الاستجابة بنقطتي النهاية الموحّدتين والمنحنى، وتعرض الكسر المحسوب بعد التيسير، وتوفر اللون السداسي وقنوات الأحمر والأخضر والأزرق منفصلة. استخدموا القيمة السداسية في CSS أو SVG أو رموز التصميم أو تعليمات الصور، واستخدموا كائن القنوات عند تفضيل البيانات الرقمية المنظّمة. لإنشاء سلسلة إطارات، كرروا العملية بكسور زمنية متساوية المسافات مع تثبيت النهايتين وعناصر التحكم. يرفض التحقق الألوان سيئة الصياغة والأعداد غير المنتهية والكسور الخارجة عن الخط الزمني وعناصر x غير الرتيبة وقيم y المفرطة، فلا يمكن لإعداد غير صالح أن يولد عينة انتقال مضللة في الخفاء.

حالات الاستخدام

ولّدوا إطارات رسوم متحركة حتمية

خذوا عينات من انتقال لوني ميسّر عند كسور دقيقة لعارض أو مسار أصول، من دون الاعتماد على ساعة الزمن الفعلي.

اختبروا ألوان انتقال الواجهة

احسبوا القيمة السداسية الوسيطة المتوقعة للاختبارات المرئية واختبارات المكوّنات التي تستخدم منحنى بيزيه تكعيبيًا موثقًا.

أنشئوا مقياسًا ميسّرًا لرموز التصميم

كوّنوا سلسلة رموز لونية تتبع مسافاتها إيقاع التسارع والاستقرار نفسه المستخدم في رسوم الواجهة المتحركة.

الأسئلة الشائعة

ما تكلفة الطلب الواحد؟

تبلغ تكلفة كل طلب API مقدار $0.002. ويمكن تشغيل إصدار المتصفح محليًا من دون إرسال الحساب إلى API.

هل يماثل ذلك المزج الخطي للألوان؟

لا. يستخدم المزج الخطي الكسر المقدم مباشرة، أما هذه العملية فتحوّل الكسر أولًا عبر منحنى بيزيه التكعيبي.

لماذا يجب أن تقع x1 وx2 بين صفر وواحد؟

يحافظ هذا القيد على رتابة تقدم الزمن، ويتوافق مع قواعد دوال التوقيت في CSS، ويتيح عكس x من دون التباس.

هل يمكن لمنحنى easing أن ينتج تجاوزًا؟

نعم. يمكن أن تقع y1 وy2 خارج المجال من صفر إلى واحد. يعرض الكسر الميسّر مقدار التجاوز، بينما تُحصر قنوات RGB ضمن قيم صحيحة.

ما صيغ الألوان المقبولة؟

تُقبل ألوان RGB السداسية المؤلفة من ثلاثة أو ستة أرقام، مع علامة الشباك الأولى أو من دونها. لا تُقبل قناة ألفا ولا أسماء الألوان.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/color/bezier-interpolate

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/color/bezier-interpolate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}'

const res = await fetch("https://api.kit.forhosting.com/color/bezier-interpolate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color1": "#ff6600",
    "color2": "#3366ff",
    "t": 0.5,
    "x1": 0.42,
    "y1": 0,
    "x2": 0.58,
    "y2": 1
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/bezier-interpolate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color1": "#ff6600",
    "color2": "#3366ff",
    "t": 0.5,
    "x1": 0.42,
    "y1": 0,
    "x2": 0.58,
    "y2": 1
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/bezier-interpolate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/bezier-interpolate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "color1": "#ff6600",
  "color2": "#3366ff",
  "t": 0.5,
  "x1": 0.42,
  "y1": 0,
  "x2": 0.58,
  "y2": 1
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.bezier_interpolate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←