크리에이티브 라이브러리와 애니메이션

사용하기 전에 검토를 거치는 기성 섹션, 페이지 템플릿, 애니메이션과 나만의 모션을 만드는 애니메이션 스튜디오입니다.

이 페이지는 영어에서 번역되었습니다. 내용이 다를 경우 영어 버전이 우선합니다. 영어로 읽기

크리에이티브 라이브러리

카탈로그는 일곱 개 카테고리로 구성됩니다.

카테고리	항목 수
히어로	30
카드	40
콘텐츠 섹션	45
내비게이션과 크롬	15
모션	35
스크롤 애니메이션	25
페이지 템플릿	10

모든 항목은 검토 체크리스트(렌더링, 반응형 레이아웃, 접근성, 라이선스, 중복)를 통과해야 Approved 배지와 함께 Library에 나타납니다.

항목 사용

Design → Library를 열고 항목을 선택합니다. Preview로 먼저 확인할 수 있습니다. 그다음 다음을 할 수 있습니다.

Use on a page: Page를 선택하고 Add to page를 클릭합니다. 섹션이 저장되지 않은 변경 사항으로 삽입된 상태로 페이지 편집기가 열리며, 편집하고 저장할 수 있습니다.
Add to website: 웹사이트가 아직 해당 항목을 렌더링할 수 없다면 Propose the change를 클릭합니다. Atlas가 사이트 설정 변경을 제안하고 Task for the website developer를 작성합니다. 개발자가 웹사이트 코드에 컴포넌트를 추가하고, 사이트 관리자가 Site setup에서 변경을 활성화합니다. Atlas는 웹사이트에 코드를 설치하지 않습니다.
Open in Animations: 모션 항목은 이를 바탕으로 새 애니메이션을 시작합니다.

애니메이션 스튜디오

웹사이트 요소에 대한 타임라인 애니메이션(페이드, 이동, 크기 조정, 회전, 리빌)을 만들고, 미리 보고, 모든 변경을 리비전으로 보관합니다.

Design → Animations를 열고 New animation을 클릭합니다. Name과 Key를 입력하고 Start from(빈 페이드 인 또는 승인된 라이브러리 애니메이션)을 선택한 다음 Create를 클릭합니다.
Timeline에서 Duration in milliseconds를 설정하고 Element to animate(Title, Image, Button)를 선택한 다음 Add track을 클릭합니다. 키프레임을 추가하고 각각 Opacity, Move X, Move Y, Scale, Rotate, Reveal을 설정합니다.
Play, Pause, Restart를 사용하고, Preview motion을 Normal과 Reduced 사이에서 전환하여 동작을 줄이길 원하는 방문자에게 어떻게 보이는지 확인합니다.
Save new revision을 클릭합니다. 이전 리비전은 Revisions에 남습니다.

웹사이트에서 재생

개발자가 애니메이션할 요소에 data-atlas-motion="title"(이미지는 media, 버튼은 action)을 표시하고 클라이언트 컴포넌트에서 애니메이션을 재생합니다. 타임라인은 Delivery API가 /motion에서 제공합니다. Studio의 Add to your website 카드에 코드가 표시됩니다. 프로덕션은 라이브 릴리스에 포함된 리비전을 재생합니다.

제한. 애니메이션당 80 ms~60초, 트랙 최대 12개, 트랙당 키프레임 최대 24개. 재생은 웹사이트가 호출할 때 시작되며, 스크롤 트리거 재생은 내장되어 있지 않습니다.

컴포넌트와 레지스트리 Website helper와 팔레트