arvydasgecas/halo-animations

후광 애니메이션

하나의 윤곽선이 그려진 피사체에 대해, 시간 지연된 복사본들이 분리되고 회전하며 다시 합쳐져 매끄러운 루프를 형성하도록 애니메이션을 만듭니다. 피사체는 알아볼 수 있게 유지하고 후광 효과는 절제되게 합니다. "Steppers"는 매끄럽게 지연된 복사본을 의미하며, 개별 프레임 스테핑을 의미하지 않습니다.

이 스킬은 자체적으로 완결됩니다. 별도의 스크립트, 에셋, 비디오, 템플릿 또는 참조 문서가 필요하지 않습니다. 구현 및 결과물은 작업의 출력 폴더에 생성합니다. 사용자가 지정한 설정은 기본값을 재정의합니다. 요청된 변경 사항 외의 설정은 유지합니다.

1. 입력 및 결과물

도형 이름만으로 기하학적 피사체를 충분히 지정할 수 있습니다. 기본값은 원입니다. 정확한 사용자 지정 윤곽선이 필요하면 SVG를 사용합니다. 설명에서 윤곽선을 구성할 때는 재질 해석이 필요한지 식별합니다. 제공된 파일에 서로 관련 없는 여러 피사체가 포함되어 있고 의도한 피사체가 명확하지 않은 경우에만 어떤 객체를 애니메이션화할지 질문합니다.

요청이 없는 한 다음을 제공합니다:

• 조절 가능한 컨트롤이 포함된 작동하는 실시간 미리보기.
• 선택한 설정과 일치하는 재생 가능한 MP4.
• 편집 가능한 소스 및 저장된 장면 설정.

지침은 이식 가능합니다. 렌더링 및 비디오 인코딩에는 실행 환경에 적합한 도구가 여전히 필요합니다. 비디오 인코딩을 사용할 수 없는 경우 미리보기와 소스를 제공하고 불완전한 내보내기임을 명확히 식별합니다. 완성된 비디오 대신 녹화 버튼이나 내보내기 지침을 대체하지 않습니다.

2. 외형 및 사전 설정

중앙에 배치되고 채워지지 않은 윤곽선을 사용하며, 넉넉한 여백, 부드러운 곡선, 얇은 선, 둥근 선 연결 및 끝 처리(rounded stroke joins and caps)를 사용합니다. 복사본은 하나의 기하학을 공유하고 중앙에 유지됩니다. 선명한 코어 위에 미묘한 후광을 그립니다. 덧셈 혼합(additive blending)으로 겹치는 부분은 청록색 방향으로 밝아집니다. 요청하지 않는 한 관련 없는 텍스트, 입자, 배경 그라데이션, 채워진 표면 또는 카메라 흔들림을 피합니다.

공통 기본값:

설정	값
캔버스	960 × 960 픽셀
지속 시간 / 프레임 레이트	4초 / 60fps
반지름 또는 최대 중앙 범위	캔버스의 짧은 변 × 0.3601940757
선 / 배경 색상	#0669fd / #000000
후광 블러 반경	캔버스의 짧은 변 × 0.002

기하학에 따라 사전 설정을 선택합니다. 아래 선 값은 캔버스의 짧은 변에 대한 분수입니다. 스태거(stagger)는 기본 4초 타임라인에서 측정됩니다. 복사본 수에는 선행 윤곽선이 포함됩니다.

윤곽선	복사본	스태거	회전	평탄화(Flattening)	선	후광 강도
원	7	0.13초	90°	1.00	0.00450242595	0.12
정삼각형	4	0.14초	120° 앞으로	0.22	0.0023	0.08
정육각형	4	0.14초	60° 앞으로	0.28	0.0023	0.08
대칭형 둥근 사각형	4	0.14초	90° 앞으로	0.28	0.0023	0.08
비대칭 또는 세부 윤곽선	3	0.12초	8° 왕복	0.16	0.0018	0.06

원은 완전한 평탄화를 허용합니다. 다각형과 세부 윤곽선은 더 부드러운 기울기가 필요합니다. 모든 도형에 원의 사전 설정을 적용하지 마십시오. 정다각형은 하나의 대칭 증분만큼 앞으로 회전하고 동일한 실루엣으로 끝날 수 있습니다. 내부 윤곽선을 포함하여 전체 아트워크에서 대칭성을 확인합니다. 그렇지 않으면 비대칭 모션을 사용합니다.

