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();

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

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

    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

    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

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