animated-drawing-diagrams

그려지는 애니메이션 다이어그램 (입장 시 자동 그림)

원칙

다이어그램당 하나의 아이디어, 먼저 한 문장으로 작성합니다. 그림은 화면에 들어올 때 한 번 그려지며, 읽는 순서대로 그려진 후 더 이상 움직이지 않습니다. 잉크는 메시지를 전달하고, 회색은 나머지를 전달하며, 레이블은 그림 위에 있고, 범례는 없습니다. '애니메이션 줄이기' 설정이 활성화되면 그림이 단순히 거기에 표시됩니다.

필수 배경 지식: diagram-storytelling (하나의 아이디어로 축소, 화살표에 동사 사용, 노드 = 상태). emil-design-eng (곡선 및 지속 시간용).

사용하지 말아야 할 경우

• 데이터 그래프 (곡선, 숫자 막대): 데이터 시각화 도구 사용.
• 실시간 작동을 보여주기 위해 반복 재생되는 애니메이션: 애니메이션 프로토타입이지 다이어그램이 아님.
• 도구 내에서 하루에 수십 번 보는 다이어그램: 애니메이션 없음.

작업 절차

1. 문장. 아이디어를 한 문장으로 작성합니다. 잉크로 전달할 주어를 포함합니다 (예: '세 가지 개념 탐색, 하나의 프로토타입 선택'). 문장에 두 개의 아이디어가 있으면 두 개의 다이어그램을 만듭니다.
2. 어휘. reference/diagramMotion.ts와 reference/DiagramParts.tsx를 프로젝트에 복사합니다 (아직 없는 경우). Panel, Arrowhead, 톤 또는 헬퍼를 로컬에서 재정의하지 마십시오.
3. 단어. 이중 언어 데이터 파일 (en/fr): 접근성을 위한 title 및 desc, 그 다음 각 레이블. 레이블은 최대 몇 단어로 합니다. 프랑스어: 대문자에 악센트, 콜론 앞에 줄 바꿈 없는 공백, em 대시 없음.
4. 기하학. viewBox="0 0 960 H" (H는 300~400), 이름이 지정된 상수로 좌표 설정, 줄 끝 레이블을 위한 왼쪽 및 오른쪽 여백 60px (x=54에 textAnchor="end"인 레이블이 잘리지 않도록). Panel 최소값: 720 (전화기에서 스크롤됨).
5. 읽는 순서 = 지연 시간 순서. 각 요소는 읽기 순서를 따르는 지연 시간(ms)을 받습니다. 먼저 읽는 요소는 0, 단계당 +200300ms, 같은 계열의 요소 간에는 40110ms. 잉크로 된 메시지가 마지막에 옵니다 (15002300ms). 전체 그리기 지속 시간: 23초.
6. 검증. localhost에서 페이지를 렌더링하고, 다이어그램을 화면 중앙으로 스크롤한 후 3초 기다린 후, 패널을 캡처합니다 (reference/shoot-diagrams.cjs를 NODE_PATH=<project>/node_modules로 실행). 각 캡처를 확인합니다: 가장자리에서 잘린 레이블, 흰색 블록 아래의 레이블, 서로 닿아 있는 두 개의 나란한 레이블. 수정하고 다시 캡처합니다. 390px에서도 확인합니다.

빠른 참조

요소	헬퍼	값
선, 화살표	pathLength={1}인 path에 대한 draw(shown, delay, duration)	400~900ms
점선	그릴 수 없음: rise (페이드 인)
블록, 레이블	rise(shown, delay): 8px 위로 올라감	500ms
시간 막대	grow(shown, delay, duration): 왼쪽에서 확장	500~800ms
프레임, 렌즈	open(shown, delay): 0.96에서 1로 열림	600ms
화살촉	<Arrowhead x y angle style={rise(...)}> draw 바로 뒤에
톤	INK #111827 메시지, LINE #D1D5DB 테두리, PALE #E5E7EB 배경, #6B7280 보조 레이블, #9CA3AF 제외된 것
텍스트	노드 제목 14px 600, 레이블 11~13px, 10px보다 작게 하지 않음
곡선	cubic-bezier(0.22, 1, 0.36, 1) (이미 헬퍼에 있음)

모든 CSS 변환은 <g> 래퍼에 적용하며, SVG transform이 있는 형태에는 절대 적용하지 마십시오 (대체됨).

아이디어 유형별 형태

• 좁혀지는 시퀀스 : 일렬로 늘어선 노드, 가지들의 부채꼴, 하나만 잉크로 계속, 나머지는 LINE으로 '제외됨' 표시.
• 시간 속의 리듬 : 상단에 주 축, 행위자별로 하나의 선, grow 막대, 중요한 관계에 대한 잉크 화살표.
• 열림 후 수렴 : 지속 시간에 비례하는 막대 위에 렌즈 (open 후 윤곽선 draw).
• 상태 및 전환 : 노드 = 상태 (탐색은 점선, 중간은 회색, 확정된 것은 진한 잉크), 동사로 레이블이 지정된 화살표, 노드에 닿지 않도록 행 위에 배치.
• 부분으로 나뉜 객체 : 왼쪽에 객체, 점선으로 절단, 화살표, 오른쪽에 카드 형태의 부분, 첫 번째 부분은 잉크.

각 형태의 전체 예제: reference/exemple-TemplateDiagrams.tsx 및 해당 단어는 reference/exemple-templateDiagramsData.ts.

다이어그램 미리보기 (카드, 목록)

동일한 컴포넌트가 카드용 고정되고 프레임된 뷰를 렌더링합니다. thumb은 패널과 표시 애니메이션을 비활성화하고, viewBox는 메시지에 중심을 맞춘 520×400 (13:10, 카드 이미지와 동일) 프레임이 됩니다. FRAMES의 각 다이어그램당 하나의 프레임이며, 350px 너비에서 캡처하여 확인합니다. 그림에서 11px부터 텍스트를 읽을 수 있어야 합니다. reference/exemple-TemplateDiagrams.tsx의 Drawing 및 TemplateDiagramThumb를 참조하십시오.

자주 발생하는 오류

오류	수정
'살아있게' 하려고 루프 추가 (도는 점, 깜빡이는 상태)	그리기가 움직임입니다. 시간이 다이어그램의 주제인 경우에만 하나의 루프를 그리기 후에 useLoop를 통해 추가합니다.
강조 색상, 유효/거부에 녹색/빨간색 사용	잉크와 회색만 사용합니다. 판결은 형태 (실선, 점선, 제외) 또는 단어로 표현됩니다.
그림 옆에 범례	단어는 그림 위에, 그것이 지칭하는 것 가까이에 있습니다.
도착 화면 이름으로 레이블이 지정된 화살표	전환의 동사 ('검증됨', '선택되지 않음').
60px 떨어진 두 노드 사이에 중앙 정렬된 레이블	노드 위로 넘칩니다: 행 위에 배치합니다.
효과를 위해 선택된 지연 시간	읽기 순서를 따르는 지연 시간, 메시지가 마지막.
캡처 없이 완료 선언	스크롤 후 3초 대기 후 캡처, 캡처를 읽습니다.