애니메이션

    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, slideswing 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, EaseOutEaseInOut의 세 가지 주요 타이밍 함수 그룹이 있으며 각 그룹에는 다음 타이밍이 포함되어 있습니다.

    • 쿼드
    • 큐빅
    • 쿼트
    • 퀸트
    • 사인
    • 엑스포
    • 뒤쪽에

    특정 타이밍 기능을 사용하려면 먼저 해당 기능을 가져옵니다.

    import { EaseOut } from "igniteui-angular/animations/easings";
    

    그런 다음 이를 애니메이션의 여유 매개변수 값으로 사용합니다.

    useAnimation(fadeIn, {
        params: {
            easing: EaseOut.back
        }
    });
    

    API References

    Additional Resources

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