Animation

animations is an array of animation declarations on View. property specifies the attribute to control, such as opacity or sweepAngle. When the target value of View changes, the corresponding animation begins to transition; simply adding animation to fixed attributes will not automatically produce changes.

A list of properties supported by each component is provided on its page. When you need to dynamically add, delete or rearrange sub-View, keep a stable key for them so that updates still correspond to the same drawing object.

The unit of duration, delay is seconds, the default duration is 0.25 seconds, the delay is zero, and the default curve is easeInOut. from/to can clarify the start and end goals, repeat and autoreverse control repetition and round-trip. The same property should only be controlled by one declaration.

Period attributes can use wrap to select transition paths across periods. For example startAngle would use wrap: 360 from 350° to 10°. sweepAngle represents the actual swept angle, retaining the positive and negative directions, and does not support wrap.

After selecting a speed, the example converts a speed range of 0–200 to 0–360°. When the speed changes from 50 to 100, the target angle changes from 90° to 180°, and the arc takes 0.25 seconds to complete the transition. The current speed unit is used for the measuring range; a horizontal line is displayed when there is no measurement.

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 is used to update content such as text, pictures or chart data. The type of support is determined by the specific component, such as digital text transitions and graphics data interpolation.

Shape interpolation requires corresponding structures before and after, for example, the number of points and closing settings of Polyline are the same, and the command sequence of Path is the same. Update directly when the structure is incompatible. Animation is performed by the draw side and does not require loop timing in main(); animation does not increase the actual update frequency of the sensor or OBD.