웹 애니메이션 모듈 레벨 2

1. 델타 명세

이 문서는 델타 명세로, 현재 Web Animations 1단계 [WEB-ANIMATIONS-1]와의 차이점만을 포함하고 있습니다. 1단계 명세가 완성 단계에 가까워지면, 여기의 추가 내용과 병합되어 완전한 2단계 명세로 작성될 예정입니다.

2. 타이밍 모델

이 절에서는 Web Animations의 타이밍 모델의 동작을 설명하고 정의합니다.

2.1. 타이밍 모델 개요

이 절은 참고용(비규범)입니다.

2.1.1. 계층 구조

이 단계의 명세에는 갱신된 타이밍 계층 구조 다이어그램이 포함되어 있습니다.

다음은 갱신된 설명입니다:

이러한 계층적 구조의 결과로, 복잡한 애니메이션 배열도 전체 단위로 되감기, 예약, 가속화 등 다양한 조작이 가능합니다. 상위 노드에 적용된 조작이 하위 노드에 연쇄적으로 내려가기 때문입니다. 또한 시간을 하나의 출처에서 비롯시키기 때문에 애니메이션들의 동기화를 쉽게 할 수 있습니다.

2.2. 타임라인

추가:

타임라인 지속시간은 타임라인이 현재 시간으로 생성할 수 있는 최대 값을 의미합니다. 이 값은 애니메이션의 대상 효과에 대해 고유 반복 지속시간을 계산할 때 사용됩니다. (효과의 반복 지속시간이 "auto"일 때) 이 값은 효과가 가용 시간 전체를 채우도록 계산됩니다. 단조로운(monotonic) 타임라인에서는 현재 시간에 상한이 없으므로 타임라인 지속시간은 결정되지 않습니다. 비단조적인(예: 스크롤) 타임라인의 경우, 지속시간은 고정 상한을 가집니다. 이때 타임라인은 진행 기반 타임라인이 되며, 타임라인 지속시간은 100%로 정해집니다.

2.3. 애니메이션 프레임

알고리즘 1단계의 주석에 다음 항목을 추가:

• 애니메이션 트리거의 상태를 애니메이션 트리거 상태 갱신 절차에 따라 갱신한다.

2.4. 애니메이션

추가:

진행 기반 타임라인과 연관된 애니메이션 효과는 타이밍 속성들을 비율로 변환해야 합니다. 로 변환하는 방법은 다음과 같습니다:

1. 반복 지속시간이 auto이면, 다음을 수행한다.

   • 시작 지연과 종료 지연을 0으로 설정한다. 시간과 비율을 혼합할 수 없기 때문이다.

     Note: 향후 버전에서는 이러한 속성에 백분율 할당이 허용될 수 있으며, 이때 값이 시간일 때만 무시되고 백분율일 때는 무시되지 않습니다.

   그 외의 경우:

   1. total time := 종료 시간

   2. 시작 지연 = specified start delay / total time * timeline duration로 계산한다.

   3. 반복 지속시간 = specified iteration duration / total time * timeline duration로 계산한다.

   4. 종료 지연 = specified end delay / total time * timeline duration로 계산한다.

명시된 타이밍을 정규화하는 절차는 다음과 같습니다:

타임라인 지속시간이 결정되면:

• 시간 기반 애니메이션을 비례 애니메이션으로 변환 절차를 따른다

그렇지 않으면:

1. 시작 지연 = specified start delay

2. 종료 지연 = specified end delay

3. 반복 지속시간이 auto이면:

   • 반복 지속시간 = 고유 반복 지속시간

   그 외의 경우:

   • 반복 지속시간 = specified iteration duration

2.4.1. 애니메이션의 타임라인 설정

애니메이션의 타임라인 설정 절차는 animation의 타임라인을 new timeline(null일 수 있음)로 지정할 때 아래 단계들을 따른다:

1. old timeline := animation의 기존 타임라인(있다면).

2. new timeline이 old timeline과 동일 객체라면, 절차 중단.

3. previous play state := animation의 재생 상태.

4. previous current time := animation의 현재 시간.

5. 아래 조건 중 먼저 해당하는 것으로 previous progress를 설정:

   이전 현재 시간이 미해결이라면:

   previous progress = 미해결로 설정.

   종료 시간이 0이면:

   previous progress = 0으로 설정.

   그 외:

   previous progress = previous current time / end time

6. old timeline이 null이 아니고 단조 증가가 아니라면 from finite timeline = true.

7. new timeline이 null이 아니고 단조 증가가 아니라면 to finite timeline = true.

8. animation의 타임라인을 new timeline으로 설정.

9. 아래 조건 중 최초로 해당하는 분기만 실행:

   to finite timeline이 true이면,

   1. 보류 중인 재생 속도 적용을 animation에 적용

   2. auto align start time을 true로 설정.

   3. 시작 시간을 미해결로 설정.

   4. 대기 시간을 미해결로 설정.

   5. 이전 재생 상태가 "finished" 또는 "running"이면

      1. 보류 중 재생 태스크 예약

   6. 이전 재생 상태가 "paused"이고 previous progress가 해결되었다면:

      1. 대기 시간 = previous progress * end time

   이 단계는, 대기-중(pause-pending) 애니메이션이 시작 시간이 해결된 상태라도 previous progress가 전환 후에도 보존됨을 보장합니다.

   from finite timeline이 true이고 previous progress가 해결된 경우,

   현재 시간 설정 절차를 실행하여 previous progress * end time으로 설정합니다.

10. animation의 시작 시간이 해결됨이면, animation의 대기 시간을 미해결로 만든다.

    이 단계는 완료 상태가 고정(sticky)되지 않고, 변경된 현재 시간에 따라 재평가되도록 보장합니다.

11. 애니메이션 완료 상태 갱신 절차를, did seek 플래그/false, synchronously notify 플래그/false로 animation에 대해 수행합니다.

2.4.2. 애니메이션의 대상 효과 설정

보류 중 재생 태스크 재예약 단계 이후에 다음을 추가:

1. new effect가 null이 아니고 new effect가 상위 그룹이 있으면, 상위 그룹에서 new effect를 제거한다.

2.4.3. 연관 효과를 기다리기

다음으로 대체:

애니메이션은 두 가지 조건이 모두 충족되는 최초의 순간에 준비됩니다:

• 사용자 에이전트가 애니메이션의 연관 효과의 재생을 시작하기 위한 모든 준비를 마쳤으며, 여기에는 모든 키프레임 효과의 첫 프레임 렌더링을 포함한다.

• 애니메이션이 타임라인에 연관되어 있고 그 타임라인이 비활성이 아닌 경우.

다음 내용으로 교체:

애니메이션은 준비됨 상태가 되는 최초의 순간에, 모든 다음 조건이 충족되어야 합니다:

• 사용자 에이전트가 애니메이션의 포함 하위 각각의 재생을 위한 모든 준비를 마쳤으며, 여기에는 모든 키프레임 효과의 첫 프레임 렌더링 또는 커스텀 효과의 실행 이 포함된다.

• 애니메이션이 타임라인에 연관되어 있고, 그 타임라인이 비활성이 아닐 때.

• 애니메이션의 대기 시간 또는 시작 시간이 해결됨.

참고: 애니메이션은 준비 완료 상태가 아니며 start time 또는 hold time이 없을 경우 그렇다. 스크롤 기반 애니메이션의 경우, auto align start time이 true이면 타임라인을 갱신할 때 시작 시간이 결정된다.

2.4.4. CSSNumberish 시간 검증

CSSNumberish 시간 유효성 검사 절차는 time 값을 입력으로 아래 순서에서 최초로 일치하는 조건에 기반하여 동작합니다:

다음 모든 조건이 참이라면:

• 해당 애니메이션이 진행 기반 타임라인과 연관되어 있으며,

• time이 percent 단위의 CSSNumeric 값이 아닌 경우:

TypeError를 throw한다.

false를 반환한다.

다음 모든 조건이 참이라면:

