animaciones

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

    Sass Animations

    Keyframes Mixin

    La Ignite UI for Angular la combinación de fotogramas clave angulares se utiliza para registrar nuevas animaciones de fotogramas clave. El mixin toma el nombre de una animación de fotogramas clave como parámetro y lo agrega a la lista global de registros de fotogramas clave. De esa 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();

    Dará como resultado que solo se agregue una regla @keyframes 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í hay un ejemplo de cómo crear un nuevo mixin de animación que se puede usar con nuestro mixin animation.

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

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

    Animation Mixin

    El mixin de animación sirve como recipiente para animar elementos utilizando una lista de propiedades de animación pasadas como parámetros. Los usuarios pueden especificar propiedades de animación como name, duration, delay, direction, iteration count, etc. Se pueden pasar múltiples animaciones de fotogramas clave al mixin 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

    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 animaciones y fotogramas clave de Sass, también incluimos animaciones Angular predefinidas.

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

    Usage

    La Ignite UI for Angular se agrupa en 8 categorías según sus efectos visuales: fade, flip, grow, miscellaneous, rotate, scale, slide y swing. Cada grupo acepta un conjunto diferente de parámetros, lo que le permite modificar el comportamiento de cualquiera de las animaciones incluidas. Cada animación es un objeto AnimationReferenceMetadata producido por la función animation proporcionada por Angular.

    Si se adjuntan parámetros, actúan como valores predeterminados. Cuando se invoca una animación a través de la función useAnimation, se permite pasar los valores de los parámetros directamente. Si falta alguno de los valores de parámetros pasados, se utilizarán los valores predeterminados.

    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 los siguientes tiempos:

    • 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.