扫描序列

扫描序列是一个阶段感知编排器，在扫描进行时驱动内置可视化效果按预定义动画播放。您只需启用序列一次，SDK 就会为您呈现扫描动画，而无需逐一启用每个覆盖层。

工作原理

编排器会监视引擎阶段：

• 收集数据期间（CollectingData），它在脸部上播放扫掠动画：
  1. 水平扫掠（默认 2 秒）
  2. 垂直扫掠（默认 2 秒）
  3. 涟漪（默认 0.5 秒）
  4. 静态网格加热感遮罩（开放式——持续到阶段改变为止）
• 其他情况（等待、分析或闲置），它显示您在 idleStage 中提供的配置——例如平静的面部网格，让用户在扫描前后始终获得视觉反馈。

编排器启用时，它接管 faceMesh、thermalMask 和 boundingBox 可视化：这些选项的顶层配置会被跳过以避免重复创建，应改为通过序列选项（以及 idleStage）进行配置。modelLoadingProgress 不受序列管理，保持其正常生命周期。

配置

JavaScript

import { createVitalSignCamera } from 'ts-vital-sign-camera';

const camera = createVitalSignCamera({
  // ... 其他配置
  visualizationOptions: {
    scanningSequence: {
      enabled: true,
      // 待机可视化（未收集数据时显示）
      idleStage: {
        faceMesh: {
          color: 'rgba(200, 200, 200, 0.6)',
          animationDirection: 'both',
          animationSpeed: 6,
          lineWidth: '0.3%'
        }
      },
      // 扫掠样式
      sweepColor: 'white',
      sweepLineWidth: 0.3,
      // 最终热感步骤样式
      staticColor: 'rgba(255, 255, 255, 0.4)',
      staticLineWidth: 0.07,
      // 时间
      stepDurations: [2, 2, 0.5], // [水平, 垂直, 涟漪]，单位为秒
      animationDelay: -1.5
    }
  }
});

React

import { VitalSignCamera } from 'react-vital-sign-camera';

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      scanningSequence: {
        enabled: true,
        idleStage: {
          faceMesh: { animationDirection: 'both', animationSpeed: 6 }
        }
      }
    }}
  />
);

Vue

<template>
  <VitalSignCamera
    :visualizationOptions="visualizationOptions"
  />
</template>

<script setup>
const visualizationOptions = {
  scanningSequence: {
    enabled: true,
    idleStage: {
      faceMesh: { animationDirection: 'both', animationSpeed: 6 }
    },
    stepDurations: [2, 2, 0.5]
  }
};
</script>

选项

选项	类型	默认	描述
enabled	boolean	存在时为 true	编排器的主开关
idleStage	VisualizationOptions	—	引擎阶段不是 CollectingData 时应用的可视化配置。接受与 visualizationOptions 相同的结构（例如 faceMesh、thermalMask、boundingBox）。建议在此声明 faceMesh，让用户在扫描前后都能看到跟踪反馈
sweepColor	string	'white'	三个动画扫掠步骤期间的网格颜色
sweepLineWidth	number | \${number}%``	0.3	扫掠步骤期间的线宽。字符串为面部宽度的百分比；纯数字为像素
staticColor	string	'rgba(255, 255, 255, 0.4)'	最终热感步骤中静态（非动画）网格的颜色
staticLineWidth	number | \${number}%``	0.07	最终热感步骤中静态网格的线宽
stepDurations	[number, number, number]	[2, 2, 0.5]	三个扫掠步骤的持续时间（秒），顺序为 [水平, 垂直, 涟漪]。最终热感步骤是开放式的，持续到引擎阶段改变为止
animationDelay	number	-1.5	应用于扫掠步骤的动画延迟（秒）。使用 0 从相位 0 开始，或使用负值从周期中间开始

ScanningSequenceOptions 接口

interface ScanningSequenceOptions {
  enabled?: boolean;
  idleStage?: VisualizationOptions;
  sweepColor?: string;
  sweepLineWidth?: number | `${number}%`;
  staticLineWidth?: number | `${number}%`;
  staticColor?: string;
  stepDurations?: [number, number, number];
  animationDelay?: number;
}

TIP

序列设计用于配合热感遮罩显示数据——在 idleStage 中配置 thermalMask，或依赖序列内置的热感步骤。扫掠动画方向请参阅面部网格选项。