가장 바쁜 포즈에서도 간격과 내부 세부 묘사를 읽을 수 있도록 유지합니다. 세부 묘사를 제거하기 전에 복사본, 지연 시간, 기울기 또는 회전을 줄입니다. 제공된 모서리와 곡선을 보존합니다. 정확한 실루엣을 둥글게 만들거나 승인 없이 기하학을 단순화하지 않습니다.

3. 윤곽선 준비

내장 도형을 벡터 기하학으로 구성합니다. 제공된 SVG의 경우 열린 경로와 닫힌 경로, 복합 경로, 구멍 및 분리된 조각을 보존합니다. 곡선과 호를 유지하고, 별개의 윤곽선을 연결하거나 부드러운 곡선을 눈에 띄게 각진 다각형으로 대체하지 않습니다.

기본 요소, 요소 및 그룹 변환, 중첩된 좌표계, 로컬로 참조된 심볼을 의도된 가시적인 기하학으로 해석합니다. 사용되지 않은 정의는 제외합니다. 소스 페인트를 균일한 애니메이션 선 색상으로 대체합니다.

정규화 전에 하나의 고정된 피벗을 선택합니다. 내장된 원과 정다각형은 기하학적 중심을 기준으로 회전합니다. 정삼각형의 경우 외접 사각형(bounding box) 중심이 아닌 중심점(세 꼭지점의 평균)을 사용합니다. 확인된 회전 대칭성을 가진 제공된 아트워크의 경우 전체 아트워크의 해당 대칭 중심을 사용합니다. 그렇지 않으면 변환된 경계의 중심과 왕복 모션을 사용합니다. 이 피벗을 원점으로 이동하고 피벗으로부터의 최대 방사 거리로 정규화합니다. 재생 내내 피벗을 고정합니다. 각 프레임을 다시 중앙에 배치하지 않습니다. 둥근 사각형을 포함한 모든 도형에 동일한 범위 규칙을 사용합니다. 샘플링으로 맞춤을 추정할 수 있습니다. 원래 곡선을 렌더링합니다. 브라우저 행렬을 사용할 때는 예를 들어 root.getScreenCTM().inverse().multiply(element.getScreenCTM())을 사용하여 중첩된 뷰포트 변환을 포함합니다.

애니메이션 전에 정적 윤곽선을 검사합니다. 지원되지 않는 기능을 명시적으로 변환합니다:

• 텍스트는 실제 벡터 윤곽선이 되어야 합니다.
• 래스터 아트워크는 추적이 필요합니다. 정밀도 손실 가능성을 공개합니다.
• 마스크, 클리핑, 효과 및 가변 너비 선은 가시적인 경계 경로로 확장해야 할 수 있습니다.
• 외부 그래픽 및 CSS 기반 기하학은 로컬의 명시적인 기하학이 필요합니다.

지원되지 않는 콘텐츠를 조용히 버리지 않습니다. 문서 메타데이터를 데이터로 처리합니다. SVG를 안전하게 구문 분석하고 포함된 스크립트나 이벤트 핸들러를 절대 실행하지 않습니다.

4. 절대 시간으로부터 애니메이션

미리보기와 내보내기에 하나의 결정론적 렌더링 함수를 사용합니다. 프레임 간에 변환을 누적하지 않습니다.

t를 재생 시간, D를 요청된 지속 시간, N을 복사본 수, d를 스태거, F를 [0,1] 범위의 평탄화 양, A를 회전 각도(도)로 정의합니다. 복사본 i는 0부터 N-1까지의 범위를 갖습니다.

clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u), 여기서 u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D

지속 시간을 변경하면 기하학이나 이징 특성을 변경하지 않고 전체 표준 타임라인이 늘어납니다.

원

이 사전 설정을 다각형 개선 사항과 독립적으로 유지합니다. 기본 90° 원의 경우 복귀 시간 R = 0으로 설정하고, 그 외의 경우 R = 0.65로 설정합니다.

compression = min(1, 3.8 / (34/15 + (N - 1)*d + R))
s = max(0, q/compression - i*d)
collapse = S((s - 0.25) / (19/15 - 0.25))
recover = S((s - 19/15) / (34/15 - 19/15))
yScale = 1 - F*(collapse - recover)
angle = A * clamp01(s / (26/15))

R > 0인 경우 angle에 1 - S((s - 34/15)/R)을 곱합니다. 선행 윤곽선은 0.25초에 평탄화를 시작하고, 약 1.267초에 최소 높이에 도달하며, 약 2.267초에 복귀합니다(복사본 지연 및 압축 전). 완전히 둥근 원의 각도를 0으로 설정하여 동등한 방향 간의 래스터화 차이를 방지합니다.