• 해당 애니메이션이 진행 기반 타임라인과 연관되어 있지 않으며,

• time이 CSSNumericValue이고,

• time의 단위가 지속시간 단위가 아닌 경우:

TypeError를 throw한다.

false를 반환한다.

그 외

true를 반환한다.

2.4.5. 애니메이션의 현재 시간 설정

애니메이션의 현재 시간은 새로운 값으로 설정하여 애니메이션을 이동(seek)할 수 있습니다. 현재 시간 설정 절차는 두 부분으로 정의됩니다.

애니메이션 animation의 현재 시간을 seek time으로 묵시적으로 설정하는 절차는 아래와 같습니다:

1. seek time이 미해결(unresolved) 시간값이면, 다음을 수행합니다.

   1. 현재 시간이 해결됨(resolved)이라면 TypeError를 throw한다.

   2. 이후 단계 중단.

2. valid seek time := CSSNumberish 시간 유효성 검사 절차를 seek time 입력값으로 실행한 결과.

3. valid seek time이 false라면, 이 절차를 중단한다.

4. auto align start time을 false로 설정한다.

5. 아래 조건에 따라 animation의 대기 시간(hold time) 혹은 시작 시간(start time)을 갱신한다:

   아래 중 하나라도 참인 경우:

   • animation의 대기 시간이 해결됨이거나,

   • animation의 시작 시간이 미해결이거나,

   • animation에 연관된 타임라인이 없거나 연관 타임라인이 비활성이거나,

   • animation의 재생 속도가 0인 경우,

   1. animation의 대기 시간을 seek time으로 설정한다.

   그 외,

   animation의 시작 시간을 다음을 평가한 값으로 설정한다: timeline time - (seek time / 재생 속도) 여기서 timeline time은 animation과 연관된 타임라인의 현재 시간값이다.

6. animation에 연관된 타임라인이 없거나 연관 타임라인이 비활성일 경우, animation의 시작 시간을 미해결로 만든다.

   활성 타임라인이 없을 때는 시작 시간 혹은 애니메이션의 현재 시간만 설정 가능함이 보장된다.

7. animation의 previous current time을 미해결로 만든다.

애니메이션 animation의 현재 시간을 seek time으로 설정하는 절차는 다음과 같습니다:

1. 묵시적으로 현재 시간 설정 절차를 animation에 seek time으로 실행한다.

2. animation에 보류 중 일시정지 태스크가 있으면, 아래 단계로 일시정지를 동기적으로 완료한다:

   1. animation의 대기 시간을 seek time으로 설정한다.

   2. 보류 중 재생 속도 적용 절차 실행.

   3. animation의 시작 시간을 미해결로 만든다.

   4. 보류 중 일시정지 태스크를 취소한다.

   5. Resolve animation의 current ready promise를 animation으로 해결한다.

3. 애니메이션 완료 상태 갱신 절차를, did seek 플래그 true, synchronously notify 플래그 false로 animation에 실행한다.

2.4.6. 애니메이션의 시작 시간 설정

animation animation의 시작 시간을 new start time으로 설정하는 절차는 다음과 같습니다:

1. valid start time := CSSNumberish 시간 유효성 검사 절차를 new start time으로 실행한 결과.

2. valid start time이 false라면, 절차 중단.

3. auto align start time을 false로 설정한다.

4. timeline time := animation과 연관된 타임라인의 현재 시간값.
   이때, animation에 연관된 타임라인이 없거나 비활성인 경우 timeline time을 미해결로 둔다.

5. timeline time이 미해결이고 new start time이 해결됨이면, animation의 대기 시간을 미해결로 설정한다.

   활성 타임라인이 없을 때는 시작 시간 혹은 애니메이션의 현재 시간만 설정 가능함이 보장됩니다.

6. previous current time := animation의 현재 시간.

   Note: 이는 이전 단계 변경이 반영된 현재 시간으로, 이 과정에서 현재 시간이 미해결이 될 수도 있다.

7. 보류 중 재생 속도 적용 절차를 animation에 실행한다.

8. animation의 시작 시간을 new start time으로 설정한다.

9. animation의 대기 시간은 아래 조건에 따라 처리한다:

   new start time이 해결됨이면,

   animation의 재생 속도가 0이 아니라면, animation의 대기 시간을 미해결로 만든다.

   그 외 (new start time이 미해결인 경우),

   1. animation의 대기 시간을 previous current time으로 설정 (이때 previous current time이 미해결이어도 됨).

10. animation에 보류 중 재생 태스크 또는 보류 중 일시정지 태스크가 있다면 해당 태스크를 취소하고, current ready promise를 animation으로 해결한다.

11. 애니메이션 완료 상태 갱신 절차를, did seek=true, synchronously notify=false로 animation에 대해 실행한다.

2.4.7. 애니메이션 재생

애니메이션 재생 절차는 animation과 플래그 auto-rewind가 주어졌을 때 다음과 같이 진행된다:

Note: auto-rewind 플래그는 이 모델을 기반으로 하지만 되감기 동작이 필요 없는 CSS 애니메이션 [CSS-ANIMATIONS-1] 등 다른 명세에서 사용하기 위함이다.

1. aborted pause를 불리언 플래그로 두고 animation에 보류 중 일시정지 태스크가 있으면 true, 그렇지 않으면 false로 한다.

2. has pending ready promise를 불리언 플래그로 두고 초기값은 false로 한다.

3. has finite timeline은 animation에 연관된 타임라인이 있고 그 타임라인이 단조 증가가 아니라면 true로 한다.

4. previous current time에 animation의 현재 시간을 할당한다.

5. enable seek는 auto-rewind가 true이고 has finite timeline이 false이면 true, 아니면 false로 초기화한다.

6. 아래 조건 중 첫 번째로 일치하는 것만 수행한다:

   animation의 실효 재생 속도 > 0이고, enable seek이 true이며, animation의

   • previous current time이 미해결이거나,

   • previous current time이 0 미만이거나,

   • previous current time이 효과 종료 시점 이상인 경우,

   animation의 대기 시간을 0으로 설정한다.

   animation의 실효 재생 속도 < 0이고, enable seek이 true이면서 animation의

   • previous current time이 미해결이거나,

   • previous current time이 0 이하이거나,

   • previous current time이 효과 종료 시점을 초과하는 경우,

   효과 종료 시점이 양의 무한대이면,

   InvalidStateError DOMException 예외를 throw하고 이 단계를 중단한다.

   그 외,

   animation의 대기 시간을 animation의 효과 종료 시점으로 설정한다.

   animation의 실효 재생 속도가 0이고 animation의 현재 시간이 미해결이면,

   animation의 대기 시간을 0으로 설정한다.

7. has finite timeline이 true이고 previous current time이 미해결이라면:

   • auto align start time 플래그를 true로 설정한다.

   Note: 스타일 갱신 중 CSS 애니메이션에 play가 호출될 경우, animation의 시작 시간은 레이아웃 이후에만 신뢰성 있게 계산 가능하다. 이 경우 애니메이션은 자동 정렬 시작 시간을 가지며, 진행률을 타임라인 범위에 정렬하도록 시작 시간이 자동으로 조정된다.

8. animation의 대기 시간이 해결됨이면, 시작 시간을 미해결로 둔다.

9. animation에 보류 중 재생 태스크 또는 보류 중 일시정지 태스크가 있다면,

   1. 해당 태스크를 취소한다.

   2. has pending ready promise를 true로 한다.

10. 다음 조건이 모두 만족된다면:

    • animation의 대기 시간이 미해결,

    • aborted pause가 false,

    • animation이 보류 중 재생 속도가 없는 경우,

    이 절차를 중단한다.

11. has pending ready promise가 false면, animation의 current ready promise를 새 Promise로, 해당 Relevant Realm에 생성한다.

