CapDriveRepeatedLayout
يكرر بشكل دوري نمطًا في نافذة الاقتصاص، وهو مناسب لتحريك المقاييس والبوصلات بشكل مستمر. يقوم period بتعيين الفاصل الزمني للتكرار، ويحدد value وanchor مكان محاذاة القيمة الحالية.
مثال
function main() {
return (
<RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
<Text width={120}>N</Text>
</RepeatedLayout>
);
}
الاستخدام
- children نمط واحد وperiod دوريته. value يحاذي anchor؛ زيادته تحرك النمط بالعكس ثم يضاف offset بالنقاط. both يكرر على محورين، ويمكن فصل {x,y}. تُقص المحتويات ضمن النافذة دائمًا.
- تُطبّق x/y وtransform بعد التخطيط. تحريك عنصر لا يدفع إخوته؛ استخدم spacing أو Spacer للفواصل. الدوران والتحجيم يؤثران في الرسم كاملًا.
الخصائص
children?ViewContentمحتوى الرسم الفرعي.
axis?"horizontal" | "vertical" | "both"تكرار horizontal أو vertical أو both؛ both ينشئ شبكة نسخ.
"horizontal"period?RepeatAxisValueالمسافة بين النسخ بالنقاط؛ x/y يضبطان كل محور على حدة.
360value?RepeatAxisValueإحداثي المحتوى الموضوع عند anchor. زيادته تحرك النسخ عكسياً؛ ليس سرعة.
$data.current.heading?.direction ?? 0anchor?RepeatAxisValueموضع نسبي داخل مجال العرض: 0 بداية، 0.5 وسط، 1 نهاية.
0.5offset?RepeatAxisValueإزاحة إضافية بالنقاط بعد محاذاة value مع anchor.
0alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"محاذاة العناصر المتراكبة إلى تسعة مواضع على الحواف والوسط.
"topLeading"الخصائص المشتركة
width?number | "auto" | "fill"العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.
100height?number | "auto" | "fill"الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.
80padding?numberالمساحة الداخلية للمحتوى بالنقاط.
0x?numberإزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.
0y?numberإزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.
0transform?ViewTransformتحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.
{rotation: 0}background?Paintلون أو تدرج للخلفية؛ clear يجعلها شفافة.
"clear"opacity?numberعتامة View بالكامل: 0 شفاف و1 معتم.
1cornerRadius?numberنصف قطر الزوايا بالنقاط.
0clip?"rectangle" | "ellipse"شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.
"rectangle"mask?View | nullعرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.
<Circle width="fill" height="fill" background="white"/>zIndex?numberترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.
0blur?numberنصف قطر التمويه بالنقاط؛ 0 يعطّله.
4innerShadow?DrawingEffectلون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectلون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?Colorلون الظل الخارجي.
HDR("black")shadowOpacity?numberعتامة الظل من 0 إلى 1؛ 0 يخفيه.
0shadowRadius?numberنصف قطر تمويه الظل الخارجي بالنقاط.
4shadowX?numberإزاحة الظل بالنقاط: x يميناً وy لأسفل.
0shadowY?numberإزاحة الظل بالنقاط: x يميناً وy لأسفل.
2animations?Animation[]تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberمعرّف ثابت بين العناصر الشقيقة.
مثال عملي
function main() {
return (
<RepeatedLayout
width={240}
height={140}
axis="both"
period={{ x: 80, y: 50 }}
value={{ x: 40, y: 25 }}
anchor={{ x: 0.5, y: 0.5 }}
alignment="center"
>
<Symbol name="plus" fontSize={20} color={$env.accent} />
</RepeatedLayout>
);
}
الحركة
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.yعند الإغفال
الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.