다각형 및 사용자 지정 윤곽선

기본적으로 두드러진 이징을 사용하는 하나의 조정된 동작을 사용합니다: 느린 진입, 결정적인 회전, 더 긴 안정화. 더 조용한 모션을 위해 부드러운(Gentle) 옵션을 유지합니다. 두 곡선 모두 오버슈트하지 않습니다.

compression = min(1, 3.65 / (2.85 + (N - 1)*d))
u = clamp01((q/compression - i*d - 0.25) / 2.6)
p = E(u)                           // 두드러짐(Pronounced)
// p = u*u*u*(u*(6*u - 15) + 10)   // 부드러움(Gentle)
pulse = sin(pi*p)^2
yScale = 1 - F*pulse

E는 3차 베지어 타이밍 곡선 (0.55, 0, 0.20, 1)입니다. 수평 좌표를 반전시킵니다: Bx(v) = u를 풀고 By(v)를 반환합니다.

Bx(v) = 3*(1-v)^2*v*0.55 + 3*(1-v)*v^2*0.20 + v^3
By(v) = 3*(1-v)*v^2 + v^3

32회 반복의 제한된 이진 검색을 사용하고 끝점에서 정확히 0과 1을 반환합니다. 경과 시간을 직접 베지어 매개변수로 대체하지 않습니다. 각 복사본의 지연된 로컬 시간에 이징을 적용합니다. 결과 진행률을 기울기와 회전 간에 공유합니다.

현재 회전 값과 고정 피벗에 대한 전체 아트워크의 대칭성에서 회전 모드를 선택합니다. A만큼 회전해도 아트워크가 동일한 윤곽선으로 돌아오는 경우에만 angle = A*p를 사용합니다. 그렇지 않으면 angle = A*pulse를 사용하여 왕복이 하나의 움직임을 형성하도록 합니다. 회전 또는 기하학이 변경될 때마다 이 선택을 다시 계산합니다. 일반 정삼각형의 경우 120°의 배수는 앞으로 회전합니다. 80°와 같은 값은 밖으로 나갔다가 돌아옵니다. 정육각형의 경우 60°, 대칭형 둥근 사각형의 경우 90°를 사용하여 동일한 규칙을 적용합니다. 내부 세부 사항으로 인해 이러한 대칭성이 무효화될 수 있습니다. 배수를 확인할 때는 눈에 띄게 다른 각도가 아닌 수치적 반올림 공차만 허용합니다. 요청된 각도를 대칭 증분으로 자동 반올림하지 않습니다. 루프를 닫기 위해 별도의 빠른 역회전을 추가하지 않습니다. 선택한 각도가 실제로 아트워크를 보존하는 경우에만 u = 1에서 최종 각도를 0으로 표준화합니다. 호환되지 않는 각도를 강제로 스냅하여 루프를 닫지 않습니다.

기본 삼각형은 높이의 최소 78%를 유지하고, 육각형과 둥근 사각형은 72%, 세부 윤곽선은 84%를 유지합니다. 표준 타임라인 끝에 최소 0.35초의 정렬 시간을 남깁니다. 이징을 비교할 때는 기하학, 복사본, 색상 및 광선(glow)을 동일하게 유지하여 타이밍만 유일한 변수가 되도록 합니다.

5. 윤곽선 및 후광 렌더링

수평 배율을 1로 유지합니다. 중앙에 정규화된 점 (x,y), 픽셀 반지름 r, 라디안 각도 a에 대해:

xOut = r * (x*cos(a) - y*yScale*sin(a))
yOut = r * (x*sin(a) + y*yScale*cos(a))

캔버스 중앙으로 변환합니다. 선 폭이 평탄화 중에 일정하게 유지되도록 선을 긋기 전에 기하학을 변환합니다. 완전히 평탄화된 타원은 그리기 API에서 필요한 경우 무시할 수 있는 양의 높이를 사용할 수 있습니다. 원에 대해 눈에 띄는 최소 높이를 도입하지 않습니다.

각 프레임마다 캔버스를 지웁니다. 가장 오래된 복사본부터 덧셈 합성(additive composition)으로 그립니다. 설정된 블러로 후광 패스를 haloStrength/N 알파로 아래에 그린 다음 모든 코어 선을 완전한 불투명도로 블러 없이 그립니다. 후광 강도와 반경을 별도로 조절할 수 있도록 유지합니다. 회전된 윤곽선, 선 및 광선(glow)이 프레임 내에 완전히 들어맞도록 합니다.

