animaciones

    Ignite UI for Angular incluye más de 100+ animaciones preconstruidas especialmente diseñadas para una mejor experiencia de usuario.

    Sass Animations

    Keyframes Mixin

    La mezcla de fotogramas clave Ignite UI for Angular se utiliza para registrar nuevas animaciones de fotogramas clave. La mezcla toma el nombre de una animación de fotogramas clave como parámetro y lo agrega a la lista de registro de fotogramas clave global. De esta manera, los fotogramas clave no se duplicarán en el CSS exportado al incluir la misma animación de fotogramas clave varias veces.

    Por ejemplo, haciendo esto:

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

    Solo se añadirá una@keyframes regla al CSS producido:

    @keyframes fade-in { ... }

    Los selectores de fotogramas clave para los pasos de animación junto con los estilos CSS para los fotogramas clave se definen dentro del cuerpo del mixin.

    Aquí tienes un ejemplo de cómo crear una nueva mezcla de animación que puede usarse con nuestraanimation mezcla.

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

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

    Animation Mixin

    La mezcla de animación sirve como recipiente para animar elementos usando una lista de propiedades de animación transmitidas como parámetros. Los usuarios pueden especificar propiedades de animación comoname,duration,delay,direction,iteration count, etc. Se pueden pasar varias animaciones de fotogramas clave alanimation 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

    Incluimos una lista de funciones de sincronización predefinidas para usar con nuestros mixins de fotogramas clave. Lea la documentación para encontrar la lista completa de funciones de sincronización.

    Angular Animations

    Además de la combinación de fotogramas clave y animaciones de Sass, también incluimos animaciones Angular predefinidas.

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Usage

    Las animaciones de Ignite UI for Angular se agrupan en 8 categorías dependiendo de sus efectos visuales -fade,flip​grow,miscellaneous,,rotate,scale,,slide yswing. Cada grupo acepta un conjunto diferente de parámetros, lo que te permite modificar el comportamiento de cualquiera de las animaciones incluidas. Cada animación es unAnimationReferenceMetadata objeto producido por laanimation función proporcionada por Angular.

    Si se adjuntan parámetros, actúan como valores por defecto. Cuando se invoca una animación a través de lauseAnimation función, se permite pasar directamente los valores de los parámetros. Si falta alguno de los valores del parámetro pasado, entonces se usarán los valores por defecto.

    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 incluye un conjunto de funciones de temporización que se pueden utilizar para facilitar la entrada o salida de una animación. Hay tres grupos principales de funciones de temporización: EaseIn, EaseOut y EaseInOut, cada uno de los cuales contiene las siguientes temporizaciones:

    • patio
    • cúbico
    • cuarto de galón
    • quinta
    • seno
    • exposición
    • circulo
    • atrás

    Para utilizar una función de sincronización específica, impórtela primero:

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

    y luego úselo como valor para el parámetro de aceleración en cualquier animación:

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

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.