12. animation이 ready가 되면, 아래 단계를 실행하도록 태스크를 예약한다:

    1. animation의 시작 시간 또는 대기 시간 중 하나는 해결됨임을 보장(Assert)한다.

    2. ready time을 animation이 ready해진 시점의 연관 타임라인의 시간값으로 둔다.

    3. 아래 조건 중 첫 번째로 일치하는 것을 실행한다:

       animation의 대기 시간이 해결됨이면,

       1. 보류 중 재생 속도 적용을 animation에 수행한다.

       2. new start time에 ready time - 대기 시간 / 재생 속도 값을 할당한다. 만약 재생 속도가 0이면 new start time = ready time으로 둔다.

       3. animation의 시작 시간을 new start time으로 설정한다.

       4. 재생 속도가 0이 아니면, animation의 대기 시간을 미해결로 만든다.

       animation의 시작 시간이 해결됨이고, animation에 보류 중 재생 속도가 있으면,

       1. current time to match에 (ready time - 시작 시간) × 재생 속도 값을 할당한다.

       2. 보류 중 재생 속도 적용을 animation에 실행한다.

       3. 재생 속도가 0이면 animation의 대기 시간을 current time to match로 둔다.

       4. new start time에 ready time - current time to match / 재생 속도 값을 할당한다. 재생 속도가 0이면 new start time=ready time.

       5. animation의 시작 시간을 new start time으로 지정한다.

    4. Resolve animation의 current ready promise를 animation으로 해결한다.

    5. 애니메이션 완료 상태 갱신 절차를 did seek=false, synchronously notify=false로 animation에 대해 실행한다.

       위 두 단계의 순서가 중요하다. 이는 길이가 0인 연관 효과를 가진 애니메이션이 current ready promise를 current finished promise보다 먼저 해결(resolved)하도록 한다.

    위 태스크가 예약되어 실행 전인 동안, animation은 보류 중 재생 태스크 상태라 한다. 태스크 실행 중일 경우 animation은 보류 중 재생 태스크가 없는 것으로 본다.

    만약 UA가 animation이 즉시 ready임을 판단하면, 위 태스크를 마이크로태스크로 예약하여 다음 마이크로태스크 체크포인트에서 실행할 수 있다. 단, 동기적으로 실행해서는 안된다.

    위 보류 중 재생 태스크를 비동기로 실행해야 한다는 요구는 아래 코드를 구현마다 일관되게 동작하게 한다:

    animation.play();
    animation.ready.then(
      () => { console.log('Playback commenced'); },
      () => { console.log('Playback was canceled'); }
    );
    // 어떤 조건에서 재생이 취소될 수도 있음...
    animation.cancel();
    // "Playback was canceled"가 콘솔에 출력됨
    

    위 코드에서 보류 중 재생 태스크가 동기적으로 실행된다면, current ready promise가 reject되지 않는다.

13. 애니메이션 완료 상태 갱신 절차를 did seek=false, synchronously notify=false로 animation에 실행한다.

애니메이션 재생 시 커스텀 효과 업데이트용 태스크를 예약하는 절차를 포함해야 한다.

2.4.7.1. 시작 시간 자동 정렬

단조롭지 않은(non-monotonic) 타임라인에 붙은 경우, 애니메이션의 시작 시간은 레이아웃 의존적일 수 있다. 이 경우 레이아웃 이후 타임라인이 갱신되고 나서 시작 시간 계산을 유예한다. 타임라인의 현재 시간을 갱신할 때, 연결된 애니메이션의 시작 시간도 조건에 따라 갱신된다. 자동 정렬 시작 시간 계산 절차는 다음과 같다:

1. auto-align start time 플래그가 false면 이 절차를 중단한다.

2. 타임라인이 비활성이면 이 절차를 중단한다.

3. 재생 상태(play state)가 idle이면 이 절차를 중단한다.

4. 재생 상태가 paused이고, 대기 시간이 해결됨이라면 이 절차 중단.

5. start offset에 애니메이션 부착 범위의 시작에 대응하는 타임라인 시간값을 할당한다. 뷰 타임라인의 경우, cover 범위의 비율로 계산 필요.

6. end offset에 애니메이션 부착 범위의 끝에 해당하는 타임라인 시간값을 할당한다. 뷰 타임라인의 경우, cover 범위의 비율로 계산 필요.

7. 시작 시간을 실효 재생 속도가 0 이상이면 start offset으로, 아니면 end offset으로 설정한다.

8. 대기 시간을 해제한다.

2.4.8. 애니메이션 일시 정지

애니메이션 정지 절차에서는 연관 효과 뿐만 아니라 연관 효과의 모든 자손도 참조해야 합니다.

seek time 설정에 대한 제약은 단조 타임라인(monotonic timeline)을 사용할 때만 적용하도록 업데이트합니다. 스크롤 기반 애니메이션에서는 애니메이션 범위가 계산될 때까지 hold time 설정이 연기되어야 합니다.

다음을 다음으로 교체:

1. seek time을 타임 값으로 두고, 처음에는 미해결로 한다.

2. has finite timeline을 true로 둔다. animation이 연결된 타임라인이 있고, 그 타임라인이 단조 증가가 아니면 true이다.

3. animation의 현재 시간이 미해결이면, 아래 조건에 따라 동작:

   animation의 재생 속도가 0 이상이면,

   seek time에 0을 할당한다.

   그 외의 경우,

   연관 효과 종료 지점이 양의 무한대이면,

   InvalidStateError InvalidStateError DOMException 예외를 throw하고 중단한다.

   그 외,

   seek time에 animation의 연관 효과 종료 지점을 할당한다.

4. seek time이 해결됨이면,

   has finite timeline이 true이면,

   animation의 시작 시간을 seek time으로 설정한다.

   그 외,

   animation의 대기 시간을 seek time으로 설정한다.

를 다음으로 교체:

1. has finite timeline을 true로 둔다. animation에 연결된 타임라인이 있고, 그 타임라인이 단조 증가가 아니면 true이다.

2. animation의 현재 시각(current time)이 미해결(unresolved)이고 has finite timeline이 false인 경우, 아래 조건 중 처음으로 일치하는 항목에 따라 단계를 수행한다:

   만약 animation의 재생 속도(playback rate)가 ≥ 0이라면,

   hold time을 0으로 설정한다.

   그 외의 경우,

   만약 associated effect end가 animation에 대해 양의 무한대(positive infinity)라면,

   throw "InvalidStateError" DOMException 예외를 발생시키고, 이 단계를 중단한다.

   그 외의 경우,

   hold time을 animation의 associated effect end로 설정한다.

3. has finite timeline이 true이고, animation의 현재 시각(current time)이 미해결(unresolved)인 경우

   • auto align start time 플래그를 true로 설정한다.

를 다음으로 교체:

아래 두 조건이 모두 true일 때 가능한 한 빨리 태스크를 예약한다:

• user agent가 animation의 연관 효과(있다면) 재생 일시정지를 위해 필요한 처리를 모두 마쳤을 것.

• 애니메이션이 비활성 타임라인이 아닌 타임라인에 연결되어 있을 것.

를 다음으로 교체:

아래 모든 조건이 true일 때 가능한 한 빨리 태스크를 예약한다:

• user agent가 animation의 연관 효과(있다면) 재생 일시정지를 위해 필요한 처리를 모두 마쳤을 것.

• 애니메이션이 비활성 타임라인이 아닌 타임라인에 연결되어 있을 것.

• 애니메이션에 resolved 대기 시간 또는 시작 시간이 있을 것.

Note: auto-align start time 플래그가 true라면 일시정지 대기 중인 애니메이션에도 시작 시간이 필요하다. 시작 시간은 자동 정렬 시작 시간 계산 절차를 따라 설정된다.

2.4.9. 애니메이션 취소

2.4.10. 속도 제어

2.4.11. 애니메이션 전체 진행도 계산

애니메이션의 overallProgress는 해당 현재 시간을 연관 효과 종료 지점으로 나눈 값입니다.

2.5. 애니메이션 효과

다음 텍스트가 추가됩니다:

애니메이션의 연관 효과(associated effect)는 해당 애니메이션에 직접 연관됨(directly associated) 으로 간주한다.

