제너레이터
This content is for v0.4. Switch to the latest version for up-to-date documentation.
제너레이터는 디코딩할 미디어 없이 엔진이 기술을 보고 직접 그리는 그림입니다. 색이나 그라디언트, 셰이프 레이어, 텍스트, 레이아웃이 있습니다. 이 페이지는 앞의 세 가지를 다루고, 네 번째는 레이아웃에서 다룹니다. 다 읽고 나면 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. - 모양:
color(기본값 흰색),outline(글리프 둘레의 띠.width는 폰트 크기에 대한 비율이며 최대 0.5),background(각 줄 뒤의 상자.padding은 폰트 크기에 대한 비율).
텍스트는 문자열이며 \n이 줄을 바꿉니다.
텍스트 움직이기
섹션 제목: “텍스트 움직이기”텍스트 그림은 정지해 있습니다. 움직이려면 그 그림을 보여 주는 클립을 애니메이션합니다. 클립 visual의 opacity, position, scale, rotation_degrees는 다른 클립과 똑같이 키프레임을 받고, 이펙트와 마스크도 다른 그림처럼 적용됩니다. 다음 예에서는 클립이 제목을 페이드 인하면서 제자리로 올려 보냅니다.
{ "id": "text-clip", "source_id": "headline", "timeline_range": { "start": 0, "end": 360000 }, "source_range": { "start": 0, "end": 360000 }, "visual": { "opacity": { "mode": "keyframes", "keyframes": [ { "time": 0, "value": 0, "interpolation": { "type": "linear" } }, { "time": 120000, "value": 1, "interpolation": { "type": "hold" } } ] }, "position": { "mode": "keyframes", "keyframes": [ { "time": 0, "value": { "x": 0.5, "y": 0.55 }, "interpolation": { "type": "cubic_bezier", "x1": 0.2, "y1": 0, "x2": 0, "y2": 1 } }, { "time": 120000, "value": { "x": 0.5, "y": 0.5 }, "interpolation": { "type": "hold" } } ] } }}소스는 { "type": "text", "text": "A title from JSON alone" }이고, font_family, 0.09의 font_size, 가운데에 놓인 position과 anchor를 씁니다.