تغيير مظهر العنصر بشكل ديناميكي
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
قد تحتاج إلى تغيير مظهر أجزاء من خلفية شاشة الساعة، على سبيل المثال،
تغيير الموضع أو الحجم أو مستوى العرض، غالبًا استجابةً لمصادر
بيانات الإدخال، مثل وقت اليوم أو مقياس التسارع.
في تنسيق خلفية شاشة الساعة، يتم تحقيق ذلك من خلال استخدام العنصر Transform.
لا يمكن تحويل بعض العناصر، ولكن تشمل العناصر الرئيسية القابلة للتحويل: عناصر Group وPart* والأشكال الأساسية للرسم، مثل الأشكال
والأنماط.
يتم وضع علامة على سمات كل عنصر قابلة للتحويل في
مستندات المراجع.
يتم تحديد عملية التحويل نفسها في سمة value، في لغة تعبيرات
تنسيق خلفية شاشة الساعة، والتي يمكن أن تتضمّن مصادر بيانات. تحدّد target
السمة التي سيتم تغييرها في العنصر الرئيسي.
على سبيل المثال، لتغيير زاوية Arc لتعكس مستوى تقدّم الخطوة:
<Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
<Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
<...>
</Arc>
عندما تتغيّر قيمة STEP_PERCENT، تتم إعادة احتساب endAngle وArc
إعادة رسمه.
عندما يغيّر عنصر "التحويل" قيمة مستهدَفة، قد يكون من المفيد أن يتم تحرّك
هذا التغيير على مدار فترة زمنية، بدلاً من تغيُّر فوري
في القيمة قد يكون مزعجًا. استخدِم العنصر Animation لتحقيق
ما يلي:
<PartDraw x="100" y="150" width="250" height="120" >
<Ellipse x="0" y="0" width="50" height="50">
<Fill color="#ff0000" />
<!-- Red ball with no animated transition -->
<Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200"/>
</Ellipse>
<Ellipse x="0" y="100" width="50" height="50">
<Fill color="#00ff00" />
<!-- Green ball eases between each position -->
<Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200">
<Animation duration="1" interpolation="EASE_IN_OUT" />
</Transform>
</Ellipse>
</PartDraw>
عمليات التحويل باستخدام مقياس التسارع
على الرغم من أنّه من الممكن استخدام العنصر Transform مع مصادر بيانات الجيرسكوب
مثل ACCELEROMETER_ANGLE_X لتغيير موضع عنصر
أو مقياسه، يقدّم تنسيق خلفية شاشة الساعة عنصرًا منفصلاً لهذه العناصر: Gyro.
يتيح لك ذلك تبسيط الصورة العامة، وفصل التحويل المستنِد إلى الحركة عن التحويلات الأخرى، مثل التحويل المستنِد إلى الوقت، والذي قد يتم تطبيقه على العنصر نفسه.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Dynamically change element appearance\n\nYou may want to change the appearance of parts of the watch face, for example,\nchange the position, size, visibility, often in response to [input data\nsources](/training/wearables/wff/common/attributes/source-type) such as the time of day or the accelerometer.\n\nIn Watch Face Format, this is achieved through use of the `Transform` element.\nNot all elements can be transformed, but the main *transformable* elements\ninclude: `Group` , `Part*` elements, and drawing primitives such as shapes and\nstyles.\n\nAttributes of each element that are transformable are marked as such in the\nreference documentation.\n\nThe transform itself is specified in the `value` attribute, in the Watch Face\nFormat expression language, which can include data sources. The `target`\nspecifies the attribute that is to be changed in the parent element.\n\nFor example, to change the angle of an `Arc` to reflect step progress: \n\n \u003cArc centerX=\"225\" centerY=\"225\" height=\"420\" width=\"420\" startAngle=\"0\" endAngle=\"0\"\u003e\n \u003cTransform target=\"endAngle\" value=\"[STEP_PERCENT] * 3.6\" /\u003e\n \u003c...\u003e\n \u003c/Arc\u003e\n\nAs `STEP_PERCENT` changes, `endAngle` is recalculated and the `Arc`\nredrawn.\n\nWhen a Transform element changes a target value, it can be desirable for\nthis change to be animated over a period of time, as opposed to an immediate\nchange in value, which could be jarring. Use the `Animation` element to achieve\nthis: \n\n \u003cPartDraw x=\"100\" y=\"150\" width=\"250\" height=\"120\" \u003e\n \u003cEllipse x=\"0\" y=\"0\" width=\"50\" height=\"50\"\u003e\n \u003cFill color=\"#ff0000\" /\u003e\n \u003c!-- Red ball with no animated transition --\u003e\n \u003cTransform target=\"x\" value=\"[SECOND] % 2 == 0 ? 0 : 200\"/\u003e\n \u003c/Ellipse\u003e\n \u003cEllipse x=\"0\" y=\"100\" width=\"50\" height=\"50\"\u003e\n \u003cFill color=\"#00ff00\" /\u003e\n \u003c!-- Green ball eases between each position --\u003e\n \u003cTransform target=\"x\" value=\"[SECOND] % 2 == 0 ? 0 : 200\"\u003e\n \u003cAnimation duration=\"1\" interpolation=\"EASE_IN_OUT\" /\u003e\n \u003c/Transform\u003e\n \u003c/Ellipse\u003e\n \u003c/PartDraw\u003e\n\n### Transforms using the accelerometer\n\nWhile it is possible to use the `Transform` element with gyroscopic data\nsources such as `ACCELEROMETER_ANGLE_X` to change the position or scale of an\nelement, Watch Face Format provides a separate element for these: [`Gyro`](/training/wearables/wff/common/transform/gyro).\n\nThis lets you simplify the overall picture, separating movement-based\ntransformation from other transformation such as time based, which might be\napplied to the same element."]]