애니메이션 효과(Animation effects)는 그룹 효과(group effects)를 사용해 계층적으로 결합할 수 있다(자세한 내용은 § 2.10 그룹화와 동기화 참조). 이러한 계층에서 오직 루트(root) 애니메이션 효과만이 애니메이션에 직접 연관될 수 있다. 만약 애니메이션 효과가 부모 그룹(parent group)을 가지고 있을 때 해당 효과를 연관 효과로 애니메이션에 지정하면, 그 애니메이션 효과는 부모 그룹에서 제거된 후 애니메이션에 연관된다.

애니메이션 효과는 애니메이션에 연관(associated with an animation)되었다고 한다. 이는 해당 효과가 애니메이션에 직접 연관되어 있거나, 혹은 조상(ancestor) 그룹 효과(group effect) 중에 애니메이션에 직접 연관된 것이 있을 때를 포함한다.

2.5.1. 애니메이션 효과의 유형

이 명세는 두 가지 애니메이션 효과 타입을 정의합니다:

• 키프레임 효과

• 그룹 효과

2.5.2. 활성 구간

이 명세 단계에서는 활성 구간의 하한값을 다음과 같이 정의합니다:

활성 구간의 하한값은 애니메이션 효과 시작 시점에 의해 결정되나, 애니메이션 효과의 start delay에 의해 이동될 수 있다.

다음 다이어그램 또한 애니메이션 효과 시작 시점을 애니메이션 시작 시점 대신 가리켜야 한다.

종료 지연에 대한 설명은 다음과 같이 갱신됨:

종료 지연도 지정할 수 있으나, 주로 시퀀스 효과처럼 애니메이션을 순차적으로 구성할 때만 의미가 있다.

규범적 설명은 다음과 같이 갱신됨:

활성 구간의 하한값은 효과의 시작 시점과 start delay의 합이다.

애니메이션 효과의 시작 시점은 (있다면) 상위 그룹이 효과를 시작하도록 예약한 시점이다. 이는 상속 시간으로 나타낸다.

대부분의 경우(상위 그룹이 없을 때 포함) 시작 시점은 0이다. 유일한 예외는 시퀀스 효과로, 이들의 자식 시작 시점은 § 2.10.4.1 시퀀스 효과 자식의 시작 시점에서 설명한 대로 설정된다.

시작 시점 이외에도 애니메이션 효과에는 start delay가 있으며, 이는 시작 시점으로부터의 오프셋이다.

시작 시점은 상위 그룹이 결정하지만, start delay는 애니메이션 효과 자체의 속성이다.

활성 구간의 하한값(상속 시간 공간 기준)은 시작 시점과 start delay의 합이다.

이 정의들은 로컬 시간(§ 2.5.3 로컬 시간 및 상속 시간 참조) 및 활성 시간 계산에도 포함된다.

종료 시점 정의와 관련해,

애니메이션 효과의 종료 시점은 다음 계산 결과이다: max(시작 시점 + start delay + active duration + end delay, 0).

2.5.3. 로컬 시간과 상속 시간

이 절이 추가되었습니다.

Web Animations에서는 모든 시간이 어떤 기준점에 상대적입니다. 이러한 기준점의 차이로 다양한 시간 공간이 생깁니다.

이는 컴퓨터 그래픽스에서 사용하는 좌표 공간에 비유할 수 있습니다. 시간 공간의 0시점은 좌표 공간의 원점과 유사합니다.

좌표 공간과 마찬가지로 시간 공간도 중첩될 수 있습니다. 그룹 효과는 일반적으로 상위 부모나 애니메이션으로부터 받은 시간 값에 변환을 적용한 뒤, 그 변환된 시간 값을 자식에게 넘겨줍니다. 자식 애니메이션 효과는 이러한 변환된 시간 공간 내부에서 동작합니다.

자식은 부모로부터 받은 변환된 시간 값을, 즉 상속 시간에, 자신의 시작 시점을 더해서 자체 로컬 시간 공간을 만듭니다(아래 그림 참조).

애니메이션 효과의 특정 시점에서 상속 시간은 아래 조건 중 첫 번째로 일치하는 것에 따라 결정됩니다:

애니메이션 효과에 부모 그룹이 있으면,

상속 시간은 부모 그룹의 현재 변환 시간입니다.

애니메이션 효과가 애니메이션에 직접 연관된 경우,

상속 시간은 애니메이션의 현재 시간입니다.

그 외의 경우,

상속 시간은 미해결(unresolved)입니다.

로컬 시간은 애니메이션 효과의 상속 시간에서 해당 시작 시점을 뺀 값입니다. 상속 시간이 미해결이면, 로컬 시간도 미해결이 됩니다.

2.5.4. 애니메이션 효과 단계와 상태

규범적 in play 정의엔 다음 조건이 포함됩니다:

2. 애니메이션 효과가 부모 그룹에 속하고, 그 애니메이션 효과가 in play이거나, 아니면 애니메이션에 직접 연관되어 있고, 그 애니메이션이 완료 상태가 아니어야 한다.

아래를 다음으로 교체:

2. 애니메이션 효과가 애니메이션에 연관되어 있고, 해당 애니메이션이 완료 상태가 아닐 때.

규범적 current 정의에 다음 조건을 추가합니다:

• 애니메이션 효과가 부모 그룹을 가지고, 부모 그룹이 current인 경우.

애니메이션 효과의 단계를 결정할 때 사용하는 목록에 아래 정의들을 추가합니다.

진행 타임라인 경계에 있음

아래 절차에 따라 판단:

1. 아래 중 하나라도 참이면:

   • 연관된 애니메이션의 타임라인이 진행 기반 타임라인이 아니거나,

   • 연관된 애니메이션의 타임라인 지속시간이 미해결이거나 0이거나,

   • 애니메이션의 재생 속도가 0인 경우

   false를 반환

2. effective start time을 애니메이션의 시작 시간이 해석된 값이라면 그것으로, 아니라면 0으로 둔다.

3. unlimited current time을 아래 조건에 따라 설정:

   시작 시간이 해석된 경우:

   (timeline time - 시작 시간) × 재생 속도

   그 외

   애니메이션의 현재 시간

4. effective timeline time을 unlimited current time / 애니메이션의 재생 속도 + effective start time으로 둠

5. effective timeline progress를 effective timeline time / 타임라인 지속시간으로 둠

6. effective timeline progress가 0 또는 1이면 true, 아니면 false 반환

이 절차는 일시정지된 애니메이션에서 현재 시간을 명시적으로 설정할 경우 완전히 올바르지 않을 수 있습니다. 이로 인해 타임라인의 현재 시간과 애니메이션의 현재 시간 간에 리드/래그가 생길 수 있습니다.

이 절차는 아마 더 단순화될 수 있습니다. 실제로 스크롤 경계에 도달했는지만 파악하면 충분할 수 있습니다. 놀라운 동작을 방지하는 것이 목표라면 타임라인 현재 시간이 0 또는 진행 지속시간인지 확인하는 것 만으로도 충분할 수 있습니다.

아래를 다음으로 교체:

애니메이션 효과가 before phase에 있다고 하려면, 로컬 시간이 미해결이 아니면서 다음 조건 중 하나 이상을 만족해야 한다:

1. 로컬 시간이 before-active boundary time 미만이거나,

2. 애니메이션 방향이 "backwards"이고 로컬 시간이 before-active boundary time과 같을 때.

를 다음으로 교체:

애니메이션 효과가 before phase에 있다고 하려면, 로컬 시간이 미해결이 아니고, 아래 조건 중 하나 이상을 만족해야 한다:

1. 로컬 시간이 before-active boundary time 미만이거나,

2. 애니메이션 방향이 "backwards"이고 로컬 시간이 before-active boundary time과 같으면서 진행 타임라인 경계에는 없을 때.

아래를 다음으로 교체:

애니메이션 효과가 after phase에 있다고 하려면, 로컬 시간이 미해결이 아니고, 다음 조건 중 하나 이상을 만족해야 한다:

