1. 소개
이 섹션은 규범적이지 않습니다.
어떤 값의 변화 속도를 제어하는 것은 종종 바람직합니다. 예를 들어, 요소가 움직이는 속도를 점진적으로 증가시키면 요소가 관성을 갖는 것처럼 보이게 할 수 있습니다. 이는 직관적인 사용자 인터페이스 요소나 실제 물체처럼 동작하는 만화 소품을 구현하는 데 사용할 수 있습니다. 반대로, 애니메이션이 분할된 바퀴처럼 항상 같은 위치에 세그먼트가 나타나도록 뚜렷한 단계로 이동하는 것이 바람직할 때도 있습니다.
마찬가지로, 그라디언트 보간의 변화 속도를 제어하면 오목 또는 볼록한 표면을 암시하거나 줄무늬 효과 등 다양한 시각적 효과를 생성할 수 있습니다.
이징 함수는 입력 진행 값을 받아서 해당 변환된 출력 진행 값을 생성하는 방법을 제공합니다.
입력 진행 값이 0.7일 때, 이징 함수는 값을 스케일링하여 출력 진행 값 0.52를 생성합니다.
이 이징 함수를 애니메이션에 적용하면 처음에는 천천히 진행되고 점차 빠르게 진행됩니다.
1.1. 값 정의
이 명세서는 값 정의 구문을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에서 정의하지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합에 따라 이러한 값 타입의 정의가 확장될 수 있습니다.
2. 이징 함수
이징 함수는 입력 진행 값을 받아 출력 진행 값을 생성합니다.
이징 함수는 반드시 순수 함수여야 하며, 동일한 입력 세트에 대해 항상 동일한 출력 진행 값을 반환해야 합니다.
입력 진행 값은 실수이며, 범위는 [-∞, ∞]입니다. 보통 입력 진행 값은 [0, 1] 범위에 있지만, 이징 함수가 연결될 때는 그렇지 않을 수 있습니다.
이징 함수가 함께 연결되는 예는 Web Animations [WEB-ANIMATIONS]에서 발생합니다. 애니메이션 효과에 지정된 이징 함수의 출력이 키프레임 효과의 키프레임에 지정된 이징 함수의 입력이 될 수 있습니다. 이 경우, 키프레임 효과에 적용되는 이징 함수의 입력이 [0, 1] 범위를 벗어날 수 있습니다.
출력 진행 값은 실수이며, 범위는 [-∞, ∞]입니다.
일부 이징 함수 타입은 추가로 boolean before flag 입력을 받으며, 이는 이후에 정의됩니다.
이 명세서는 네 가지 이징 함수 타입을 정의하며, 그 정의는 다음과 같습니다.
이징 함수를 지정하는 문법은 다음과 같습니다:
2.1. 선형 이징 함수: linear
선형 이징 함수는 항등 함수로, 모든 입력에 대해 출력 진행 값이 입력 진행 값과 같습니다.
선형 이징 함수의 문법은 linear 키워드입니다.
2.2. 큐빅 베지어 이징 함수: ease, ease-in, ease-out, ease-in-out, cubic-bezier()
큐빅 베지어 이징 함수는 이징 함수의 한 종류로, 네 개의 실수로 정의되며, 이는 큐빅 베지어 곡선의 두 컨트롤 포인트 P1과 P2를 지정합니다. 끝점 P0와 P3는 각각 (0, 0)과 (1, 1)로 고정됩니다. P1과 P2의 x 좌표는 [0, 1] 범위로 제한됩니다.
곡선의 형태는 컨트롤 포인트 P1과 P2의 위치에 따라 결정됩니다.
입력 진행 값은 곡선의 x 값으로 사용되고, y 값은 출력 진행 값이 됩니다.
큐빅 베지어 이징 함수의 문법은 다음과 같습니다 ([CSS-VALUES-3]의 표기법 사용):
각 값의 의미는 다음과 같습니다:
- ease
-
cubic-bezier(0.25, 0.1, 0.25, 1)과 동일합니다.
- ease-in
-
cubic-bezier(0.42, 0, 1, 1)과 동일합니다.
- ease-out
-
cubic-bezier(0, 0, 0.58, 1)과 동일합니다.
- ease-in-out
-
cubic-bezier(0.42, 0, 0.58, 1)과 동일합니다.
-
- cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
-
큐빅 베지어 이징 함수를 지정합니다. 네 개의 숫자는 곡선의 P1과 P2를 (x1, y1, x2, y2)로 지정합니다. 두 x 값은 반드시 [0, 1] 범위여야 하며, 그렇지 않으면 정의가 유효하지 않습니다.
위에 나열된 키워드 값은 아래 그림과 같이 나타납니다.
2.2.1. 큐빅 베지어 이징 함수의 출력
입력 진행 값에서 출력 진행 값으로의 매핑은 주어진 x 값(입력 진행 값)에 대응하는 y 값(출력 진행 값)을 결정하여 수행됩니다. 이 곡선의 평가는 [FUND-COMP-GRAPHICS] 등 다양한 자료에서 다룹니다.
입력 진행 값이 [0, 1] 범위를 벗어날 경우, 곡선은 가장 가까운 끝점의 접선을 따라 무한히 확장됩니다. 방법은 다음과 같습니다:
2.3. 스텝 이징 함수: step-start, step-end, steps()
스텝 이징 함수는 이징 함수의 한 종류로, 입력 시간을 지정된 수의 동일한 길이의 구간으로 나눕니다. steps와 step position으로 정의됩니다. 문법은 다음과 같습니다:
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
각 값의 의미는 다음과 같습니다:
- step-start
-
steps(1, start)로 계산됩니다.
- step-end
-
steps(1, end)로 계산됩니다.
스텝 이징 함수 키워드 값 예시. - steps(<integer>[, <step-position> ]?)
-
첫 번째 매개변수는 함수의 구간 수를 지정합니다. jump-none이 두 번째 매개변수일 경우 1보다 큰 양의 정수여야 하며, 그렇지 않으면 0보다 큰 양의 정수여야 합니다.
두 번째 매개변수(선택)는 아래 값 중 하나로 step position을 지정합니다:
- jump-start
-
첫 번째 상승은 input progress value가 0일 때 발생합니다.
- jump-end
-
마지막 상승은 input progress value가 1일 때 발생합니다.
- jump-none
-
모든 상승이 (0, 1) 범위 내에서 발생합니다.
- jump-both
-
첫 번째 상승은 input progress value가 0일 때, 마지막 상승은 input progress value가 1일 때 발생합니다.
- start
-
jump-start와 동일하게 동작합니다.
- end
-
jump-end와 동일하게 동작합니다.
두 번째 매개변수가 생략되면 end 값으로 간주합니다.
이 값들은 아래 그림으로 설명됩니다:
스텝 이징 함수 예시.
2.3.1. 스텝 이징 함수의 출력
스텝이 발생하는 정확한 지점에서 함수의 결과는 개념적으로 스텝의 상단입니다. 그러나 before flag를 스텝 이징 함수의 입력으로 true로 전달하면 함수 결과는 그 지점에서 스텝의 하단을 나타내게 됩니다.
before flag가 이 함수의 동작에 어떤 영향을 주는지 예로, 스텝 이징 함수의 step position이 start이고, 양의 지연과 backwards fill이 있을 때를 생각해봅시다.
예를 들어 CSS 애니메이션에서:
animation : moveRight5 s 1 s steps ( 5 , start);
지연 단계 동안 input progress value는 0이지만, before flag가 애니메이션이 아직 애니메이션 구간에 도달하지 않았음을 나타내면, 이징 함수는 output progress value로 0(즉, 첫 번째 스텝의 아래쪽)을 반환합니다.
애니메이션 구간이 시작되는 정확한 순간에 input progress value는 여전히 0이지만, before flag는 설정되지 않으므로 이징 함수의 결과는 첫 번째 스텝의 상단을 나타냅니다.
output progress value 계산에서는 step position start는 jump-start와 동일하게 취급됩니다. end 역시 jump-end와 동일하게 취급됩니다. 따라서 아래 알고리즘에서는 start 또는 end를 명시적으로 참조하지 않습니다.
참고: 사용자 에이전트는 직렬화 목적(§ 2.4 직렬화 참조)에서 jump-start와 start를 구분해야 합니다.
output progress value는 input progress value와 before flag로 다음과 같이 계산됩니다:
-
current step을
floor(input progress value × steps)로 계산합니다. -
step position이 아래 중 하나일 경우:
current step을 1 증가시킵니다.
-
아래 두 조건이 모두 true이면:
-
before flag가 설정됨 그리고
-
input progress value × steps mod 1이 0임 (즉, input progress value × steps가 정수이면)
current step을 1 감소시킵니다.
-
-
input progress value ≥ 0이고 current step < 0이면, current step을 0으로 합니다.
-
step position에 따라 jumps를 아래와 같이 계산합니다:
-
input progress value ≤ 1이고 current step > jumps이면, current step을 jumps로 합니다.
이 절차의 4, 6번 단계는 input progress value가 [0, 1] 범위일 때, 스텝 이징 함수가 그 범위를 벗어나는 output progress value를 생성하지 않도록 보장합니다.
예를 들어, 수학적으로는 step position이 jump-start인 스텝 이징 함수가 input progress value가 1일 때 1을 넘어간다고 예상할 수 있지만, 실제로는 그런 이징 함수를 앞으로 채워지는 애니메이션에 적용하면 output progress value가 1이 되기를 기대합니다.
지연 단계에서 step position이 jump-end인 스텝 이징 함수도 마찬가지입니다.
-
output progress value는
current step / jumps입니다.
2.4. 직렬화
이징 함수는 [CSSOM]에서 정의된 일반 직렬화 패턴을 따르며, 아래와 같은 추가 요구 사항이 있습니다:
-
ease, linear, ease-in, ease-out, ease-in-out 키워드 값들은 직렬화 시 변환하지 않고 그대로 사용됩니다. 즉, cubic-bezier() 함수로 변환하지 않습니다.
-
스텝 이징 함수는 steps() 함수 또는 step-start, step-end 키워드로 지정해도 다음과 같이 직렬화합니다:
-
step position이 jump-end 또는 end일 경우, steps(<integer>)로 직렬화합니다.
-
그 외에는 steps(<integer>, <step-position>)로 직렬화합니다.
-
3. 프라이버시 및 보안 고려사항
이 명세는 웹 플랫폼에 새로운 기능을 직접적으로 도입하지 않고, 다른 명세에서 참조할 수 있는 공통 정의만 제공합니다. 따라서 새로운 프라이버시 또는 보안 문제를 도입하지 않습니다.
이 명세에서 정의된 기능을 참조하는 명세는, 이징 함수가 일반적으로 input progress value로 [0, 1] 범위를 사용하고 output progress value도 [0, 1] 범위를 반환하지만, 항상 그런 것은 아님을 고려해야 합니다. 이징 함수의 활용에서는 입력 및 출력이 이 범위를 벗어날 때의 동작을 정의하여 새로운 보안 문제를 도입하지 않도록 해야 합니다.
4. 변경 사항
다음은 2019년 4월 30일 후보 권고안 이후의 변경 사항입니다:
-
cubic-bezier() 문법 정의에 CSS 괄호 범위 표기법을 사용해 범위 제한을 명시함. (편집상 변경)
-
이징 함수 연결 예시 추가. (편집상 변경)
5. 감사의 글
이 명세는 L. David Baron, Dean Jackson, David Hyatt, Chris Marrin이 편집한 CSS Transitions 명세를 기반으로 작성되었습니다. 편집자들은 Douglas Stockwell, Steve Block, Tab Atkins, Rachel Nabors, Martin Pitt, 그리고 Animation at Work 슬랙 커뮤니티의 피드백과 기여에 감사드립니다.