10 애니메이션(Animation) 04

애니메이션 가능한 프로퍼티 및 단위

Angular의 애니메이션 지원은 Web Animations 위에 구축되므로 브라우저가 애니메이션으로 간주하는 모든 프로퍼티에 애니메이션을 적용 할 수 있습니다. 여기에는 위치, 크기, 변형, 색상, 테두리 및 기타 여러 항목이 포함됩니다. W3C는 CSS 전환 페이지에서 애니메이션 가능한 프로퍼티 목록을 관리합니다.

숫자 값이 있는 위치 프로퍼티의 경우 값을 적절한 접미어와 함께 문자열로 제공하여 단위를 정의 할 수 있습니다.

l  '50px'

l  '3em'

l  '100 %'

치수를 지정할 때 단위를 제공하지 않으면 Angular는 기본단위를 px로 가정합니다.

l  50은 '50px'와 같습니다.

 

자동 프로퍼티 계산

때로는 런타임까지 치수 스타일 프로퍼티의 값을 알 수없는 경우가 있습니다. 예를 들어, 엘리먼트는 내용 및 화면 크기에 따라 폭과 높이를 가지는 경우가 많습니다. 이러한 프로퍼티는 CSS로 애니메이션을 적용하는 것이 종종 까다 롭습니다.

이러한 경우 특수한 * 프로퍼티 값을 사용하여 이 프로퍼티의 값을 런타임 계산한 다음 애니메이션에 연결할 수 있습니다.

이 예제에서, Leave 애니메이션은 요소가 떠나기 전에 요소의 높이를 가져 와서 그 높이를 0으로 움직입니다.

src/app/hero-list-auto.component.ts

animations: [   trigger('shrinkOut', [     state('in', style({height: '*'})),     transition('* => void', [       style({height: '*'}),       animate(250, style({height: 0}))     ])   ]) ]

 

애니메이션 타이밍

모든 애니메이션 전환에 대해 조정할 수있는 세 가지 타이밍 프로퍼티, 즉 기간, 지연 및 완화 기능이 있습니다. 그것들은 모두 하나의 전환 타이밍 문자열로 결합됩니다.

 

기간

기간은 애니메이션이 시작부터 끝날 때까지 걸리는 시간을 제어합니다. 다음과 같은 세 가지 방법으로 기간을 정의 할 수 있습니다.

l  일반 숫자 (밀리 초 단위) : 100

l  문자열에서 밀리 초 : '100ms'

l  문자열에서 초 : '0.1s'

 

지연

지연은 애니메이션 발생과 전환시작타임 사이의 지연시간 길이를 제어합니다. 기간 다음에 동일한 문자열에 추가하여 정의 할 수 있습니다. 또한 기간과 동일한 형식 옵션입니다.

l  100ms 동안 기다린 후 200ms 동안 실행하십시오 : '0.2s 100ms'

 

완화

완화함수는 런타임 중에 애니메이션이 가속 및 감속하는 방법을 제어합니다. 예를 들어, ease-in 함수를 사용하면 애니메이션이 상대적으로 느리게 시작되지만 진행되는 동안 속도가 올라갑니다. 기간과 지연 뒤에 문자열의 세 번째 값으로 추가하여 완화를 제어할 수 있습니다 (또는 지연이 없을 때 두 번째 값으로 사용).

l  100ms 동안 기다린 후 200ms 동안 실행하고, 완화를 사용하십시오. '0.2s 100ms ease-out'

l  완화를 사용하여 200ms 동안 실행 : '0.2s ease-in-out'

 

예

다음은 몇 가지 맞춤 타이밍입니다. 둘 다 200 밀리 초, 즉 0.2 초 동안 들어가고 떠날 수 있지만, 서로 다른 완화가 있습니다. '0.2s 10 ease-out'에 명시된대로 10 밀리 초의 약간 지연 후 떠나기가 시작됩니다.

hero-list-timings.component.ts (excerpt)

animations: [   trigger('flyInOut', [     state('in', style({opacity: 1, transform: 'translateX(0)'})),     transition('void => *', [       style({         opacity: 0,         transform: 'translateX(-100%)'       }),       animate('0.2s ease-in')     ]),     transition('* => void', [       animate('0.2s 0.1s ease-out', style({         opacity: 0,         transform: 'translateX(100%)'       }))     ])   ]) ]