动态更改元素外观
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您可能需要更改表盘各部分的外观,例如更改位置、大小、可见性,这通常是为了响应输入数据源,例如时间或加速度计。
在表盘格式中,可通过使用 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
。
当 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
)搭配使用来更改元素的位置或缩放比例,但表盘格式为这些元素提供了单独的元素:Gyro
。
这样,您就可以简化整体情况,将基于移动的转换与可能应用于同一元素的其他转换(例如基于时间的转换)分开。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-27。
[null,null,["最后更新时间 (UTC):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."]]