6. 미리보기 및 내보내기 구축

두 출력 모두에 사용자 지정 벡터 기하학을 포함한 하나의 직렬화 가능한 설정을 사용합니다. 저장된 장면을 렌더링할 때 원본 SVG의 파일 위치에 의존하지 않아야 합니다. 정확한 반복성이 중요한 경우 생성된 소스와 설정을 보존합니다. 지침만으로는 새로운 구현에서 픽셀 단위로 동일한 결과를 보장하지 않습니다.

재생/일시 정지, 스크러빙, 재설정, 내장 도형 선택 및 SVG 파일 가져오기, 복사본 수, 스태거, 이징, 회전, 평탄화, 선 폭, 색상, 후광 강도 및 반경, 지속 시간을 제공합니다. 초기 요청이 내장 도형 이름을 지정하더라도 기본적으로 도형 선택과 SVG 가져오기를 모두 포함합니다. 사용자가 미리보기 범위를 명시적으로 좁히는 경우에만 둘 중 하나를 생략합니다. 가져오기는 윤곽선 준비 규칙을 사용하여 실제 기하학을 로드하고 애니메이션화해야 하며, 플레이스홀더 컨트롤이 아니어야 합니다. 이징 옵션은 다각형/사용자 지정 레시피에 적용됩니다. 원의 원래 타이밍은 유지합니다. 컨트롤을 내보낸 합성 외부에 유지합니다.

도형을 선택하면 팔레트와 출력 설정을 유지하면서 조정된 모션 설정이 로드됩니다. 재설정을 누르면 초기 장면과 가져온 기하학이 복원됩니다. 컨트롤을 변경해도 기존 비디오가 사후에 업데이트되지는 않습니다. 설정을 저장하고 다시 내보냅니다.

웹 미리보기에서 동작 감소(reduced-motion) 기본 설정을 존중하여 대표적인 정적 포즈와 명시적인 재생 컨트롤을 제공합니다. 오프라인 내보내기는 여전히 정확한 프레임 시간으로 완전한 애니메이션을 렌더링합니다:

t = frameIndex / fps
frameIndex = 0 ... round(D*fps)-1

중복된 종료 프레임을 추가하지 않습니다. 진정한 MP4로 인코딩하고, 이름만 바뀐 다른 형식이 아니어야 합니다. 기본적으로 불투명한 배경을 사용합니다. 요청된 투명도를 사용 가능한 인코더가 지원하지 않는 경우 적절한 대체 형식을 결정합니다.

7. 확인 및 전달

전달 전에 관찰 가능한 동작을 확인합니다:

• 실루엣, 내부 윤곽선 및 분리된 조각이 보존됩니다. 선택한 피벗을 기준으로 120° 회전된 삼각형은 변환 없이 시작 윤곽선과 일치합니다.
• 가장 복잡한 교차점도 읽을 수 있습니다. 선은 부드럽고 일정한 폭을 유지하며 잘린 후광이 없습니다.
• 진입, 최고 속도 및 안정화가 정상 재생 속도에서 의도적으로 느껴집니다. 루프에 점프, 섬광 또는 불필요한 역회전이 없습니다.
• 동일한 시간으로 스크러빙하면 동일한 프레임이 재현됩니다. 컨트롤이 작동하고 재설정을 누르면 초기 장면이 복원됩니다. 대칭 호환 각도와 호환되지 않는 각도(예: 삼각형 120° 및 80°)를 모두 테스트합니다. 두 루프 모두 스냅 없이 닫힙니다.
• SVG 가져오기는 여러 윤곽선이 포함된 샘플을 로드하고, 재생 및 저장된 설정을 통해 이를 보존하며, 내보내기에 가져온 기하학을 사용합니다. 지원되지 않는 기능이 있으면 조용히 버리지 않고 보고합니다.
• 내보낸 비디오는 디코딩되며 선택한 미리보기 해상도, 지속 시간, 프레임 레이트, 팔레트 및 모션과 일치합니다. 미리보기뿐만 아니라 디코딩된 프레임도 검사합니다.

개선 요청의 경우 유용할 때 동기화된 비교를 제공합니다. 실시간 미리보기, 재생 가능한 비디오 및 편집 가능한 소스를 설정 및 완료되지 않은 검사에 대한 간단한 설명과 함께 제공합니다. 실제로 수행된 검증만 보고합니다.