Bạn có thể muốn thay đổi giao diện của các phần trên mặt đồng hồ, chẳng hạn như thay đổi vị trí, kích thước, chế độ hiển thị, thường là để phản hồi các nguồn dữ liệu đầu vào như thời gian trong ngày hoặc gia tốc kế.
Trong Định dạng mặt đồng hồ, bạn có thể thực hiện việc này bằng cách sử dụng phần tử Transform.
Không phải phần tử nào cũng có thể được biến đổi, nhưng các phần tử có thể biến đổi chính bao gồm: phần tử Group, Part* và các bản vẽ gốc như hình dạng và kiểu.
Các thuộc tính của mỗi phần tử có thể biến đổi được đánh dấu như vậy trong tài liệu tham khảo.
Bản thân phép biến đổi được chỉ định trong thuộc tính value, trong ngôn ngữ biểu thức Định dạng mặt đồng hồ, có thể bao gồm các nguồn dữ liệu. target chỉ định thuộc tính cần thay đổi trong phần tử mẹ.
Ví dụ: để thay đổi góc của Arc nhằm phản ánh tiến trình của bước:
<Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
<Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
<...>
</Arc>
Khi STEP_PERCENT thay đổi, endAngle sẽ được tính toán lại và Arc được vẽ lại.
Khi một phần tử Biến đổi thay đổi giá trị mục tiêu, bạn nên tạo ảnh động cho sự thay đổi này trong một khoảng thời gian, thay vì thay đổi giá trị ngay lập tức, điều này có thể gây khó chịu. Sử dụng phần tử Animation để đạt được điều này:
<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>
Biến đổi bằng gia tốc kế
Mặc dù bạn có thể sử dụng phần tử Transform với các nguồn dữ liệu con quay hồi chuyển như ACCELEROMETER_ANGLE_X để thay đổi vị trí hoặc tỷ lệ của một phần tử, nhưng Định dạng mặt đồng hồ cung cấp một phần tử riêng biệt cho các phần tử này: Gyro.
Điều này cho phép bạn đơn giản hoá bức tranh tổng thể, tách biệt phép biến đổi dựa trên chuyển động với các phép biến đổi khác như dựa trên thời gian, có thể được áp dụng cho cùng một phần tử.