CapDrive
사용 가이드

공통 유형

View 속성, 데이터 유형과 코드 예제를 확인하세요.

ViewContent

View, 기본 값, 중첩 배열로 된 내용입니다. null/undefined는 내용이 없습니다.

type ViewContent =
  View | string | number | boolean | null | undefined | ViewContent[];

예제

const example: ViewContent = ['Speed', 78, null];

TextContent

toString()으로 문자열화합니다. null/undefined는 빈칸이며 아이콘은 다른 View와 조합합니다.

type TextContent =
  | string
  | number
  | bigint
  | boolean
  | symbol
  | { toString(): string }
  | null
  | undefined;

예제

const example: TextContent = {
  toString() {
    return '78 km/h';
  },
};

HDRColor

그리기 색상과 그라디언트에 사용하는 HDR 색상 데이터.

type HDRColor = { readonly $type: 'CapDrive.HDR'; readonly color: string };

예제

const example: HDRColor = HDR('white');

RGBColor

r/g/b와 선택적 a는 0–1입니다. space는 srgb 또는 displayP3입니다.

type RGBColor = {
  space?: 'srgb' | 'displayP3';
  r: number;
  g: number;
  b: number;
  a?: number;
};

예제

const example: RGBColor = {
  space: 'displayP3',
  r: 0.2,
  g: 0.7,
  b: 0.6,
  a: 0.8,
};

Color

색 이름, 16진 문자열, RGBColor 또는 HDR() 색입니다.

type Color = string | RGBColor | HDRColor;

예제

const example: Color = '#30B3A2';

ViewPoint

화면 포인트 단위의 로컬 x/y 좌표로 위도·경도가 아닙니다.

type ViewPoint = { x: number; y: number };

예제

const example: ViewPoint = { x: 20, y: 40 };

ChartDataPoint

value.x/y는 위치, label.x/y는 글자입니다. y가 null이면 선을 끊습니다.

type ChartDataPoint = {
  value: { x: number; y: number | null };
  label: { x: string; y: string };
};

예제

const example: ChartDataPoint = {
  value: { x: 12, y: null },
  label: { x: '12s', y: '' },
};

ChartRange

수치 범위 [min, max]이며 인덱스나 라벨이 아닙니다.

type ChartRange = readonly [min: number, max: number];

예제

const example: ChartRange = [-20, 100];

MapCoordinate

latitude 위도와 longitude 경도(도)입니다.

type MapCoordinate = { latitude: number; longitude: number };

예제

const example: MapCoordinate = { latitude: 31.2304, longitude: 121.4737 };

MapPathStyle

네이티브 경로 스타일: Color, 두께, 끝, 연결, 점선, 외곽선 및 선택적 시작·끝 마커입니다. 그라디언트는 지원하지 않습니다.

type MapPathStyle = {
  stroke?: Color;
  lineWidth?: number;
  lineCap?: 'round' | 'butt' | 'square';
  lineJoin?: 'round' | 'miter' | 'bevel';
  dash?: readonly number[];
  dashPhase?: number;
  outlineStroke?: Color;
  outlineWidth?: number;
  showEndpoints?: boolean;
};

예제

const example: MapPathStyle = {
  stroke: '#30B3A2',
  lineWidth: 4,
  outlineStroke: 'white',
  outlineWidth: 1,
  showEndpoints: true,
};

ChartAxisStyle

축선 색상·그라디언트, 두께, 끝 모양, 점선입니다. clear로 선을 숨기며 라벨은 별도 제어합니다.

type ChartAxisStyle = {
  stroke?: Paint;
  lineWidth?: number;
  lineCap?: 'round' | 'butt' | 'square';
  dash?: readonly number[];
  dashPhase?: number;
};

예제

const example: ChartAxisStyle = {
  stroke: '#888888',
  lineWidth: 1,
  dash: [4, 3],
};

BarChartDataPoint

막대 하나의 value와 선택적 label입니다. 배열 순서로 배치합니다.

type BarChartDataPoint = { value: number; label?: string };

예제

const example: BarChartDataPoint = { value: -25, label: 'B' };

PathCommand

move, line, quad, cubic, arc, close 명령입니다. 좌표·반경은 포인트, 각도는 도입니다.

type PathCommand =
  | { op: 'move'; x: number; y: number }
  | { op: 'line'; x: number; y: number }
  | { op: 'quad'; x: number; y: number; cx: number; cy: number }
  | {
      op: 'cubic';
      x: number;
      y: number;
      c1x: number;
      c1y: number;
      c2x: number;
      c2y: number;
    }
  | {
      op: 'arc';
      x: number;
      y: number;
      radius: number;
      startAngle: number;
      sweepAngle: number;
    }
  | { op: 'close' };

예제

const example: PathCommand = {
  op: 'cubic',
  x: 100,
  y: 60,
  c1x: 20,
  c1y: 0,
  c2x: 80,
  c2y: 100,
};

