CSS 이징 함수 2단계

1. 소개

이 섹션은 규범적인 내용이 아닙니다.

어떤 값이 변화하는 속도를 제어하는 것이 바람직한 경우가 많습니다. 예를 들어, 요소가 움직이는 속도를 점차 증가시키면 해당 요소가 모멘텀을 얻는 것처럼 무게감을 줄 수 있습니다. 이는 직관적인 사용자 인터페이스 요소를 만들거나 물리적 실체처럼 동작하는 만화 소품을 설득력 있게 구현할 때 사용할 수 있습니다. 반대로, 애니메이션이 분할된 휠처럼 항상 특정 위치에 세그먼트가 나타나도록 명확한 단계로 앞으로 이동하는 것이 바람직할 때도 있습니다.

이와 같이 그라데이션 보간의 변화율을 제어하면 오목하거나 볼록한 표면을 암시하거나, 줄무늬 효과를 내는 등 다양한 시각적 효과를 만들 수 있습니다.

이징 함수는 입력 진행 값을 받아서 이에 대응하는 변환된 출력 진행 값을 만들어내는 방식으로 이러한 값을 변환할 수 있는 방법을 제공합니다.

1.1. 값 정의

이 명세서는 값 정의 구문을 [CSS-VALUES-3]에서 사용합니다. 이 명세서에서 정의되지 않은 값 타입은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

2. 이징 함수

이징 함수는 입력 진행 값을 받아서 출력 진행 값을 생성합니다.

이징 함수는 반드시 순수 함수여야 하며, 동일한 입력값 세트에 대해 항상 동일한 출력 진행 값을 반환해야 합니다.

입력 진행 값은 [-∞, ∞] 범위의 실수입니다. 일반적으로 입력 진행 값은 [0, 1] 범위이지만, 이징 함수를 연쇄적으로 사용할 때는 그렇지 않을 수 있습니다.

출력 진행 값은 [-∞, ∞] 범위의 실수입니다.

일부 이징 함수 유형은 추가적으로 불리언 before flag 입력을 받기도 하며, 이는 이후에 정의됩니다.

이 명세는 네 가지 유형의 이징 함수를 정의하며, 그 정의는 아래에 이어집니다.

이징 함수를 지정하는 구문은 다음과 같습니다:

2.1. 선형 이징 함수: linear()

선형 이징 함수는 이징 함수로서, points 사이를 선형적으로 보간합니다.

선형 이징 함수는 points, list 형태의 선형 이징 포인트를 가집니다. 처음에는 새로운 빈 list입니다.

선형 이징 포인트는 struct로 다음을 가집니다:

input

숫자 또는 null

참고: 이 값은 선형 이징 함수를 생성하는 동안에만 null입니다.

output

숫자

2.1.1. 구문

선형 이징 함수의 구문은 다음과 같습니다:

<linear-easing-function> = linear(<linear-stop-list>)
<linear-stop-list> = [ <linear-stop> ]#
<linear-stop> = <number> && <linear-stop-length>?
<linear-stop-length> = <percentage>{1,2}

linear()는 선형 이징 함수로 파싱되며, 선형 이징 함수를 생성하는 과정에서 <linear-stop-list>가 list 형태의 <linear-stop>들로 전달됩니다.

2.1.2. 파싱

2.1.3. 직렬화

2.1.4. 선형 이징 함수의 출력

2.1.5. 예시

linear()는 여러 포인트들 사이를 선형적으로 보간하는 이징 함수를 정의할 수 있습니다.

예를 들어, linear(0, 0.25, 1)은 0에서 0.25, 그리고 1까지 선형적으로 이동하는 이징 함수를 만듭니다:

기본적으로 "input"이 명시되지 않은 항목들 사이 값은 균등하게 분배됩니다. 입력값은 <percentage>로 지정할 수 있습니다.

예를 들어, linear(0, 0.25 75%, 1)은 다음과 같은 이징 함수를 생성합니다. 전체 시간의 75%를 0에서 .25로, 마지막 25%를 .25에서 1로 변화합니다:

하나의 출력에 두 개의 입력값이 지정되면, 동일한 출력값을 가진 두 포인트가 생성됩니다.

예를 들어, linear(0, 0.25 25% 75%, 1)은 linear(0, 0.25 25%, 0.25 75%, 1)과 동등하며, 다음과 같은 이징 함수를 만듭니다:

