Animações

    Ignite UI for Angular inclui mais de 100 animações pré-criadas especialmente projetadas para uma melhor experiência do usuário.

    Sass Animations

    Keyframes Mixin

    A Ignite UI for Angular quadros-chave mixin é usado para registrar novas animações de keyframes. O mixin pega o nome de uma animação de keyframes como parâmetro e o adiciona à lista global de registro de keyframes. Dessa forma, os keyframes não serão duplicados no CSS exportado ao incluir a mesma animação de keyframes várias vezes.

    Por exemplo, fazendo isso:

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

    Resultará em apenas uma@keyframes regra adicionada ao CSS produzido:

    @keyframes fade-in { ... }

    Os seletores de quadros-chave para as etapas de animação, juntamente com os estilos CSS para os quadros-chave, são definidos dentro do corpo do mixin.

    Aqui está um exemplo de criação de um novo mixin de animação que pode ser usado com nossoanimation mixin.

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

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

    Animation Mixin

    O mixin de animação serve como um recipiente para animar elementos usando uma lista de propriedades de animação passadas como parâmetros. Os usuários podem especificar propriedades de animação comoname,duration,delay,direction,iteration count, etc. Múltiplas animações por quadros-chave podem ser passadas para oanimation 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

    Incluímos uma lista de funções de tempo pré-preparadas para usar com nossos mixins de keyframes. Leia a documentação para encontrar a lista completa de funções de tempo.

    Angular Animations

    Além de keyframes e mixagens de animações do Sass, também incluímos animações Angular predefinidas.

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Usage

    As animações Ignite UI for Angular são agrupadas em 8 categorias dependendo de seus efeitos visuais -fade,flip​grow,miscellaneous,,rotate,scale,,slide eswing. Cada grupo aceita um conjunto diferente de parâmetros, permitindo que você modifique o comportamento de qualquer uma das animações incluídas. Cada animação é umAnimationReferenceMetadata objeto produzido pelaanimation função fornecida por Angular.

    Se os parâmetros forem anexados, eles atuam como valores padrão. Quando uma animação é invocada pelauseAnimation função, então valores de parâmetros podem ser passados diretamente. Se algum dos valores do parâmetro passado estiver faltando, então os valores padrão serão usados.

    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 inclui um conjunto de funções de temporização que podem ser usadas para facilitar a entrada ou saída de uma animação. Existem três grupos principais de funções de temporização -EaseIn, EaseOut e EaseInOut, cada um contendo as seguintes temporizações:

    • quádruplo
    • cúbico
    • quarto
    • quinto
    • seno
    • exposição
    • circ
    • voltar

    Para usar uma função de temporização específica, importe-a primeiro:

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

    e então usá-lo como valor para o parâmetro de suavização em qualquer animação:

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.