Designer에서 애니메이션 설정하기

디자인 속 대부분의 요소는 스크린에서 움직이게 할 수 있습니다. 제목을 슬라이드로 등장시키고, 가격을 은은하게 커졌다 작아지게 하고, 사진을 둥둥 떠 있게 할 수 있습니다. 설정은 Designer에서 요소마다 하며, 스크린에서는 자동으로 재생됩니다.

요소 움직이게 하기

  1. Designer에서 디자인을 열고 요소를 선택하세요.
  2. 캔버스 위쪽 막대에서 애니메이션 버튼을 클릭하세요. 창 너비가 좁으면 그 막대 끝에 있는 점 세 개 버튼 안에 들어 있습니다.
  3. 등장 섹션, 연속 섹션 또는 두 곳 모두에서 애니메이션을 고르세요.

애니메이션을 없애려면 없음 옵션으로 되돌리세요.

등장

등장 애니메이션은 디자인이 스크린에 나타날 때 재생됩니다. 다음 중에서 고를 수 있습니다.

  • 페이드 인
  • 왼쪽에서 슬라이드 또는 오른쪽에서 슬라이드
  • 위로 슬라이드 또는 아래로 슬라이드
  • 확대
  • 바운스 인

움직이는 데 걸리는 시간과 움직이기 시작하기 전의 대기 시간을 정할 수 있습니다. 요소마다 대기 시간을 조금씩 늘리면, 예를 들어 제목이 먼저 나오고 그다음 가격이 나오는 식으로 디자인이 차례로 완성됩니다.

연속

연속 애니메이션은 디자인이 화면에 표시되는 동안 계속됩니다. 다음 중에서 고를 수 있습니다.

  • 펄스: 요소가 조금 커졌다 작아집니다.
  • 회전: 요소가 빙글빙글 돕니다.
  • 바운스: 요소가 위아래로 통통 튑니다.
  • 플로트: 요소가 천천히 위아래로 떠다닙니다.

속도와 강도 슬라이더로 움직임의 빠르기와 세기를 조절합니다. 한 요소에 등장 애니메이션과 연속 애니메이션을 함께 줄 수도 있으며, 연속 애니메이션은 등장이 끝난 뒤에 시작됩니다.

애니메이션 미리 보기

Designer 위쪽 막대에서 다운로드 버튼 바로 앞에 있는 미리보기 버튼을 클릭하면 디자인이 움직이는 모습을 확인할 수 있습니다. 디자인에 등장 애니메이션만 있으면 재생이 끝날 때 미리보기가 저절로 닫힙니다.

스크린에서

  • 재생목록에서는 디자인이 화면에 나타날 때마다 등장 애니메이션이 재생됩니다.
  • 디자인이 스크린에 단독으로 표시될 때는 불러올 때 등장 애니메이션이 한 번 재생되고, 연속 애니메이션은 계속됩니다.

알아 두기

  • 디자인 안의 앱, 재생목록, QR 코드에는 애니메이션을 줄 수 없습니다.
  • 화면을 가로질러 흐르는 텍스트는 애니메이션이 아닙니다. 대신 Designer 왼쪽 도구 막대의 앱 패널에서 티커 앱을 디자인에 추가하세요. 자세한 내용은 정보 앱: 날씨, 시계, 뉴스, 티커 등 문서를 참고하세요.
  • Designer에서 디자인을 열어 둔 상태라면 AI 어시스턴트가 애니메이션을 대신 설정해 줄 수 있습니다. 예를 들어 "가격이 계속 커졌다 작아지게 해 줘", "제목이 슬라이드로 들어오게 해 줘"라고 요청해 보세요.

팁

움직임은 시선을 끕니다. 오늘의 추천 상품처럼 한두 요소에만 애니메이션을 주고 나머지는 가만히 두세요. 그러면 화면이 차분해 보이고 멀리서도 읽기 쉽습니다.

Designer로 디자인 만들기 문서도 참고하세요.

© screenbird.app