1. 로컬 시간이 active-after boundary time을 초과하거나,

2. 애니메이션 방향이 "forwards"이고 로컬 시간이 active-after boundary time과 같은 경우.

를 다음으로 교체:

애니메이션 효과가 after phase에 있다고 하려면, 로컬 시간이 미해결이 아니고, 다음 조건 중 하나 이상을 만족해야 한다:

1. 로컬 시간이 active-after boundary time을 초과하거나,

2. 애니메이션 방향이 "forwards"이고 로컬 시간이 active-after boundary time과 같으면서 진행 타임라인 경계에는 없을 때.

2.5.5. 채우기 모드

2.6. 반복

2.6.1. 반복 구간

다음 내용 이후:

단일 반복의 길이를 반복 지속시간(iteration duration)이라고 한다.

다음 내용 추가:

애니메이션 효과의 최초 반복 지속시간은 단순히 그 효과의 고유 반복 지속시간(intrinsic iteration duration)이다. 고유 반복 지속시간은 아래 조건 중 먼저 일치하는 것으로 계산된다:

애니메이션 효과가 그룹 효과인 경우,

§ 2.10.3 그룹 효과의 고유 반복 지속시간 절차를 따른다.

애니메이션 효과가 시퀀스 효과인 경우,

§ 2.10.4.2 시퀀스 효과의 고유 반복 지속시간 절차를 따른다.

타임라인 지속시간이 미해결이거나 반복 횟수가 0인 경우,

0 반환

그 외의 경우

(100% - start delay - end delay) / 반복 횟수

Note: 현재 start delay와 end delay는 0으로 처리된다. 향후 백분율 단위 지연이 지원되면 변경될 수 있다.

반복 지속시간은 애니메이션 효과에 대해 작성자가 고유 반복 지속시간과는 다른 값으로 설정할 수도 있다.

2.6.2. 반복 시간 공간

2.6.3. 구간 타이밍

이 절은 비규범(참고)입니다.

설명은 다음과 같이 갱신됨:

아래 예제에서, 반복 효과의 경우 로컬 시간 1초일 때 반복 시간은 0이다. 시퀀스 효과의 경우 상속 시간 1초에서는 오직 B 효과만 실행 중이며, 겹침이 없다.

그리고 그림도 다음과 같이 갱신됨:

2.7. 애니메이션 효과 속도 제어

(이 절이 추가되었습니다.)

애니메이션과 마찬가지로, 애니메이션 효과 역시 재생 속도 매개변수를 가진다. 애니메이션 효과의 재생 속도는 로컬 시간으로부터 변환된 시간을 계산할 때 곱해지는 유한 실수이다.

재생 속도를 애니메이션 효과에 설정할 때와 애니메이션에 재생 속도를 설정할 때의 동작은 다르다. 이 동작은 § 2.8 핵심 애니메이션 효과 계산의 시간 계산에서 정의된다.

2.8. 핵심 애니메이션 효과 계산

2.8.1. 개요

이 절은 비규범(참고)입니다.

설명을 아래에서:

Web Animations 타이밍 모델의 핵심은 로컬 시간 값을 받아 반복 진행도(iteration progress)로 변환하는 과정이다.

아래로 교체:

Web Animations 타이밍 모델의 핵심은 상속 시간(inherited time) 값을 받아 반복 진행도(iteration progress)로 변환하는 과정이다.

애니메이션 효과의 재생 속도를 반영한 다이어그램으로 갱신:

갱신:

활성 지속시간(active duration)을 확정한 뒤, 애니메이션 효과의 로컬 시간을 변환된 진행도(transformed progress)(반복 진행도)로 변환하는 과정은 아래와 같다.

아래로 교체:

활성 지속시간(active duration)을 확정한 뒤, 애니메이션 효과의 상속 시간을 변환된 진행도(transformed progress)(반복 진행도)로 변환하는 과정은 아래와 같다.

시간 계산 다이어그램도 아래와 같이 갱신:

갱신:

첫 단계인 로컬 시간의 계산법은 Local time에서 설명되어 있다.

아래로 교체:

첫 단계인 로컬 시간의 계산법은 § 2.5.3 로컬 시간과 상속 시간 에서 설명되어 있다.

2.8.2. 활성 지속시간 계산

아래로 업데이트됨:

활성 지속시간(active duration)을 계산하기 위해, 먼저 반복 지속시간(repeated duration)을 다음과 같이 정의한다:

반복 지속시간 = 반복 지속시간 × 반복 횟수

반복 지속시간 또는 반복 횟수 중 하나라도 0이면 반복 지속시간은 0이다.

IEEE 754-2008에 따르면 무한대 × 0 결과가 정의되어 있지 않기 때문에, 이 보정이 필요하다.

활성 지속시간은 다음 단계에 따라 계산된다:

1. 재생 속도가 0이면, Infinity를 반환한다.

2. 그 외의 경우, 반복 지속시간 / abs(재생 속도) 를 반환한다.

2.8.3. 로컬 시간 변환

2.8.3.1. 활성 시간 계산

활성 시간(active time) 정의의 조건에 부모 그룹(parent group) 관련 내용을 추가:

하지만 활성 시간은 애니메이션 효과가 출력을 내야 하는 상황에만 정의되며, 이는 fill mode, 단계(phase) 및(있다면) 부모 그룹의 단계에 따라 결정된다:

각 단계에 대한 추가 정의는 아래와 같음:

애니메이션 효과가 before phase에 있으면,

결과는 아래 조건 중 처음으로 성립하는 것에 따른다:

부모 그룹이 있고, 그 부모가 after phase면

미해결 시간값을 반환한다.

…

애니메이션 효과가 active phase에 있으면,

결과는 아래 조건 중 우선 일치하는 것에 따름:

부모 그룹이 있고, 그 부모가 before phase이고, 이 효과의 fill mode가 none 또는 forwards인 경우

미해결 시간값을 반환한다.

부모 그룹이 있고, 그 부모가 after phase이고, 이 효과의 fill mode가 none 또는 backwards인 경우

미해결 시간값을 반환한다.

그 외

로컬 시간 - start delay

애니메이션 효과가 after phase에 있으면,

결과는 아래 조건 중 우선 일치하는 것에 따름:

부모 그룹이 있고, 그 부모가 before phase인 경우

미해결 시간값을 반환한다.

…

그 외(로컬 시간이 미해결인 경우),

미해결 시간값을 반환한다.

2.8.3.2. 전체 진행도 계산

전체 진행도 정의에서 “그 외(Otherwise)” 분기의 initial progress 정의를 다음과 같이 갱신:

그 외(Otherwise),

아래 조건 중 가장 먼저 일치하는 것으로 overall progress를 계산한다:

재생 속도가 0 미만이면,

overall progress = (활성 시간 - 활성 지속시간) × 재생 속도 / 반복 지속시간

재생 속도가 0이면,

overall progress는 0이다.

그 외의 경우,

overall progress = (활성 시간 × 재생 속도) / 반복 지속시간

2.9. 시간 변환

2.9.1. 변환된 진행도 계산

before flag를 효과의 재생 속도를 반영해서 계산하도록 두 번째 단계를 교체:

1. current direction이 forwards이거나, 재생 속도가 0 이상인 경우(둘 다 만족할 때는 제외), going forwards를 true로, 그렇지 않으면 false로 한다.

2.9.2. 변환된 시간 계산

(이 절이 추가됨.)

애니메이션 효과의 변환된 시간(transformed time)은 단순히 변환된 진행도에 반복 지속시간을 곱한 값이다.

변환된 진행도가 미해결이면, 변환된 시간도 미해결이다.

변환된 진행도가 0이고 반복 지속시간이 무한대이면, 변환된 시간은 0이다.

2.10. 그룹화 및 동기화

이 절은 비규범(참고)입니다.

애니메이션 효과의 타이밍 속성을 개별로 지정할 수도 있지만, 여러 애니메이션 효과를 동일한 타이밍 속성으로 동기화해 시간적 관계를 유지하는 것이 유용할 때가 많습니다. 이를 위해 그룹 효과를 사용합니다.

