You may want to change the appearance of parts of the watch face, for example, change the position, size, visibility, often in response to[input data sources](https://developer.android.com/training/wearables/wff/common/attributes/source-type)such as the time of day or the accelerometer.

In Watch Face Format, this is achieved through use of the`Transform`element. Not all elements can be transformed, but the main*transformable* elements include:`Group`,`Part*`elements, and drawing primitives such as shapes and styles.

Attributes of each element that are transformable are marked as such in the reference documentation.

The transform itself is specified in the`value`attribute, in the Watch Face Format expression language, which can include data sources. The`target`specifies the attribute that is to be changed in the parent element.

For example, to change the angle of an`Arc`to reflect step progress:  

    <Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
      <Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
      <...>
    </Arc>

As`STEP_PERCENT`changes,`endAngle`is recalculated and the`Arc`redrawn.

When a Transform element changes a target value, it can be desirable for this change to be animated over a period of time, as opposed to an immediate change in value, which could be jarring. Use the`Animation`element to achieve this:  

    <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>

### Transforms using the accelerometer

While it is possible to use the`Transform`element with gyroscopic data sources such as`ACCELEROMETER_ANGLE_X`to change the position or scale of an element, Watch Face Format provides a separate element for these:[`Gyro`](https://developer.android.com/training/wearables/wff/common/transform/gyro).

This lets you simplify the overall picture, separating movement-based transformation from other transformation such as time based, which might be applied to the same element.