ภาพเคลื่อนไหว

animations คืออาร์เรย์ของการประกาศแอนิเมชันใน View property ระบุแอ็ตทริบิวต์ที่จะควบคุม เช่น opacity หรือ sweepAngle เมื่อค่าเป้าหมายของ View เปลี่ยนแปลง ภาพเคลื่อนไหวที่เกี่ยวข้องจะเริ่มเปลี่ยน การเพิ่มแอนิเมชั่นให้กับแอตทริบิวต์คงที่จะไม่ทำให้เกิดการเปลี่ยนแปลงโดยอัตโนมัติ

รายการคุณสมบัติที่แต่ละส่วนประกอบรองรับมีอยู่ในหน้าของมัน เมื่อคุณต้องการเพิ่ม ลบ หรือจัดเรียง sub-View แบบไดนามิก ให้คง key ที่เสถียรไว้เพื่อให้การอัปเดตยังคงสอดคล้องกับออบเจ็กต์รูปวาดเดียวกัน

หน่วยของ duration, delay คือ วินาที ระยะเวลาเริ่มต้นคือ 0.25 วินาที การหน่วงเวลาเป็นศูนย์ และเส้นโค้งเริ่มต้นคือ easeInOut from/to สามารถชี้แจงเป้าหมายเริ่มต้นและสิ้นสุดได้ repeat และ autoreverse ควบคุมการทำซ้ำและการไปกลับ คุณสมบัติเดียวกันควรได้รับการควบคุมโดยการประกาศเดียวเท่านั้น

คุณลักษณะรอบระยะเวลาสามารถใช้ wrap เพื่อเลือกเส้นทางการเปลี่ยนแปลงข้ามรอบระยะเวลา ตัวอย่างเช่น startAngle จะใช้ wrap: 360 จาก 350° ถึง 10° sweepAngle แสดงถึงมุมกวาดตามจริง โดยคงทิศทางบวกและลบ และไม่รองรับ wrap

หลังจากเลือกความเร็วแล้ว ตัวอย่างจะแปลงช่วงความเร็ว 0–200 ถึง 0–360° เมื่อความเร็วเปลี่ยนจาก 50 เป็น 100 มุมเป้าหมายจะเปลี่ยนจาก 90° เป็น 180° และส่วนโค้งจะใช้เวลา 0.25 วินาทีในการเปลี่ยนแปลงให้เสร็จสิ้น หน่วยความเร็วปัจจุบันใช้สำหรับช่วงการวัด เส้นแนวนอนจะปรากฏขึ้นเมื่อไม่มีการวัด

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 ใช้เพื่ออัปเดตเนื้อหา เช่น ข้อความ รูปภาพ หรือข้อมูลแผนภูมิ ประเภทการสนับสนุนจะกำหนดโดยองค์ประกอบเฉพาะ เช่น การเปลี่ยนข้อความดิจิทัลและการแก้ไขข้อมูลกราฟิก

การประมาณค่ารูปร่างจำเป็นต้องมีโครงสร้างที่สอดคล้องกันทั้งก่อนและหลัง ตัวอย่างเช่น จำนวนจุดและการตั้งค่าการปิดของ Polyline เท่ากัน และลำดับคำสั่งของ Path เหมือนกัน อัปเดตโดยตรงเมื่อโครงสร้างเข้ากันไม่ได้ แอนิเมชั่นดำเนินการโดยฝั่งที่วาดและไม่จำเป็นต้องมีไทม์มิ่งแบบวนซ้ำใน main(); ภาพเคลื่อนไหวไม่เพิ่มความถี่ในการอัปเดตจริงของเซ็นเซอร์หรือ OBD