تغییر پویا ظاهر عنصر
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
ممکن است بخواهید ظاهر قسمت هایی از صفحه ساعت را تغییر دهید، به عنوان مثال، موقعیت، اندازه، دید را اغلب در پاسخ به منابع داده ورودی مانند زمان روز یا شتاب سنج تغییر دهید.
در فرمت Watch Face، این با استفاده از عنصر Transform به دست می آید. همه عناصر را نمی توان تبدیل کرد، اما عناصر قابل تبدیل اصلی عبارتند از: Group ، عناصر Part* و طراحی اولیه مانند اشکال و سبک ها.
ویژگی های هر عنصری که قابل تبدیل هستند در مستندات مرجع به این صورت مشخص می شوند.
خود تبدیل در ویژگی value ، در زبان عبارت Watch Face Format، که می‌تواند شامل منابع داده باشد، مشخص می‌شود. 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 دوباره ترسیم می‌شود.
هنگامی که یک عنصر Transform مقدار هدف را تغییر می‌دهد، می‌تواند مطلوب باشد که این تغییر در یک دوره زمانی متحرک شود، در مقابل تغییر فوری در مقدار، که می‌تواند دردسرساز باشد. برای رسیدن به این هدف از عنصر 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 برای تغییر موقعیت یا مقیاس یک عنصر وجود دارد، فرمت Watch Face یک عنصر جداگانه برای این موارد ارائه می دهد: Gyro .
این به شما امکان می‌دهد تصویر کلی را ساده کنید و تبدیل مبتنی بر حرکت را از سایر تبدیل‌ها مانند زمان، که ممکن است برای همان عنصر اعمال شود، جدا کنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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."]]