GradientStop

색상 또는 색상과 0–1 위치 location을 가진 객체입니다.

type GradientStop = Color | { color: Color; location: number };

예제

const example: GradientStop = { color: '#30B3A2', location: 0.7 };

GradientColors

순서대로 놓인 그라디언트 색상·정지점입니다. 색상만 쓰면 균등 배치합니다.

type GradientColors = ReadonlyArray<GradientStop>;

예제

const example: GradientColors = [
  { color: 'red', location: 0 },
  { color: 'blue', location: 1 },
];

LinearGradientOptions

선형 그라디언트 angle은 도, center는 정규화 좌표이며 (0.5, 0.5)가 중앙입니다.

type LinearGradientOptions = { angle?: number; center?: ViewPoint };

예제

const example: LinearGradientOptions = {
  angle: 90,
  center: { x: 0.5, y: 0.5 },
};

RadialGradientOptions

방사형 startRadius/endRadius는 포인트이고 center는 정규화 좌표입니다.

type RadialGradientOptions = {
  startRadius?: number;
  endRadius?: number;
  center?: ViewPoint;
};

예제

const example: RadialGradientOptions = {
  startRadius: 0,
  endRadius: 60,
  center: { x: 0.5, y: 0.5 },
};

AngularGradientOptions

각도 그라디언트 angle은 도이고 center는 정규화 좌표입니다.

type AngularGradientOptions = { angle?: number; center?: ViewPoint };

예제

const example: AngularGradientOptions = {
  angle: -90,
  center: { x: 0.5, y: 0.5 },
};

Gradient

LinearGradient, RadialGradient, AngularGradient가 만든 색입니다. new 유무 모두 가능합니다.

type Gradient = {
  readonly type: 'linear' | 'radial' | 'angular';
  readonly angle?: number;
  readonly startRadius?: number;
  readonly endRadius?: number;
  readonly center?: ViewPoint;
  readonly colors: GradientColors;
};

예제

const example: Gradient = LinearGradient(['red', 'blue'], { angle: 90 });

Paint

그리기 색상으로 Color 또는 Gradient를 사용합니다.

type Paint = Color | Gradient;

예제

const example: Paint = RadialGradient(['white', '#30B3A2'], {
  endRadius: 60,
});

DrawingEffect

효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.

type DrawingEffect = {
  color?: Color;
  opacity?: number;
  radius?: number;
  x?: number;
  y?: number;
};

예제

const example: DrawingEffect = {
  color: 'cyan',
  opacity: 0.6,
  radius: 8,
  x: 0,
  y: 2,
};

ViewTransform

레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.

type ViewTransform = {
  translateX?: number;
  translateY?: number;
  scaleX?: number;
  scaleY?: number;
  rotation?: number;
  skewX?: number;
  skewY?: number;
  anchorX?: number;
  anchorY?: number;
};

예제

const example: ViewTransform = {
  rotation: 30,
  scaleX: 1.2,
  scaleY: 1.2,
  anchorX: 0.5,
  anchorY: 0.5,
};

RepeatAxisValue

숫자는 활성 축에 적용하며 x/y 객체로 각 축을 설정할 수 있습니다.

type RepeatAxisValue = number | { x?: number; y?: number };

예제

const example: RepeatAxisValue = { x: 120, y: 80 };

AnimationProperty

애니메이션 속성명 또는 중첩 경로입니다. View별로 지원 목록이 다릅니다.

type AnimationProperty =
  | 'width'
  | 'height'
  | 'padding'
  | 'x'
  | 'y'
  | 'opacity'
  | 'cornerRadius'
  | 'blur'
  | 'shadowOpacity'
  | 'shadowRadius'
  | 'shadowX'
  | 'shadowY'
  | 'fontSize'
  | 'letterSpacing'
  | 'minimumScaleFactor'
  | 'spacing'
  | 'radius'
  | 'radiusX'
  | 'radiusY'
  | 'startAngle'
  | 'sweepAngle'
  | 'lineWidth'
  | 'dashPhase'
  | 'trimStart'
  | 'trimEnd'
  | 'barThickness'
  | 'value'
  | 'offset'
  | 'anchor'
  | 'period'
  | 'minLength'
  | 'color'
  | 'stroke'
  | 'background'
  | 'shadowColor'
  | 'transform.translateX'
  | 'transform.translateY'
  | 'transform.scaleX'
  | 'transform.scaleY'
  | 'transform.rotation'
  | 'transform.skewX'
  | 'transform.skewY'
  | 'transform.anchorX'
  | 'transform.anchorY'
  | 'period.x'
  | 'period.y'
  | 'value.x'
  | 'value.y'
  | 'anchor.x'
  | 'anchor.y'
  | 'offset.x'
  | 'offset.y'
  | 'start.x'
  | 'start.y'
  | 'end.x'
  | 'end.y'
  | 'rangeX.0'
  | 'rangeX.1'
  | 'rangeY.0'
  | 'rangeY.1'
  | 'xAxis.lineWidth'
  | 'xAxis.dashPhase'
  | 'yAxis.lineWidth'
  | 'yAxis.dashPhase'
  | 'xAxis.stroke'
  | 'yAxis.stroke'
  | 'regionOffset.x'
  | 'regionOffset.y'
  | 'pathStyle.lineWidth'
  | 'pathStyle.outlineWidth'
  | 'pathStyle.dashPhase'
  | 'pathStyle.stroke'
  | 'pathStyle.outlineStroke';

