애니메이션

    Ignite UI for Angular 에는 더 나은 사용자 경험을 위해 특별히 설계된 100+ 이상의 사전 제작 애니메이션이 포함되어 있습니다.

    Sass Animations

    Keyframes Mixin

    Ignite UI for Angular 키프레임 믹스인은 새 키프레임 애니메이션을 등록하는 데 사용됩니다. mixin은 키프레임 애니메이션의 이름을 매개 변수로 사용하여 전역 키프레임 레지스터 목록에 추가합니다. 이렇게 하면 동일한 키프레임 애니메이션을 여러 번 포함할 때 내보낸 CSS에서 키프레임이 복제되지 않습니다.

    예를 들어 다음과 같이 합니다.

    @include fade-in();
@include fade-in();

    Will result in only one @keyframes rule added to the produced CSS:

    @keyframes fade-in { ... }

    키프레임에 대한 CSS 스타일과 함께 애니메이션 단계에 대한 키프레임 선택기는 믹스인 본문 내부에 정의됩니다.

    Here's an example of creating a new animation mixin that can be used with our animation mixin.

    @mixin fade-in-bottom {
    @include keyframes(fade-in-bottom) {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

    Animation Mixin

    The animation mixin serves as a vessel for animating elements using a list of animation properties passed as parameters. Users can specify animation properties like name, duration, delay, direction, iteration count, etc. Multiple keyframe animations can be passed to the animation mixin.

    //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

    The Ignite UI for Angular animations are grouped into 8 categories depending on their visual effects - fade, flip, grow, miscellaneous, rotate, scale, slide, and swing. Every group accepts a different set of parameters, allowing you to modify the behavior of any of the included animations. Each animation is an AnimationReferenceMetadata object as produced by the animation function provided by Angular.

    If parameters are attached, they act as default values. When an animation is invoked via the useAnimation function, then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing, then the default values will be used.

    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

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