Hoạt ảnh

animations là một mảng khai báo hoạt ảnh trên View. property chỉ định thuộc tính cần điều khiển, chẳng hạn như opacity hoặc sweepAngle. Khi giá trị đích của View thay đổi, hoạt ảnh tương ứng sẽ bắt đầu chuyển đổi; việc chỉ thêm hoạt ảnh vào các thuộc tính cố định sẽ không tự động tạo ra thay đổi.

Danh sách các thuộc tính được mỗi thành phần hỗ trợ được cung cấp trên trang của nó. Khi bạn cần tự động thêm, xóa hoặc sắp xếp lại sub-View, hãy giữ key ổn định cho chúng để các bản cập nhật vẫn tương ứng với cùng một đối tượng vẽ.

Đơn vị của duration, delay là giây, thời lượng mặc định là 0,25 giây, độ trễ bằng 0 và đường cong mặc định là easeInOut. from/to có thể làm rõ mục tiêu bắt đầu và kết thúc, repeat và autoreverse kiểm soát sự lặp lại và hành trình khứ hồi. Cùng một thuộc tính chỉ nên được kiểm soát bởi một khai báo.

Thuộc tính thời kỳ có thể sử dụng wrap để chọn đường dẫn chuyển tiếp qua các thời kỳ. Ví dụ: startAngle sẽ sử dụng wrap: 360 từ 350° đến 10°. sweepAngle thể hiện góc quét thực tế, giữ nguyên hướng dương và âm và không hỗ trợ wrap.

Sau khi chọn tốc độ, ví dụ sẽ chuyển đổi phạm vi tốc độ từ 0–200 thành 0–360°. Khi tốc độ thay đổi từ 50 đến 100, góc mục tiêu thay đổi từ 90° đến 180° và vòng cung mất 0,25 giây để hoàn thành quá trình chuyển đổi. Đơn vị tốc độ hiện tại được sử dụng cho phạm vi đo; một đường ngang được hiển thị khi không có phép đo.

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 dùng để cập nhật các nội dung như văn bản, hình ảnh hay dữ liệu biểu đồ. Loại hỗ trợ được xác định bởi thành phần cụ thể, chẳng hạn như chuyển tiếp văn bản kỹ thuật số và nội suy dữ liệu đồ họa.

Nội suy hình dạng yêu cầu các cấu trúc tương ứng trước và sau, ví dụ: số điểm và cài đặt đóng của Polyline giống nhau và chuỗi lệnh của Path giống nhau. Cập nhật trực tiếp khi cấu trúc không tương thích. Hoạt ảnh được thực hiện bởi phía vẽ và không yêu cầu tính thời gian vòng lặp trong main(); hoạt ảnh không làm tăng tần suất cập nhật thực tế của cảm biến hoặc OBD.