애니메이션

    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

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.