Animasyon

animations, View üzerindeki animasyon bildirimlerinin bir dizisidir. property, opacity veya sweepAngle gibi kontrol edilecek özniteliği belirtir. View hedef değeri değiştiğinde, karşılık gelen animasyon geçiş yapmaya başlar; sabit niteliklere basitçe animasyon eklemek otomatik olarak değişiklik üretmez.

Her bileşen tarafından desteklenen özelliklerin bir listesi kendi sayfasında sağlanır. Alt-View'yi dinamik olarak eklemeniz, silmeniz veya yeniden düzenlemeniz gerektiğinde, güncellemelerin hala aynı çizim nesnesine karşılık gelmesi için bunlar için sabit bir key tutun.

duration, delay birimi saniyedir, varsayılan süre 0,25 saniyedir, gecikme sıfırdır ve varsayılan eğri easeInOut'dir. from/to başlangıç ​​ve bitiş hedeflerini netleştirebilir, repeat ve autoreverse tekrarı ve gidiş dönüşleri kontrol edebilir. Aynı özellik yalnızca bir bildirimle kontrol edilmelidir.

Dönem nitelikleri, dönemler arasında geçiş yollarını seçmek için wrap kullanabilir. Örneğin startAngle, 350°'den 10°'ye kadar wrap: 360'yi kullanır. sweepAngle, pozitif ve negatif yönleri koruyarak gerçek süpürme açısını temsil eder ve wrap'yi desteklemez.

Bir hız seçildikten sonra örnek, 0–200 arasındaki hız aralığını 0–360°'ye dönüştürür. Hız 50'den 100'e değiştiğinde hedef açı 90°'den 180°'ye değişir ve yayın geçişi tamamlaması 0,25 saniye sürer. Geçerli hız birimi ölçüm aralığı için kullanılır; ölçüm olmadığında yatay bir çizgi görüntülenir.

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 metin, resim veya grafik verileri gibi içerikleri güncellemek için kullanılır. Desteğin türü, dijital metin geçişleri ve grafik veri enterpolasyonu gibi belirli bileşenlere göre belirlenir.

Şekil enterpolasyonu, önce ve sonra karşılık gelen yapıları gerektirir; örneğin, Polyline'nin nokta sayısı ve kapanış ayarları aynıdır ve Path'nin komut sırası aynıdır. Yapı uyumsuz olduğunda doğrudan güncelleyin. Animasyon çizim tarafı tarafından gerçekleştirilir ve main()'da döngü zamanlaması gerektirmez; animasyon, sensörün veya OBD'nin gerçek güncelleme sıklığını artırmaz.