-
Natalie: 안녕하세요.
Natalie입니다
-
Google Web Designer의
엔지니어입니다
-
이 동영상에서는
-
빠른 모드 타임라인을 사용하여
-
애니메이션을 만드는 방법을
살펴보겠습니다
-
빠른 모드 타임라인은
Google Web Designer의
-
두 가지 애니메이션 도구 중
하나입니다
-
기본적으로 많은 파일이
이 모드로 열립니다
-
다른 하나는 고급 모드 타임라인입니다
-
타임라인 패널의
오른쪽 상단 모서리에서
-
이 전환 버튼을 클릭하면
액세스할 수 있습니다
-
별도 가이드에서
-
고급 모드를 다루게 됩니다
-
여기서는 빠른 모드와
-
이 모드로 할 수 있는 작업을
살펴보겠습니다
-
예시를 함께 볼까요?
-
여기 버튼 목록이 있습니다
-
왼쪽에서 하나씩 날아오도록
-
해보겠습니다
-
우선 이 세 버튼의
위치를 지정합니다
-
시작 지점을 편집하는데
-
바로 페이지 바깥 왼쪽입니다
-
그런 다음 타임라인 패널에서
더하기 버튼을 클릭하면
-
새로운 장면이 0.5초 간격을 두고
-
추가됩니다
-
이 부분은 나중에
맞춤 설정할 수 있습니다
-
이 장면에서
요소를 재정렬하여
-
애니메이션에서
장면 간격을 0.5초로 설정하겠습니다
-
먼저 페이지에
ABOUT(정보) 버튼을 놓고
-
다른 버튼들도 놓겠습니다
-
GALLERY(갤러리) 버튼도
왼쪽에서 날아오도록
-
페이지 위에 옮기고
-
세 번째로 CONTACT(문의) 버튼도
-
왼쪽에서 날아오도록 합니다
-
이제 애니메이션이 생성되었습니다
-
각 썸네일을 클릭하면
애니메이션을 확인할 수 있습니다
-
그럼 해당 시간에
어떤 애니메이션이 표시되는지
-
미리볼 수 있습니다
-
재생 버튼을 클릭해도
스테이지에서 실시간으로
-
애니메이션 미리보기를
확인할 수 있습니다
-
이 작은 반복 버튼을 클릭하면
반복해서 미리보기할 수 있으므로
-
애니메이션을 디버그할 수 있습니다
-
각 썸네일 쌍 사이의 간격이
-
0.5초이므로
각 전환 사이와
-
두 장면 사이의 간격을
알 수 있습니다
-
이를 클릭하면
재생 시간을
-
사용자에 맞게
조정할 수 있습니다
-
1초로 늘여보겠습니다
-
이징을 조정할 수도 있습니다
-
이렇게 하면 바로
베지어 곡선이 나타납니다
-
이 곡선은 모든 애니메이션에서
장면 내 모든 장면 간
-
중간값을 계산하는 데 사용합니다
-
표준 CSS 이징 기능을
모두 사용할 수 있습니다
-
이렇게 클릭하면 하나씩
살펴볼 수 있습니다
-
이즈 인 아웃은
실제 모션을 시뮬레이션할 수 있으므로
-
유용한 기능입니다
-
미리보기를 해보면
세 번째와 네 번째 썸네일 사이의
-
전환은 이즈 인 아웃 전환이며
-
약 1초가 걸린다는 것을
알 수 있습니다
-
지금까지 빠른 모드를 사용하여
-
애니메이션 만들기를 시작할 때
필요한 내용을
-
간략하게 살펴봤습니다
-
사용법은 아주 쉽습니다
-
그러나 복잡한 애니메이션을 만들 때는
-
다소 제약이 따를 수 있습니다
-
예를 들어, 동시에 애니메이션으로
만들 요소가 여러 개이면서
-
각 애니메이션 요소의
키 프레임과 전환을
-
개별적으로 편집하려는 경우나
-
사용자 맞춤 이징 기능 등을
생성하려는 경우 또는
-
상호작용을 추가하려는 경우에는
-
고급 모드 타임라인에서
-
작업해야 합니다
-
이와 관련하여 더 자세한 내용을 다루는
-
가이드가 별도로 있습니다
-
그럼 여기서 마치겠습니다
-
시청해 주셔서 감사합니다