입력이 제공된 범위를 벗어나면, 가장 가까운 두 포인트의 궤적이 계속 이어집니다.

예를 들어, 아래는 이전 함수의 암시적 값들입니다:

linear()의 대표적인 사용 예는 많은 포인트를 지정하여 곡선 효과를 내는 것입니다.

예를 들어, linear()를 사용해서 재사용 가능한 "bounce" 이징 함수를 만들 수 있습니다:

:root {
  --bounce: linear(
    /* 시작부터 1차 바운스까지 */
    0, 0.063, 0.25, 0.563, 1 36.4%,
    /* 1차 바운스부터 2차 바운스까지 */
    0.812, 0.75, 0.813, 1 72.7%,
    /* 2차 바운스부터 3차 바운스까지 */
    0.953, 0.938, 0.953, 1 90.9%,
    /* 3차 바운스부터 끝까지 */
    0.984, 1 100% 100%
  );
}

.example {
  animation-timing-function: var(--bounce);
}

정의 끝에 1 100% 100%로 두 개의 최종 포인트를 만들어, 입력이 1보다 크더라도 항상 출력값이 1이 됩니다.

더 느린 애니메이션에서는 더 부드러운 결과를 위해 포인트를 더 많이 추가할 수 있습니다.

2.2. 선형 이징 키워드: linear

linear 키워드는 정체 선형 이징 함수를 생성하며, 출력 진행 값이 모든 입력에 대해 입력 진행 값과 동일합니다.

이는 linear(0, 1)과 동일한 결과를 냅니다.

참고: 이것은 선형 이징 함수를 생성하지만, linear 키워드 사용 시에는 항상 linear로 직렬화됩니다. 반면 함수형 linear(0, 1)은 linear(0 0%, 1 100%)로 직렬화됩니다. 이 규칙은 직렬화에 정의되어 있습니다.

2.3. 큐빅 베지어 이징 함수: ease, ease-in, ease-out, ease-in-out, cubic-bezier()

큐빅 베지어 이징 함수는 네 개의 실수로 정의되는 이징 함수의 한 종류이며, 이 네 개의 값은 큐빅 베지어 곡선의 두 제어점 P1과 P2를 지정합니다. 곡선의 시작점 P0와 끝점 P3는 각각 (0, 0)과 (1, 1)으로 고정되어 있습니다. P1과 P2의 x 좌표는 [0, 1] 범위로 제한됩니다.

