Mengubah tampilan elemen secara dinamis

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Anda mungkin ingin mengubah tampilan 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 ditransformasikan, tetapi elemen yang dapat ditransformasikan utama mencakup: elemen Group , Part*, dan primitif gambar seperti bentuk dan gaya.

Atribut setiap elemen yang dapat ditransformasi 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 di elemen induk.

Misalnya, untuk mengubah sudut Arc agar mencerminkan progres langkah:

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

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

Saat elemen Transform mengubah nilai target, sebaiknya perubahan ini 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>

Transformasi menggunakan akselerometer

Meskipun Anda dapat menggunakan elemen Transform dengan sumber data giroskopis 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 lain seperti berbasis waktu, yang mungkin diterapkan ke elemen yang sama.