0Pricing
Angular Academy · 강의

키프레임과 순차 지연

복잡한 순차 지연 애니메이션을 만듭니다.

키프레임과 순차 지연은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

다단계 애니메이션

단순한 전환은 A에서 B로 이동합니다. 바운스, 펄스, 색상 전환처럼 여러 단계로 움직이려면 Angular에서 keyframes를 제공하며, 여러 항목을 순서대로 애니메이션하려면 stagger를 제공합니다.

keyframes 함수

keyframes는 style 단계의 배열을 받습니다. 각 단계에는 지속 시간에서 해당 위치를 나타내는 0부터 1까지의 offset이 있습니다.

animate('1s', keyframes([
  style({ opacity: 0, offset: 0 }),
  style({ opacity: 0.5, offset: 0.3 }),
  style({ opacity: 1, offset: 1 })
]))

offset 이해하기

offset은 전체 지속 시간에서 차지하는 비율입니다. 0은 시작이고 1은 끝입니다. 배열에서는 offset이 뒤로 갈수록 증가해야 합니다.

바운스 효과

키프레임을 사용하면 목표 지점을 지나쳤다가 멈추는 바운스 효과를 만들 수 있습니다.

keyframes([
  style({ transform: 'translateY(0)', offset: 0 }),
  style({ transform: 'translateY(-20px)', offset: 0.5 }),
  style({ transform: 'translateY(0)', offset: 1 })
])

offset 생략하기

offset을 생략하면 Angular가 지속 시간 전체에 키프레임을 균등하게 배분합니다.

keyframes([
  style({ opacity: 0 }),
  style({ opacity: 1 })
])

query 함수

호스트의 자식 요소를 애니메이션하려면 전환 안에서 query를 사용해 자식 요소를 선택합니다.

transition('* => *', [
  query(':enter', [
    style({ opacity: 0 })
  ])
])

stagger 함수

stagger는 query로 선택한 각 요소의 애니메이션 사이에 시간 차이를 적용하여 연쇄적으로 이어지는 효과를 만듭니다.

query(':enter', [
  style({ opacity: 0 }),
  stagger(100, [
    animate('300ms', style({ opacity: 1 }))
  ])
])

목록에 stagger 적용하기

목록 컨테이너의 트리거에서 query와 stagger를 함께 사용하면 항목이 하나씩 차례로 나타나게 할 수 있습니다.

trigger('listAnim', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(80, animate('250ms', style({ opacity: 1 })))
    ], { optional: true })
  ])
])

선택적 플래그

일치하는 요소가 없어도 애니메이션에서 오류가 발생하지 않도록 { optional: true }를 query에 전달합니다.

음수 stagger

stagger에 음수 값을 사용하면 순서가 반대로 되어 마지막 항목부터 애니메이션됩니다. 종료 시 연쇄 효과를 만들 때 유용합니다.

stagger(-50, animate('200ms', style({ opacity: 0 })))

성능 참고 사항

많은 요소에 stagger를 적용하면 처리 비용이 커질 수 있습니다. 항목별 지속 시간은 짧게 유지하고, 애니메이션을 GPU에서 처리할 수 있도록 transform과 opacity를 우선 사용하세요.

빠른 확인

keyframes와 stagger에 대한 이해도를 확인해 보세요.

복습

keyframes가 offset 값을 사용해 여러 단계의 움직임을 정의하고, query와 stagger가 여러 요소를 연쇄적으로 애니메이션한다는 것을 배웠습니다. 안전을 위해 { optional: true }를 사용하고, GPU에 적합한 속성을 우선 사용하세요.

자주 묻는 질문

“키프레임과 순차 지연” 강의는 무료인가요?

네 — “키프레임과 순차 지연” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“키프레임과 순차 지연”에서 뭘 배우나요?

복잡한 순차 지연 애니메이션을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“키프레임과 순차 지연” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 애니메이션 기초: 트리거와 상태
  2. 전환과 타이밍
  3. 진입 및 이탈 애니메이션
  4. 키프레임과 순차 지연
← Angular Academy(으)로 돌아가기