요소 모양 동적으로 변경

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

워치 페이스 형식에서는 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" />
    <Stroke color="#FF00FF" thickness="20" />
</Arc>
watchface_dynamic_appearance.xml

STEP_PERCENT가 변경되면 endAngle가 다시 계산되고 Arc가 다시 그려집니다.

변환 요소가 타겟 값을 변경할 때 값의 즉각적인 변경은 충격적일 수 있으므로 일정 기간에 걸쳐 이 변경사항을 애니메이션으로 표시하는 것이 바람직할 수 있습니다. 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>
watchface_dynamic_appearance.xml

가속도계를 사용한 변환

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

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