큐빅 베지어 이징 함수의 구문은 다음과 같습니다 ([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.3.1. 큐빅 베지어 이징 함수의 출력

입력 진행 값에서 출력 진행 값으로의 매핑은 주어진 x 값(input progress value)에 대한 대응 y 값(output progress value)을 결정하는 방식으로 수행됩니다. 이 곡선의 계산은 [FUND-COMP-GRAPHICS] 등 다양한 문헌에서 다룹니다.

input progress value가 [0, 1] 범위를 벗어나면, 가장 가까운 끝점의 접선 방향으로 곡선이 무한히 연장됩니다. 방법은 다음과 같습니다:

• input progress value가 0보다 작을 때,

  1. P1의 x 값이 0보다 크면, P1과 P0을 지나는 직선을 접선으로 사용합니다.

  2. 그렇지 않고 P2의 x 값이 0보다 크면, P2와 P0을 지나는 직선을 접선으로 사용합니다.

  3. 둘 다 아니라면, [-∞, 0) 구간의 모든 input progress value에 대해 output progress value는 0입니다.

• input progress value가 1보다 클 때,

  1. P2의 x 값이 1보다 작으면, P2와 P3을 지나는 직선을 접선으로 사용합니다.

  2. 그렇지 않고 P1의 x 값이 1보다 작으면, P1과 P3을 지나는 직선을 접선으로 사용합니다.

  3. 둘 다 아니라면, (1, ∞] 구간의 모든 input progress value에 대해 output progress value는 1입니다.

2.4. 스텝 이징 함수: step-start, step-end, steps()

스텝 이징 함수는 입력 시간을 지정한 개수의 동일 길이 구간으로 나누는 이징 함수의 한 종류입니다. steps 개수와 step position으로 정의됩니다. 구문은 다음과 같습니다:

각 값의 의미는 아래와 같습니다:

step-start

steps(1, start)로 계산됩니다.

step-end

steps(1, end)로 계산됩니다.

steps(<integer>, <step-position>?)

첫 번째 매개변수는 함수의 구간 수를 지정합니다. 0보다 큰 양의 정수여야 하며, 두 번째 매개변수가 jump-none인 경우에는 1보다 큰 양의 정수여야 합니다.

두 번째 매개변수(선택사항)는 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.4.1. 스텝 이징 함수의 출력

스텝이 발생하는 정확한 지점에서 함수 결과는 개념적으로 스텝의 상단입니다. 그러나 before flag가 step easing function의 입력값으로 true로 전달되면, 결과는 해당 지점에서 스텝의 하단이 됩니다.

animation: moveRight 5s 1s steps(5, start);

output progress value를 계산할 때, step position start는 jump-start와 동일하게 간주됩니다. 마찬가지로 end는 jump-end와 동일하게 간주됩니다. 따라서 아래 알고리즘에서는 start나 end를 명시적으로 참조하지 않습니다.

참고: 사용자 에이전트는 직렬화 목적(see § 2.5 직렬화)에서 jump-start와 start를 구분해야 합니다.

output progress value는 input progress value와 before flag를 아래와 같이 계산합니다:

1. current step을 floor(input progress value × steps) 로 계산합니다.

2. step position 속성이 다음 중 하나라면:

   • jump-start,

   • jump-both,

   current step을 1 증가시킵니다.

3. 다음 두 조건이 모두 true라면:

   • before flag가 설정되어 있고, 그리고

   • input progress value × steps mod 1이 0이면 (즉, input progress value × steps가 정수이면),

   current step을 1 감소시킵니다.

4. input progress value ≥ 0 이고 current step < 0이면, current step을 0으로 합니다.

5. step position에 따라 jumps를 다음과 같이 계산합니다:

   jump-start 또는 jump-end

   steps

   jump-none

   steps - 1

   jump-both

   steps + 1

6. 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인 스텝 이징 함수도 애니메이션 delay 단계에서 같은 상황이 발생합니다.

7. output progress value는 current step / jumps입니다.

2.5. 직렬화

이징 함수는 [CSSOM]에 정의된 공통 직렬화 패턴을 사용하며, 다음의 추가 요구 사항이 있습니다:

• ease, linear, ease-in, ease-out, ease-in-out 키워드 값은 변환하지 않고 그대로 직렬화됩니다. 즉, 이 값들은 cubic-bezier() 또는 linear() 함수로 변환하지 않고 직렬화합니다.

• 스텝 이징 함수는 steps() 함수 또는 step-start, step-end 키워드로 지정하더라도 아래와 같이 직렬화합니다:

  1. step position이 jump-end 또는 end인 경우, steps(<integer>)로 직렬화합니다.

  2. 그 외의 경우, steps(<integer>, <step-position>)로 직렬화합니다.

• linear easing function은 linear()로 생성된 경우 직렬화된 계산 값을 얻어 직렬화합니다.

프라이버시 고려사항

이 명세에 대해 새롭게 보고된 프라이버시 고려사항은 없습니다.

이 명세는 웹 플랫폼에 새로운 기능을 직접 도입하는 것이 아니라, 다른 명세에서 참조할 수 있는 공통 정의를 제공합니다.

보안 고려사항

이 명세에서 정의된 기능을 참조하는 명세는, 이징 함수가 일반적으로 input progress value [0,1] 범위의 값을 받아 output progress value [0, 1] 범위의 값을 생성하지만, 항상 그런 것은 아니라는 점을 고려해야 합니다. 이징 함수의 응용에서는 입력과 출력이 이 범위 바깥일 때의 동작을 정의하여 새로운 보안 고려사항이 발생하지 않도록 해야 합니다.

3. 변경 사항

3.1. 1단계 이후 추가사항

• linear() 함수가 추가되었습니다.

4. 감사의 글

이 명세는 L. David Baron, Dean Jackson, David Hyatt, Chris Marrin이 편집한 CSS Transitions 명세를 기반으로 하였습니다. 편집자들은 Douglas Stockwell, Steve Block, Tab Atkins, Rachel Nabors, Martin Pitt, 그리고 Animation at Work 슬랙 커뮤니티의 피드백과 기여에도 감사를 표합니다.