제너레이터
제너레이터는 디코딩할 미디어 없이 엔진이 기술을 보고 직접 그리는 그림입니다. 색이나 그라디언트, 셰이프 레이어, 텍스트, 레이아웃이 있습니다. 이 페이지는 앞의 세 가지를 다루고, 네 번째는 레이아웃에서 다룹니다. 다 읽고 나면 JSON만으로 배경, 모션 그래픽, 타이틀을 만들 수 있습니다.
제너레이터를 쓰는 곳
섹션 제목: “제너레이터를 쓰는 곳”Generator는 세 곳에 나타납니다.
"kind": "generated"인 소스의generator. 클립이 다른 소스처럼 보여 줍니다.- 컴포지션의
generator노드. - 제너레이터 소스를 가리키는 컴포지션의
media노드.
생성된 그림은 캔버스와 크기가 같습니다. 위치는 비율로, (0, 0)이 왼쪽 위, (1, 1)이 오른쪽 아래입니다. 길이는 캔버스 짧은 변에 대한 비율이므로, 어떤 렌더링 해상도에서도 같은 그림이 나옵니다.
채우기는 시간에 따라 바뀌지 않습니다. 텍스트는 애니메이터를 통해서만 바뀝니다. 셰이프와 레이아웃은 어떤 값이든 애니메이션할 수 있으며, 픽처 시간, 즉 클립이 고른 소스 시간으로 키프레임합니다(애니메이션 참고).
채우기와 페인트
섹션 제목: “채우기와 페인트”{ "type": "fill", "paint": ... }는 그림 전체를 Paint로 덮습니다.
| 페인트 | 필드 |
|---|---|
solid |
color |
linear_gradient |
start, end, stops, spread(pad, repeat, reflect) |
radial_gradient |
center, radius(짧은 변에 대한 비율), stops, spread |
conic_gradient |
center, angle_degrees(오프셋 0의 위치. 정위쪽에서 시계 방향 각도), stops |
그라디언트에는 정지점(stop)이 2개에서 8개까지 있고, 각 정지점은 0..1 범위의 offset과 color로 이루어집니다. 그라디언트는 premultiplied 정지점을 선형 광(linear light)에서 보간합니다. 그래서 두 색 사이의 그라디언트는 두 색의 물리적인 혼합을 지나가고, 투명해지는 정지점이 이웃 색을 어둡게 만들지 않습니다. 페인트를 읽는 곳에서는 색 하나만 써도 단색 페인트로 읽힙니다.
이 프로젝트는 네 가지 페인트를 1초씩 차례로 보여 줍니다.
[ { "id": "solid", "kind": "generated", "generator": { "type": "fill", "paint": { "type": "solid", "color": { "red": 0.17, "green": 0.36, "blue": 0.99, "alpha": 1 } } } }, { "id": "linear", "kind": "generated", "generator": { "type": "fill", "paint": { "type": "linear_gradient", "start": { "x": 0, "y": 0.5 }, "end": { "x": 1, "y": 0.5 }, "stops": [ { "offset": 0, "color": { "red": 0.98, "green": 0.45, "blue": 0.1, "alpha": 1 } }, { "offset": 1, "color": { "red": 0.17, "green": 0.36, "blue": 0.99, "alpha": 1 } } ] } } }, { "id": "radial", "kind": "generated", "generator": { "type": "fill", "paint": { "type": "radial_gradient", "center": { "x": 0.5, "y": 0.5 }, "radius": 0.6, "stops": [ { "offset": 0, "color": { "red": 0.98, "green": 0.45, "blue": 0.1, "alpha": 1 } }, { "offset": 1, "color": { "red": 0.17, "green": 0.36, "blue": 0.99, "alpha": 1 } } ] } } }, { "id": "conic", "kind": "generated", "generator": { "type": "fill", "paint": { "type": "conic_gradient", "center": { "x": 0.5, "y": 0.5 }, "stops": [ { "offset": 0, "color": { "red": 0.98, "green": 0.45, "blue": 0.1, "alpha": 1 } }, { "offset": 0.5, "color": { "red": 0.17, "green": 0.36, "blue": 0.99, "alpha": 1 } }, { "offset": 1, "color": { "red": 0.98, "green": 0.45, "blue": 0.1, "alpha": 1 } } ] } } }]셰이프
섹션 제목: “셰이프”{ "type": "shapes", "items": [...] }는 After Effects나 Lottie의 셰이프 레이어처럼 순서가 있는 콘텐츠 트리를 그립니다. 각 ShapeItem은 다음 중 하나입니다.
- 도형:
rectangle(corner_radius지원),ellipse,polystar(다각형 또는 별),path(베지어 서브패스). - 페인트:
fill은 같은 그룹에서 자기보다 앞에 나온 도형의 안쪽을 칠하고,stroke는 그 윤곽을 그립니다.stroke에는width,cap,join,miter_limit,dash가 있습니다. - 수정자:
trim은 앞에 나온 도형의 일부를 길이 기준으로 남깁니다.start부터end까지이며offset만큼 밀 수 있습니다. group: 하나의transform과 불투명도로 함께 그리는 항목들.
트리는 앞쪽부터 읽습니다. fill이나 stroke는 같은 그룹(중첩 그룹 포함)에서 자기보다 앞에 나온 도형을 칠하고, 앞에 나온 페인트가 뒤에 나온 페인트 위에 그려집니다.
단위는 그림을 따릅니다. center는 위치이고, size는 축마다 따로입니다(x는 너비에 대한 비율, y는 높이에 대한 비율이므로 { "x": 0.5, "y": 0.5 }는 정사각형 캔버스에서만 원이 됩니다). 반지름과 선 두께는 짧은 변에 대한 비율입니다.
이 별은 회전하면서 키프레임한 trim으로 스스로 그려집니다.
{ "type": "shapes", "items": [ { "type": "group", "items": [ { "type": "polystar", "kind": "star", "center": { "mode": "constant", "value": { "x": 0.5, "y": 0.5 } }, "points": { "mode": "constant", "value": 5 }, "outer_radius": { "mode": "constant", "value": 0.35 }, "inner_radius": { "mode": "constant", "value": 0.15 }, "rotation_degrees": { "mode": "keyframes", "keyframes": [ { "time": 0, "value": 0, "interpolation": { "type": "linear" } }, { "time": 360000, "value": 36, "interpolation": { "type": "hold" } } ] } }, { "type": "trim", "start": { "mode": "constant", "value": 0 }, "end": { "mode": "keyframes", "keyframes": [ { "time": 0, "value": 0, "interpolation": { "type": "cubic_bezier", "x1": 0.65, "y1": 0, "x2": 0.35, "y2": 1 } }, { "time": 240000, "value": 1, "interpolation": { "type": "hold" } } ] } }, { "type": "stroke", "paint": { "mode": "constant", "value": { "type": "solid", "color": { "red": 1, "green": 0.75, "blue": 0.2, "alpha": 1 } } }, "width": { "mode": "constant", "value": 0.012 }, "join": "round", "cap": "round" } ] } ]}shapes 프리셋은 키프레임한 중심을 따라 타원을 움직입니다.
텍스트
섹션 제목: “텍스트”{ "type": "text", "text": ..., "style": ... }는 투명한 그림 위에 텍스트를 그리며, 자막 큐처럼 스타일에 따라 레이아웃하고 배치합니다. TextStyle에서 정하는 것은 다음과 같습니다.
- 폰트:
font_family,font_size(캔버스 짧은 변에 대한 비율, 기본값 0.05),font_weight(1~1000. CSS가font-weight를 맞추는 방식으로 매칭),letter_spacing,line_height. - 배치:
position과anchor(position에 놓이는 텍스트의 점. 기본값은 아래쪽 가운데인(0.5, 1)),max_width(줄바꿈 너비. 캔버스 너비에 대한 비율),align. - 모양:
fill(페인트, 기본값 흰색),strokes,shadows,background(각 줄 뒤의 상자). - 움직임:
animators.
텍스트는 문자열(\n이 줄을 바꿈)이거나, 애니메이터가 클래스나 시간으로 고를 수 있는 런(run)의 목록입니다.
애니메이터
섹션 제목: “애니메이터”애니메이터는 텍스트를 다시 레이아웃하지 않고 글자를 바꿉니다. selector가 각 글자에 0에서 1 사이의 선택 정도를 주고, properties가 그 비율만큼 적용됩니다. 속성은 opacity, offset(폰트 크기 단위, +y가 아래), scale, rotation_degrees, tracking, fill과 stroke 색입니다. 선택자는 세 가지입니다.
range: 글자, 단어, 줄 단위의 범위를 퍼센트나 인덱스로 지정하며,shape(square,ramp_up,ramp_down,triangle,round,smooth)를 줄 수 있습니다. After Effects의 범위 선택자와 비슷합니다.timing: 시간이 지정된 런의 글자를, 그 시간이upcoming(아직),active(진행 중),spoken(지남) 중 어디에 해당하는지로 고릅니다(가라오케 자막 참고).class: 클래스가 붙은 런의 글자를 고릅니다.
다음 예에서는 범위 선택자의 start가 2초 동안 0%에서 100%로 움직입니다. 범위 안의 글자는 완전히 선택되어 투명하고 폰트 크기의 절반만큼 아래에 있다가, 범위가 지나가면 하나씩 제자리로 올라옵니다.
{ "type": "text", "text": "Characters arrive one by one", "style": { "font_family": "Hanken Grotesk", "font_size": 0.09, "position": { "x": 0.5, "y": 0.5 }, "anchor": { "x": 0.5, "y": 0.5 }, "animators": [ { "selector": { "type": "range", "start": { "mode": "keyframes", "keyframes": [ { "time": 0, "value": 0, "interpolation": { "type": "linear" } }, { "time": 240000, "value": 100, "interpolation": { "type": "hold" } } ] } }, "properties": { "opacity": { "mode": "constant", "value": 0 }, "offset": { "mode": "constant", "value": { "x": 0, "y": 0.5 } } } } ] }}애니메이터의 키프레임은 텍스트를 가진 쪽의 시간을 따릅니다. 텍스트 제너레이터라면 픽처 시간, 자막이라면 큐가 시작한 뒤의 시간입니다.