요소 모양 동적으로 변경

시계 화면의 일부 모양을 변경할 수 있습니다(예: 시간 또는 가속도계와 같은 입력 데이터 소스에 따라 위치, 크기, 표시 여부 변경).

워치 페이스 형식에서는 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>

가속도계를 사용한 변환

ACCELEROMETER_ANGLE_X와 같은 자이로스코프 데이터 소스와 함께 Transform 요소를 사용하여 요소의 위치나 크기를 변경할 수 있지만 워치 페이스 형식은 이를 위한 별도의 요소인 Gyro를 제공합니다.

이렇게 하면 동작 기반 변환을 동일한 요소에 적용될 수 있는 시간 기반 변환과 같은 다른 변환과 구분하여 전체적인 그림을 단순화할 수 있습니다.