간단한 예시가 아래에 나와 있습니다.

그룹 효과가 애니메이션에 직접 연관된 경우, 해당 애니메이션 효과에 대해 그룹 효과 단위로 탐색, 일시정지, 정지 등이 가능하다.

그룹 효과는 애니메이션 효과의 한 종류로, 0개 이상의 애니메이션 효과(자식 효과)를 순서 배열로 가진다.

특정 시점에서, 애니메이션 효과는 최대 하나의 그룹 효과의 자식 효과(부모 그룹)이 될 수 있다. 부모 그룹은 해당 애니메이션 효과와 같은 효과가 될 수 없다.

그룹 효과를 중첩함으로써 계층적 트리 구조를 만들 수 있다. 이런 구조에 사용되는 용어는 [DOM]에서 정의한다:

• 트리 순서(tree order)

• 루트(root)

• 조상(ancestor)

• 하위(descendant)

• 포함 조상(inclusive ancestor)

• 포함 하위(inclusive descendant)

• 다음 형제(next sibling)

• 이전 형제(previous sibling)

• 첫 자식(first child)

• 마지막 자식(last child)

Note: 애니메이션 효과에 위 용어를 적용할 때, 부모는 오직 부모 그룹만을 의미하며, 애니메이션(animation)은 해당 애니메이션 효과와 직접 연관되어 있더라도 부모에 포함되지 않으며, 개념적으로 시간의 부모 역할만 한다.

자식 효과와 그 부모 그룹 간의 시간적 관계는 상속 시간(§ 2.5.3 참조) 정의에 포함된다.

2.10.1. 그룹 시간과 자식 시간의 관계

이 절은 비규범(참고)입니다.

그룹 효과의 자식들 타이밍은 그룹 타이밍을 기반으로 한다. 즉, 자식의 시간은 부모의 변환된 시간을 기반으로 한다. 반복의 경우, 자식들은 부모 반복 내 안에서 동작하게 되며, 그룹 반복이 일어나면 자식들도 전체 반복 형태로 동작하게 된다.

예를 들어 그룹 효과의 반복 횟수가 2라면, 자식들도 그룹의 반복 내에서 번갈아 2번씩 재생된다.

이 경우에도 자식 애니메이션 효과는 하나의 활성 구간만을 갖지만, 부모의 타이밍에 의해 활성 구간이 2회 재생되는 효과가 있다.

그룹 자식에도 반복 횟수와 그룹에도 반복 횟수를 지정하면, 마치 그룹 반복 횟수와 자식 반복 횟수를 곱한 것처럼 된다.

자식들이 부모 그룹 효과의 변환된 시간을 기준 삼기 때문에, 그룹의 활성 구간 밖에서는 애니메이션이 실행되지 않는다. 이는 그룹의 변환 시간이 활성 구간 밖에서는 변하지 않기 때문이고, 이로써 그룹이 자식의 재생을 클립(clipping)하는 것이 가능해진다.

그룹 효과의 자식들이 부모 그룹의 변환된 시간을 기준 삼는 것에는 다음과 같은 추가 효과가 있다:

• 그룹 효과의 재생 속도를 설정하면 모든 자식의 속도가 빨라지거나 느려진다.

• playback direction을 그룹 효과에 설정하면, 모든 자식들의 방향도 함께 바뀐다.

• 타이밍 함수를 그룹 효과에 적용하면, 모든 자식의 진행(progress)에 영향을 준다.

2.10.2. 그룹 효과 자식의 시작 시간

그룹 효과의 자식 효과의 시작 시점은 0이다.

특정 그룹 효과 유형에 따라 이 정의를 오버라이드하여 다른 동기화 방식을 제공할 수 있다.

2.10.3. 그룹 효과의 고유 반복 지속시간

그룹 효과의 고유 반복 지속시간은 가장 마지막 자식 효과의 활성 구간이 종료되는 시간에 기반한다. 자식 효과 개수에 따라 아래와 같이 결정한다.

그룹에 자식 효과가 하나도 없는 경우,

고유 반복 지속시간은 0이다.

그 외의 경우,

1. 그룹의 각 자식 효과의 종료 시점을 계산하여, 그 중 최대값을 maximum end time이라 한다. 종료 시점은 시간 또는(진행 기반 타임라인의 경우) 퍼센트 값일 수 있다. 시간과 퍼센트가 섞이면, 가장 큰 시간 값이 100%에 해당하는 것으로 본다.

2. 고유 반복 지속시간은 max(0, maximum end time)의 결과이다.

고유 반복 지속시간 정의는 특정 그룹 효과 타입별로 오버라이드될 수 있다.

2.10.4. 시퀀스 효과

이 절은 비규범(참고)입니다.

특정 그룹 효과는 자식들을 동기화하는 다양한 방법을 제공할 수 있습니다. 이 명세는 그룹 효과의 한 추가 타입으로 시퀀스 효과를 정의합니다. 시퀀스 효과는 자식의 시작 시점을 조정하여 순차적으로 한 번에 하나씩 실행되도록 배치합니다.

아래 예시에서 두 가지 배치를 비교할 수 있습니다:

그룹 효과 안에 다른 그룹 효과를 넣을 수도 있으므로, 다양한 그룹을 조합하여 복합 동기화가 가능합니다(아래 예시 참고).

시퀀스 효과는 그룹 효과의 한 종류로, 자식 효과들이 그룹 내 순서대로 차례로 재생되도록 예약한다. 이 시퀀싱은 그룹 내 각 자식 효과의 시작 시점을 조정하여 이루어진다.

2.10.4.1. 시퀀스 효과 자식의 시작 시간

시퀀스 효과의 자식 효과의 시작 시점은 해당 자식의 이전 형제의 종료 시점이다. 자식에게 이전 형제가 없다면 시작 시간은 0이다.

이 절은 비규범(참고)입니다.

활성 구간의 시작 시점은 애니메이션 효과의 시작 시점 과 start delay의 합으로 결정되기 때문에, 시퀀스 효과 자식들의 활성 구간은 반드시 엄밀히 순차적일 필요 없이, start delay를 적절히 지정하면 앞당기거나 늦출 수 있다(아래 그림 참고).

음수 start delay를 사용하면, 두 자식의 활성 구간이 겹치도록 할 수 있다. start delay는 그룹 내 후속 자식의 시작 시점에도 영향을 준다는 점에 주의해야 한다.

2.10.4.2. 시퀀스 효과의 고유 반복 지속시간

시퀀스 효과의 고유 반복 지속시간은, 그룹의 자식 뒤에 가상 자식 효과를 덧붙였을 때 그 시작 시점과 같으며, 그 계산은 § 2.10.4.1 시퀀스 효과 자식의 시작 시간 정의를 따른다. 단 이 값이 음수일 경우 고유 반복 지속시간은 0이다.

따라서 시퀀스 효과에 자식 효과가 하나도 없으면, 고유 반복 지속시간은 0이 된다.

3. 애니메이션 모델

3.1. 애니메이션 타입

3.1.1. 애니메이션 불가

애니메이션 대상 속성이 애니메이션 불가일 때 효과 설명을 다음으로 갱신:

애니메이션 효과가 애니메이션 불가 속성을 대상으로 할 때에도 애니메이션 효과는 여전히 시퀀스 효과 내에서의 시간 점유, 애니메이션의 current finished promise 이행 지연 등 통상적인 동작을 그대로 가진다.

3.2. 키프레임 효과

3.2.1. 키프레임 효과의 값

키프레임 효과가 대상 속성으로 참조하는 단일 속성의 효과 값을 계산하는 과정에서, 키프레임 효과 합성 모드 적용 이후 다음 단계를 삽입:

