アニメーション

サポートされている View 属性の animations を介してトランジションを設定します。プロパティが新しいターゲット値を取得した後、CapDrive は宣言された期間と曲線に従って中間状態を描画します。

アニメーションをトリガーする方法

animations は、View 上のアニメーション宣言の配列です。 property は、opacity や sweepAngle など、制御する属性を指定します。 View のターゲット値が変化すると、対応するアニメーションが遷移し始めます。アニメーションを固定属性に追加するだけでは、自動的に変更は行われません。

各コンポーネントでサポートされているプロパティのリストは、そのページに記載されています。サブ View を動的に追加、削除、または再配置する必要がある場合は、更新が同じ描画オブジェクトに引き続き対応するように、安定した key を保持してください。

時間、繰り返し、角度

duration、delay の単位は秒、デフォルトの継続時間は 0.25 秒、遅延は 0、デフォルトの曲線は easeInOut です。 from/to は開始目標と終了目標を明確にし、repeat と autoreverse は繰り返しとラウンドトリップを制御します。同じプロパティは 1 つの宣言でのみ制御する必要があります。

期間属性は 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 の実際の更新頻度が増加することはありません。

アニメーション