Mengubah tampilan elemen secara dinamis

Anda mungkin ingin mengubah tampilan bagian-bagian tampilan jam, misalnya, mengubah posisi, ukuran, visibilitas, sering kali sebagai respons terhadap sumber data input seperti waktu atau akselerometer.

Dalam Format Tampilan Jam, hal ini dicapai melalui penggunaan elemen Transform. Tidak semua elemen dapat diubah, tetapi elemen transformable utama mencakup: elemen Group , Part*, dan primitif gambar seperti bentuk dan gaya.

Atribut setiap elemen yang dapat diubah ditandai demikian dalam dokumentasi referensi.

Transformasi itu sendiri ditentukan dalam atribut value, dalam bahasa ekspresi Format Tampilan Jam, yang dapat menyertakan sumber data. target menentukan atribut yang akan diubah dalam elemen induk.

Misalnya, untuk mengubah sudut Arc guna mencerminkan progres langkah:

<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

Saat STEP_PERCENT berubah, endAngle dihitung ulang dan Arc digambar ulang.

Saat elemen Transformasi mengubah nilai target, perubahan ini sebaiknya dianimasikan selama jangka waktu tertentu, bukan perubahan nilai langsung yang dapat mengganggu. Gunakan elemen Animation untuk mencapai hal ini:

<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

Transformasi menggunakan akselerometer

Meskipun elemen Transform dapat digunakan dengan sumber data giroskopik seperti ACCELEROMETER_ANGLE_X untuk mengubah posisi atau skala elemen, Format Tampilan Jam menyediakan elemen terpisah untuk hal ini: Gyro.

Hal ini memungkinkan Anda menyederhanakan gambaran keseluruhan, memisahkan transformasi berbasis gerakan dari transformasi lainnya seperti berbasis waktu, yang mungkin diterapkan pada elemen yang sama.