เปลี่ยนลักษณะที่ปรากฏขององค์ประกอบแบบไดนามิก
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
คุณอาจต้องการเปลี่ยนลักษณะที่ปรากฏของส่วนต่างๆ ของหน้าปัด เช่น เปลี่ยนตำแหน่ง ขนาด ระดับการเข้าถึง ซึ่งมักจะตอบสนองต่อแหล่งที่มาของข้อมูลอินพุต เช่น เวลาของวันหรือเซ็นเซอร์ตรวจจับความเร่ง
ใน Watch Face Format การดำเนินการนี้ทำได้โดยใช้องค์ประกอบ 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 และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","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 UTC"],[],[],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."]]