12. interval endpoints 내 각 keyframe에 대해:

    1. (web-animations-1과 동일)

    2. 해당 키프레임 효과의 iteration composite operation이 accumulate일 경우, current iteration 횟수만큼 다음 단계를 반복:

       • keyframe의 target property 속성 값을, property-specific keyframes의 마지막 키프레임 속성값(V_a)과 keyframe의 값(V_b)을 누적(accumulation procedure) 규칙에 따라 합성한 값으로 치환한다.

       Note: 인자 순서가 중요하다. 대상 속성의 애니메이션 타입에 대해 누적/가산 규칙이 없으면, 기본값은 V_b를 반환한다. 누적 불가능한 속성의 반복 합성 결과는 keyframe의 대상 속성 초기값(V_b)이어야 하므로, 위 단계에서 V_b로 지정한다.

3.3. 효과 결합

3.3.1. 효과 스택

효과 정렬 절차에 다음 단계 추가:

1. A와 B를 트리 순서로 정렬한다. (이 단계까지 오면 A, B는 반드시 동일 애니메이션의 효과여야 하며, 그렇지 않은 경우 이전 단계에서 이미 정렬이 끝난다.)

효과 정렬 시 적용되는 "animation effect의 연관 애니메이션" 정의를, 그룹 효과도 올바르게 처리하도록 본 명세 단계에서 도입된 애니메이션과의 연관 정의로 대체해야 함.

3.4. 효과 누적

효과 값(effect value)간의 합성(Web Animations § 5.4.4 Effect composition 참조)에서와 비슷하게, 반복 합성 동작(iteration composite operation) 은 동일 키프레임 효과의 반복간 값을 어떻게 결합할지 결정한다.

이 명세에서는 두 가지 반복 합성 동작을 정의한다:

replace

각 반복은 이전 반복과 무관하게 계산된다.

accumulate

반복이 진행되면서 애니메이션은 각 반복 마지막 값을 누적(accumulation procedure)한다.

반복 합성 동작 적용은 효과 값(effect value) 계산(§ 3.2.1 키프레임 효과 값 참조)에 포함된다.

3.6. 애니메이션 트리거

3.6.1. 개요

애니메이션 트리거는 연관된 애니메이션의 재생을 시간 기반 애니메이션에 대해 제어하는 데 사용됩니다. 애니메이션과 마찬가지로 애니메이션 트리거도 타임라인에 연관되며, 부착 구간(attachment range)에 연결됩니다.

트리거가 스크롤 기반 애니메이션에 어떤 영향을 미쳐야 하는가?

3.6.2. 애니메이션 트리거의 내부 상태

애니메이션 트리거 trigger에는, 처음에는 false인 내부 불리언 did trigger 플래그와, 아래 값 중 하나를 가질 수 있는 내부 state가 있습니다:

idle

연관된 애니메이션 효과 animation은 before 단계에 머물러 있고, 현재 시간은 0입니다.

primary

이 값으로 전환되면 primary 동작 타입이 type에 따라 animation에 적용됩니다.

inverse

이 값으로 전환되면 inverse 동작 타입이 type에 따라 animation에 적용됩니다.

state와 did trigger의 값은 아래에 정의된 애니메이션 트리거 상태 업데이트 절차에서 갱신됩니다.

idle 상태 명세에 대한 공식 결론이 필요한가?

3.6.3. 애니메이션 트리거 동작

애니메이션 트리거는 트리거 동작을 가지고 있으며, 이는 did trigger, state와 함께 연관된 트리거가 애니메이션 재생에 미치는 효과를 결정합니다.

애니메이션 효과가 애니메이션 트리거와 idle 상태로 연결되어 있을 때, 해당 효과는 before 단계에 머물러 있고, 현재 시간은 0을 유지합니다. 트리거의 did trigger 플래그나 state 값에 상관없이 마찬가지입니다. 그 외의 경우 아래와 같이 behavior 값별로 재생에 미치는 영향이 있습니다:

once

state가 primary인 경우,

연관된 애니메이션을 트리거한다.

그 외의 경우,

트리거는 아무 효과도 없다.

repeat

state가 primary인 경우,

연관된 애니메이션을 트리거한다.

state가 inverse인 경우,

연관된 애니메이션 효과를 before 단계로 그리고 연관 애니메이션의 시작 시간을 0으로 리셋한다.

alternate

state가 primary이고 did trigger가 false인 경우,

연관된 애니메이션을 트리거한다.

state가 primary이고 did trigger가 true인 경우,

연관된 애니메이션을 역방향(reverse) 재생시킨다.

state가 inverse인 경우

연관된 애니메이션을 역방향(reverse) 재생시킨다.

state

state가 primary인 경우

연관된 애니메이션을 트리거하거나 재개한다.

state가 inverse인 경우

연관된 애니메이션을 일시정지시킨다.

"primary/inverse" 동작 타입에 대한 정확한 정의가 필요한가?

3.6.4. 애니메이션 트리거 활성 구간

각 애니메이션 트리거는 활성 구간(active interval)을 하나만 정의합니다. 이 구간은 트리거의 state가 primary인 동안 타임라인 진행의 구간입니다.

3.6.5. 애니메이션 트리거 범위

애니메이션 트리거는 두 개의 범위(range)를가지며, 기본 범위(default range)와 종료 범위(exit range)가 있습니다. 종료 범위는 기본 범위를 치환하며, 활성 구간을 확장합니다.

종료 범위의 경계가 기본 범위의 경계와 같거나 더 크기만 가능하다고 명세에 박을 필요가 있을까?

가장 최근의 state state에 따라 활성 구간은 다음과 같이 정의합니다:

state가 primary일 때,

interval은 종료 범위(exit range)로 지정합니다.

그 외의 경우,

interval은 기본 범위(default range)입니다.

3.6.6. 애니메이션에 트리거 설정

3.6.7. 애니메이션 트리거의 타임라인 설정

3.6.8. 애니메이션 트리거 상태 업데이트

타임라인이 다시 idle 상태로 돌아갈 경우 "did trigger" 플래그가 false로 리셋되는 것이 옳은가?

4. 프로그래밍 인터페이스

4.1. AnimationTimeline 인터페이스

[Exposed=Window]
partial interface AnimationTimeline {
    readonly attribute CSSNumberish? currentTime;
    readonly attribute CSSNumberish? duration;
    Animation play (optional AnimationEffect? effect = null);
};

4.2. Animation 인터페이스

Animation 인터페이스의 startTime과 currentTime을 업데이트하고, rangeStart, rangeEnd, overallProgress 속성을 다음과 같이 추가 또는 변경합니다:

[Exposed=Window]
partial interface Animation {
    attribute CSSNumberish?       startTime;
    attribute CSSNumberish?       currentTime;
    attribute AnimationTrigger?   trigger;
    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
    readonly attribute double? overallProgress;
};

속성 설명은 다음과 같이 추가 또는 변경하세요:

4.3. AnimationEffect 인터페이스

[Exposed=Window]
partial interface AnimationEffect {
    // Timing hierarchy
    readonly attribute GroupEffect?     parent;
    readonly attribute AnimationEffect? previousSibling;
    readonly attribute AnimationEffect? nextSibling;

    undefined before (AnimationEffect... effects);
    undefined after (AnimationEffect... effects);
    undefined replace (AnimationEffect... effects);
    undefined remove ();
};

remove() 메서드는 부모 그룹 또는 애니메이션에서 효과를 제거하는데 사용할 수 있습니다. 1단계에서 남겨두고 애니메이션에서만 삭제 처리로 단순화할지 결정이 필요합니다.

4.4. EffectTiming 및 OptionalEffectTiming 딕셔너리

partial dictionary EffectTiming {
    double delay;
    double endDelay;
    double playbackRate = 1.0;
    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
};

partial dictionary OptionalEffectTiming {
    double playbackRate;
};

참고: 이 명세 버전에서는 duration 속성이 CSSNumericValue로 설정될 수 없습니다. 하지만 getComputedTiming()의 duration 계산 결과로 CSSNumericValue가 반환될 수 있습니다. 앞으로의 명세에서는 단위가 유효한 시간 단위 또는 퍼센트인 CSSNumeric 값으로도 duration 설정이 가능해질 수 있습니다.

