타이밍은 애니메이션의 핵심 요소이다. Blink를 제외한 모든 애니메이션 효과는 동일한 옵션을 가지고 있다.
● Start: 애니메이션 시작 타이밍을 결정한다.
■ Begin:
태그에 붙은 애니메이션 중 제일 처음으로 붙은 애니메이션의 고정값이다. 태그 값이 애니메이션 조건을 만족하는 순간 실행된다.
■ With Previous
이전 효과와 함께 시작한다. 애니메이션 순서에 영향을 주지 않는다.
■ After Previous
이전 효과 뒤에 실행된다. 애니메이션 순서를 늘린다.
● Delay:
효과를 시작하기 전에 기다릴 지연 시간을 설정한다.
● Speed:
효과 지속 시간을 설정한다. 효과는 반드시 그 시간에 걸쳐서 진행된다.
● Repeat:
반복 횟수를 설정한다.
● Auto Reverse : 자동 역변환. 애니메이션이 종료되면 애니메이션이 반대로 실행된다. 효과 지속 시간(Speed)에 영향을 미치지 않아 실행시간을 반으로(효과 진행 -> 역변환 진행) 쪼개서 사용한다. ex) 0ff -> 5초, On -> Forward 2.5초 Reverse 2.5초
● Auto Rewind : 자동 되감기. 애니메이션이 종료되면 초기 위치로 복귀한다.
2. 타이밍 샘플 만들어보기
(객체를 생성할 때는 도구를 클릭하고 마우스 커서를 Design 영역으로 옮겼을 때 커서가 십자 표시로 되면 생성할 위치에 클릭한 상태로 드래그하면 된다.)