예제

const example: AnimationProperty = 'transform.rotation';

Animation

속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.

type Animation = {
  property: AnimationProperty;
  duration?: number;
  delay?: number;
  curve?: string;
  from?: number | Color;
  to?: number | Color;
  repeat?: number | 'forever';
  autoreverse?: boolean;
  wrap?: number;
};

예제

const example: Animation = {
  property: 'opacity',
  duration: 0.25,
  curve: 'easeOut',
};

CircleAnimation

원호 애니메이션에서 sweepAngle은 wrap을 지원하지 않고 startAngle은 wrap: 360을 지원합니다.

type CircleAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'background'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'dashPhase'
        | 'stroke'
        | 'lineWidth'
        | 'startAngle'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'sweepAngle';
      from?: number;
      to?: number;
      wrap?: never;
    });

예제

const example: CircleAnimation = {
  property: 'sweepAngle',
  duration: 0.3,
  from: 0,
  to: 270,
};

EllipseAnimation

원호 애니메이션에서 sweepAngle은 wrap을 지원하지 않고 startAngle은 wrap: 360을 지원합니다.

type EllipseAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'background'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'dashPhase'
        | 'stroke'
        | 'lineWidth'
        | 'startAngle'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'sweepAngle';
      from?: number;
      to?: number;
      wrap?: never;
    });

예제

const example: EllipseAnimation = {
  property: 'startAngle',
  duration: 0.3,
  wrap: 360,
};

ArcAnimation

원호 애니메이션에서 sweepAngle은 wrap을 지원하지 않고 startAngle은 wrap: 360을 지원합니다.

type ArcAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'background'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'dashPhase'
        | 'stroke'
        | 'lineWidth'
        | 'startAngle'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'sweepAngle';
      from?: number;
      to?: number;
      wrap?: never;
    });

예제

const example: ArcAnimation = {
  property: 'sweepAngle',
  duration: 0.3,
  from: 0,
  to: -180,
};

MapAnimation

지도 View와 경로 스타일 속성용입니다. 카메라는 cameraAnimation으로 별도 제어합니다.

type MapAnimation =
  | (Omit<Animation, 'property' | 'from' | 'to'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'cornerRadius'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY'
        | 'regionOffset.x'
        | 'regionOffset.y'
        | 'pathStyle.lineWidth'
        | 'pathStyle.outlineWidth'
        | 'pathStyle.dashPhase';
      from?: number;
      to?: number;
    })
  | (Omit<Animation, 'property' | 'from' | 'to' | 'wrap'> & {
      property: 'pathStyle.stroke' | 'pathStyle.outlineStroke';
      from?: Color;
      to?: Color;
      wrap?: never;
    });

예제

const example: MapAnimation = {
  property: 'pathStyle.stroke',
  duration: 0.25,
  from: 'red',
  to: 'blue',
};

LineChartAnimation

차트 범위와 축 스타일도 애니메이션화합니다. 범위는 wrap 불가이며 색 경로는 색을 받습니다.

type LineChartAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'stroke'
        | 'lineWidth'
        | 'dashPhase'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'rangeX.0' | 'rangeX.1' | 'rangeY.0' | 'rangeY.1';
      from?: number;
      to?: number;
      wrap?: never;
    })
  | (Omit<Animation, 'property' | 'from' | 'to'> & {
      property:
        | 'xAxis.lineWidth'
        | 'xAxis.dashPhase'
        | 'yAxis.lineWidth'
        | 'yAxis.dashPhase';
      from?: number;
      to?: number;
    })
  | (Omit<Animation, 'property' | 'from' | 'to' | 'wrap'> & {
      property: 'xAxis.stroke' | 'yAxis.stroke';
      from?: Color;
      to?: Color;
      wrap?: never;
    });

예제

const example: LineChartAnimation = { property: 'rangeX.1', duration: 0.25 };

BarChartAnimation

차트 범위와 축 스타일도 애니메이션화합니다. 범위는 wrap 불가이며 색 경로는 색을 받습니다.

type BarChartAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'x'
        | 'y'
        | 'opacity'
        | 'background'
        | 'cornerRadius'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'barThickness'
        | 'stroke'
        | 'lineWidth'
        | 'dashPhase'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'rangeY.0' | 'rangeY.1';
      from?: number;
      to?: number;
      wrap?: never;
    })
  | (Omit<Animation, 'property' | 'from' | 'to'> & {
      property:
        | 'xAxis.lineWidth'
        | 'xAxis.dashPhase'
        | 'yAxis.lineWidth'
        | 'yAxis.dashPhase';
      from?: number;
      to?: number;
    })
  | (Omit<Animation, 'property' | 'from' | 'to' | 'wrap'> & {
      property: 'xAxis.stroke' | 'yAxis.stroke';
      from?: Color;
      to?: Color;
      wrap?: never;
    });

예제

const example: BarChartAnimation = { property: 'rangeY.1', duration: 0.25 };

RadialLayoutAnimation

원호 애니메이션에서 sweepAngle은 wrap을 지원하지 않고 startAngle은 wrap: 360을 지원합니다.

type RadialLayoutAnimation =
  | (Omit<Animation, 'property'> & {
      property:
        | 'width'
        | 'height'
        | 'padding'
        | 'x'
        | 'y'
        | 'opacity'
        | 'background'
        | 'cornerRadius'
        | 'blur'
        | 'shadowColor'
        | 'shadowOpacity'
        | 'shadowRadius'
        | 'shadowX'
        | 'shadowY'
        | 'radius'
        | 'radiusX'
        | 'radiusY'
        | 'startAngle'
        | 'transform.translateX'
        | 'transform.translateY'
        | 'transform.scaleX'
        | 'transform.scaleY'
        | 'transform.rotation'
        | 'transform.skewX'
        | 'transform.skewY'
        | 'transform.anchorX'
        | 'transform.anchorY';
    })
  | (Omit<Animation, 'property' | 'wrap' | 'from' | 'to'> & {
      property: 'sweepAngle';
      from?: number;
      to?: number;
      wrap?: never;
    });

예제

const example: RadialLayoutAnimation = {
  property: 'startAngle',
  duration: 0.25,
  wrap: 360,
};

SpacerAnimation

Spacer는 width, height, minLength의 배치만 애니메이션화하며 시각 효과는 없습니다.

type SpacerAnimation = {
  property: 'width' | 'height' | 'minLength';
  duration?: number;
  delay?: number;
  curve?: string;
  from?: number;
  to?: number;
  repeat?: number | 'forever';
  autoreverse?: boolean;
  wrap?: number;
};

예제

const example: SpacerAnimation = {
  property: 'minLength',
  duration: 0.25,
  from: 8,
  to: 24,
};

ContentAnimation

내용 변경 효과입니다. View가 지원하는 type을 선택하며 duration/delay는 초입니다.

type ContentAnimation = {
  type: 'fade' | 'slide' | 'scale' | 'numericText' | 'interpolate';
  duration?: number;
  delay?: number;
  curve?: string;
  direction?: string;
  distance?: number;
  scale?: number;
};

예제

const example: ContentAnimation = { type: 'numericText', duration: 0.18 };

ViewSize

측정한 width와 height이며 단위는 화면 포인트입니다.

type ViewSize = { width: number; height: number };

예제

const example: ViewSize = { width: 240, height: 140 };

ViewInsets

top, leading, bottom, trailing 여백(포인트)입니다.

type ViewInsets = {
  top: number;
  leading: number;
  bottom: number;
  trailing: number;
};

예제

const example: ViewInsets = {
  top: 24,
  leading: 12,
  bottom: 12,
  trailing: 12,
};

CardContentMetrics

renderer에 전달하는 size, contentSize, headerSize, safeInsets로 헤더를 피해 본문을 배치합니다.

type CardContentMetrics = {
  size: ViewSize;
  contentSize: ViewSize;
  headerSize: ViewSize;
  safeInsets: ViewInsets;
};

예제

const example: CardContentMetrics = {
  size: { width: 240, height: 160 },
  contentSize: { width: 216, height: 124 },
  headerSize: { width: 216, height: 24 },
  safeInsets: { top: 24, leading: 12, bottom: 12, trailing: 12 },
};

LineChart

이전

이 페이지의 내용

ViewContentTextContentHDRColorRGBColorColorViewPointChartDataPointChartRangeMapCoordinateMapPathStyleChartAxisStyleBarChartDataPointPathCommandGradientStopGradientColorsLinearGradientOptionsRadialGradientOptionsAngularGradientOptionsGradientPaintDrawingEffectViewTransformRepeatAxisValueAnimationPropertyAnimationCircleAnimationEllipseAnimationArcAnimationMapAnimationLineChartAnimationBarChartAnimationRadialLayoutAnimationSpacerAnimationContentAnimationViewSizeViewInsetsCardContentMetrics