Animasi

animations adalah array deklarasi animasi di View. property menentukan atribut yang akan dikontrol, seperti opacity atau sweepAngle. Ketika nilai target View berubah, animasi terkait mulai bertransisi; hanya menambahkan animasi ke atribut tetap tidak akan secara otomatis menghasilkan perubahan.

Daftar properti yang didukung oleh setiap komponen disediakan di halamannya. Saat Anda perlu menambah, menghapus, atau mengatur ulang sub-View secara dinamis, pertahankan key yang stabil agar pembaruan tetap sesuai dengan objek gambar yang sama.

Satuan duration, delay adalah detik, durasi default adalah 0,25 detik, penundaan adalah nol, dan kurva default adalah easeInOut. from/to dapat memperjelas tujuan awal dan akhir, repeat dan autoreverse mengontrol pengulangan dan perjalanan pulang pergi. Properti yang sama hanya boleh dikontrol oleh satu deklarasi.

Atribut periode dapat menggunakan wrap untuk memilih jalur transisi antar periode. Misalnya startAngle akan menggunakan wrap: 360 dari 350° hingga 10°. sweepAngle mewakili sudut sapuan sebenarnya, mempertahankan arah positif dan negatif, dan tidak mendukung wrap.

Setelah memilih kecepatan, contoh mengkonversi rentang kecepatan 0–200 menjadi 0–360°. Ketika kecepatan berubah dari 50 menjadi 100, sudut target berubah dari 90° menjadi 180°, dan busur membutuhkan waktu 0,25 detik untuk menyelesaikan transisi. Satuan kecepatan saat ini digunakan untuk rentang pengukuran; garis horizontal ditampilkan ketika tidak ada pengukuran.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

contentAnimation digunakan untuk memperbarui konten seperti teks, gambar, atau data bagan. Jenis dukungan ditentukan oleh komponen spesifik, seperti transisi teks digital dan interpolasi data grafis.

Interpolasi bentuk memerlukan struktur yang sesuai sebelum dan sesudah, misalnya, jumlah titik dan pengaturan penutupan Polyline sama, dan urutan perintah Path juga sama. Perbarui secara langsung ketika strukturnya tidak kompatibel. Animasi dilakukan oleh sisi undian dan tidak memerlukan pengaturan waktu loop di main(); animasi tidak meningkatkan frekuensi pembaruan aktual sensor atau OBD.