애니메이션
Ignite UI for Angular 더 나은 사용자 경험을 위해 특별히 디자인된 100개 이상의 사전 제작 애니메이션이 포함되어 있습니다.
Sass Animations
Keyframes Mixin
Ignite UI for Angular 키프레임 mixin은 새로운 키프레임 애니메이션을 등록하는 데 사용됩니다. 믹스인은 키프레임 애니메이션의 이름을 매개변수로 사용하여 전역 키프레임 레지스터 목록에 추가합니다. 이렇게 하면 동일한 키프레임 애니메이션을 여러 번 포함할 때 내보낸 CSS에서 키프레임이 중복되지 않습니다.
예를 들어 다음과 같이 합니다.
@include fade-in();
@include fade-in();
생성된 CSS에 하나의 @keyframes
규칙만 추가됩니다.
@keyframes fade-in { ... }
키프레임에 대한 CSS 스타일과 함께 애니메이션 단계에 대한 키프레임 선택기는 믹스인 본문 내부에 정의됩니다.
다음은 animation
믹스인과 함께 사용할 수 있는 새로운 애니메이션 믹스인을 만드는 예입니다.
@mixin fade-in-bottom {
@include keyframes(fade-in-bottom) {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
Animation Mixin
애니메이션 믹스인은 매개변수로 전달된 애니메이션 속성 목록을 사용하여 요소에 애니메이션을 적용하기 위한 용기 역할을 합니다. 사용자는 name
, duration
, delay
, direction
, iteration count
등과 같은 애니메이션 속성을 지정할 수 있습니다. 여러 키프레임 애니메이션을 animation
믹스인에 전달할 수 있습니다.
//include the 'fade-in-top' keyframes animation mixin
@include fade-in-top();
//include the animation mixin with parameters
.my-class {
@include animation('fade-in-top' 3s $ease-out-quad infinite);
}
Timing Functions
키프레임 믹스인과 함께 사용할 수 있도록 미리 구운 타이밍 기능 목록이 포함되어 있습니다. 타이밍 기능의 전체 목록을 찾으려면 설명서를 읽어보세요.
Angular Animations
Sass 키프레임 및 애니메이션 믹스인 외에도 사전 정의된 Angular 애니메이션도 포함되어 있습니다.
이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱 구축을 시작해 보세요. 무료로 다운로드하세요.
Usage
Ignite UI for Angular 시각적 효과에 따라 fade
, flip
, grow
, miscellaneous
, rotate
, scale
, slide
및 swing
8가지 범주로 그룹화됩니다. 모든 그룹은 서로 다른 매개변수 세트를 허용하므로 포함된 애니메이션의 동작을 수정할 수 있습니다. 각 애니메이션은 Angular에서 제공하는 animation
기능에 의해 생성된 AnimationReferenceMetadata
개체입니다.
매개변수가 첨부되면 기본값으로 작동합니다. useAnimation
함수를 통해 애니메이션이 호출되면 매개변수 값을 직접 전달할 수 있습니다. 전달된 매개변수 값 중 하나라도 누락된 경우 기본값이 사용됩니다.
import { transition, trigger, useAnimation } from '@angular/animations';
import { fadeIn, fadeOut } from "igniteui-angular/animations/main";
animations: [
trigger('fadeInOut', [
transition('void => *', [
useAnimation(fadeIn, {
params: {
duration: '.35s',
easing: 'ease-out'
}
})
]),
transition('* => void', [
useAnimation(fadeOut, {
params: {
duration: '.2s',
easing: 'ease-out'
}
})
])
])
]
Timing Functions
Ignite UI for Angular 애니메이션을 완화하거나 완화하는 데 사용할 수 있는 타이밍 기능 세트가 포함되어 있습니다. EaseIn, EaseOut 및 EaseInOut의 세 가지 주요 타이밍 함수 그룹이 있으며 각 그룹에는 다음 타이밍이 포함되어 있습니다.
- 쿼드
- 큐빅
- 쿼트
- 퀸트
- 사인
- 엑스포
- 원
- 뒤쪽에
특정 타이밍 기능을 사용하려면 먼저 해당 기능을 가져옵니다.
import { EaseOut } from "igniteui-angular/animations/easings";
그런 다음 이를 애니메이션의 여유 매개변수 값으로 사용합니다.
useAnimation(fadeIn, {
params: {
easing: EaseOut.back
}
});
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.