4.5. AnimationEffect 타이밍 갱신

다음 부분을 치환:

input에 존재하는 각 멤버를 아래와 같이 effect의 해당 타이밍 속성에 할당:

• delay → start delay

• endDelay → end delay

• fill → fill mode

• iterationStart → iteration start

• iterations → iteration count

• duration → iteration duration

• direction → playback direction

• easing → timing function

다음으로 교체:

input에 존재하는 각 멤버를 아래와 같이 effect의 해당 타이밍 속성에 할당:

• delay → 지정 시작 지연

• endDelay → 지정 종료 지연

• fill → fill mode

• iterationStart → iteration start

• iterations → iteration count

• duration → 지정 반복 지속시간

• direction → playback direction

• easing → timing function

다음 추가:

타이밍 표준화(normalize specified timing) 절차를 따르십시오.

스타일 변경으로 인해 타이밍 속성이 갱신될 수도 있습니다. CSS 애니메이션 관련 속성 중 타이밍에 영향을 주는 모든 변경은 다시 타이밍 표준화 절차를 실행해야 합니다.

4.6. ComputedEffectTiming 딕셔너리

partial dictionary ComputedEffectTiming {
    CSSNumberish         startTime;
    CSSNumberish         endTime;
    CSSNumberish         activeDuration;
    CSSNumberish?        localTime;
};

4.6.1. FillMode 열거형

enum FillMode { "none", "forwards", "backwards", "both", "auto" };

auto

설명을 다음과 같이 변경:

GroupEffect에 적용시 backwards와 forwards 모두 fill, KeyframeEffect에 적용시 fill 없음.

4.7. GroupEffect 인터페이스

(이 절이 추가되었습니다.)

그룹 효과는 GroupEffect 인터페이스로 표현됩니다.

[Exposed=Window]
interface GroupEffect {
  constructor(sequence<AnimationEffect>? children,
              optional (unrestricted double or EffectTiming) timing = {});

  readonly attribute AnimationNodeList  children;
  readonly attribute AnimationEffect?   firstChild;
  readonly attribute AnimationEffect?   lastChild;
  GroupEffect clone ();

  undefined prepend (AnimationEffect... effects);
  undefined append (AnimationEffect... effects);
};

4.7.1. timing 인수 처리

GroupEffect() 또는 SequenceEffect() 생성자에 전달되는 timing 파라미터는 EffectTiming 객체, 반복 지속시간을 나타내는 double, 또는 undefined일 수 있습니다.

아래는 타이밍 인수 처리 절차로, timing을 위의 입력을 EffectTiming 객체로 정규화(normalize)합니다.

timing이 EffectTiming 객체인 경우,

timing을 반환합니다.

timing이 double인 경우,

모든 멤버를 기본값으로, duration에 timing을 할당한 새 EffectTiming 객체를 반환합니다.

그 외(undefined),

모든 멤버가 기본값인 새 EffectTiming 객체를 반환합니다.

4.7.2. 계층 구조 조작 정의

효과 집합 effects에 포함되지 않은 effect의 다음 형제는 다음 절차로 결정합니다:

1. context effect를 effect로 둡니다.

2. context effect의 다음 형제가 null이 아닐 때 다음을 반복:

   1. context effect를 다음 형제로 갱신.

   2. context effect가 effects에 포함되지 않았다면, context effect를 반환하고 종료.

3. null을 반환한다.

애니메이션 효과 삭제는 effect의 부모 그룹 또는 애니메이션에서 아래 조건 중 처음 일치하는 절차를 실행:

effect에 부모 그룹이 있는 경우,

부모 그룹의 자식 효과 리스트에서 effect를 제거한다.

effect가 애니메이션에 직접 연관되어 있는 경우,

effect를 애니메이션과의 연관을 해제한다.

일련의 0개 이상의 애니메이션 효과 effects를 parent의 자식 효과 리스트에서 reference child 앞에 자식 삽입할 때 각 effect에 대해 다음 절차 실행:

1. effect 삭제로 effect를 부모에서 제거.

2. effect를 parent의 자식 효과 리스트에서 reference child 앞에 삽입.

4.8. AnimationNodeList 인터페이스

애니메이션 효과의 목록은 AnimationNodeList로 표현될 수 있습니다.

AnimationNodeList 인터페이스는 0 ≤ index < length 범위의 인덱스 속성을 지원합니다.

이 인터페이스가 존재하는 유일한 이유는, 자식 노드에 children 멤버로 접근하는 DOM 인터페이스에 익숙한 저자들에게 친숙한 경험을 제공하기 위해서입니다.

[Exposed=Window]
interface AnimationNodeList {
    readonly attribute unsigned long length;
    getter AnimationEffect? item (unsigned long index);
};

4.9. SequenceEffect 인터페이스

시퀀스 효과는 SequenceEffect 인터페이스로 표현됩니다.

[Exposed=Window]
interface SequenceEffect : GroupEffect {
  constructor(sequence<AnimationEffect>? children,
              optional (unrestricted double or EffectTiming) timing = {});

  SequenceEffect clone ();
};

4.10. KeyframeEffect 인터페이스

KeyframeEffect 인터페이스는 다음과 같은 내용을 추가하도록 수정됩니다:

partial interface KeyframeEffect {
    attribute IterationCompositeOperation    iterationComposite;
};

4.10.1. 새 KeyframeEffect 객체 생성

new SequenceEffect(
  [
    new KeyframeEffect(elem, { opacity: 0 }, 1000),
    new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' })
  ]
);

4.10.2. *Keyframe 딕셔너리의 수정

ComputedKeyframe, BaseComputedKeyframe, BaseKeyframe, BasePropertyIndexedKeyframe 등에서 offset 키의 double? 타입은 (CSSNumberish? or TimelineRangeOffset or DOMString)로 대체됩니다. double은 백분율로 해석되며, DOMString 타입은 <keyframe-selector> 구문에 따라 TimelineRangeOffset으로 파싱됩니다. 파싱 결과의 TimelineRangeOffset 또는 CSSNumericValue는 @keyframes에서 정의된 대로 해석됩니다.

DOMString 값이 유효한 <keyframe-selector>로 파싱되지 않으면, 해당 키프레임은 유효하지 않으며, [[web-animations-1#processing-a-keyframes-argument|처리]] 시 TypeError가 발생합니다 (double 값이 [0,1] 범위를 벗어난 경우와 동일).

4.10.3. KeyframeEffectOptions 딕셔너리

KeyframeEffectOptions 딕셔너리 인터페이스에 다음 멤버가 추가됩니다:

partial dictionary KeyframeEffectOptions {
    IterationCompositeOperation iterationComposite = "replace";
};

enum IterationCompositeOperation { "replace", "accumulate" };

callback EffectCallback = undefined (double? progress,
                                (Element or CSSPseudoElement) currentTarget,
                                Animation animation);

dictionary TimelineRangeOffset {
  CSSOMString? rangeName;
  CSSNumericValue offset;
};

partial dictionary KeyframeAnimationOptions {
    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
    AnimationTrigger? trigger;
};

[Exposed=Window]
interface AnimationPlaybackEvent : Event {
    constructor(DOMString type, optional AnimationPlaybackEventInit
    eventInitDict = {});
    readonly attribute CSSNumberish? currentTime;
    readonly attribute CSSNumberish? timelineTime;
};
dictionary AnimationPlaybackEventInit : EventInit {
    CSSNumberish? currentTime = null;
    CSSNumberish? timelineTime = null;
};

[Exposed=Window]
interface AnimationTrigger {
  constructor(optional AnimationTriggerOptions options = {});
  attribute AnimationTimeline timeline;
  attribute AnimationTriggerBehavior behavior;
  attribute any rangeStart;
  attribute any rangeEnd;
  attribute any exitRangeStart;
  attribute any exitRangeEnd;
};

dictionary AnimationTriggerOptions {
  AnimationTimeline? timeline;
  AnimationTriggerBehavior? behavior = "once";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
};

enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };