Skip to content

Commit d4a3b16

Browse files
[용어통일] 제어점 --> 조절점(control point)
- 베지어 곡선에 사용되는 점
1 parent 57a2cf6 commit d4a3b16

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

7-animation/2-css-animations/article.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,13 @@ timing 함수를 사용하면 시간에 따라 애니메이션 효과를 어떻
137137

138138
### 베지어 곡선
139139

140-
timing 함수에는 아래 조건을 만족하는 4개의 제어점을 가진 [베지어 곡선](/bezier-curve)을 설정할 수 있습니다.
140+
timing 함수에는 아래 조건을 만족하는 4개의 조절점을 가진 [베지어 곡선](/bezier-curve)을 설정할 수 있습니다.
141141

142-
1. 첫번째 제어점: `(0,0)`
143-
2. 마지막 제어점: `(1,1)`
144-
3. 중간 제어점들의 `x`값은 `0..1` 사이에 있어야 합니다. 반면 `y`값엔 제약이 없습니다.
142+
1. 첫번째 조절점: `(0,0)`
143+
2. 마지막 조절점: `(1,1)`
144+
3. 중간 조절점들의 `x`값은 `0..1` 사이에 있어야 합니다. 반면 `y`값엔 제약이 없습니다.
145145

146-
CSS에선 베지어 곡선을 `cubic-bezier(x2, y2, x3, y3)`형태로 정의합니다. 규칙에 따라 첫 번째 제어점은 `(0,0)`, 네 번째 제어점은 `(1,1)`로 고정되므로 우리는 두 번째와 세 번째 제어점만 설정하면 됩니다.
146+
CSS에선 베지어 곡선을 `cubic-bezier(x2, y2, x3, y3)`형태로 정의합니다. 규칙에 따라 첫 번째 조절점은 `(0,0)`, 네 번째 조절점은 `(1,1)`로 고정되므로 우리는 두 번째와 세 번째 조절점만 설정하면 됩니다.
147147

148148
timing 함수엔 시간이 지남에 따라 얼마나 빠르게 애니메이션 효과가 나타나게 할지를 설정합니다.
149149

@@ -223,7 +223,7 @@ CSS:
223223

224224
**베지어 곡선으로 애니메이션의 범위를 '뛰어 넘게' 할 수 있습니다.**
225225

226-
베지어 곡선에서 제어점의 `y` 좌표는 음수 또는 큰 값까지 가질 수 있습니다. 음수 또는 큰 값을 가지면 베지어 곡선도 매우 낮거나 높게 그려지면서, 애니메이션이 정상 범위를 벗어나게 됩니다.
226+
베지어 곡선에서 조절점의 `y` 좌표는 음수 또는 큰 값까지 가질 수 있습니다. 음수 또는 큰 값을 가지면 베지어 곡선도 매우 낮거나 높게 그려지면서, 애니메이션이 정상 범위를 벗어나게 됩니다.
227227

228228
아래 예시의 애니메이션 코드는 다음과 같습니다.
229229
```css
@@ -248,7 +248,7 @@ CSS:
248248

249249
![](bezier-train-over.svg)
250250

251-
두 번째 제어점의 `y` 좌표를 0 아래로 이동시키고 세 번째 제어점은 `1`이 넘게 이동시켜서, 곡선이 '일반' 사분면을 벗어나게 되었습니다. `y` 좌표는 '정상' 범위인 `0..1`을 벗어났죠.
251+
두 번째 조절점의 `y` 좌표를 0 아래로 이동시키고 세 번째 조절점은 `1`이 넘게 이동시켜서, 곡선이 '일반' 사분면을 벗어나게 되었습니다. `y` 좌표는 '정상' 범위인 `0..1`을 벗어났죠.
252252

253253
아시다시피, `y` 좌표는 '애니메이션 프로세스의 완성'을 나타냅니다. `y = 0`인 값은 프로퍼티가 시작하는 값을, `y = 1`인 값은 끝나는 값을 의미합니다. 그래서 `y<0` 값은 시작하는 `left`보다 낮은 프로퍼티를 움직이고, `y>1` 값은 끝나는 `left`를 넘는 프로퍼티를 움직입니다.
254254

0 commit comments

Comments
 (0)