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 regra @keyframes 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 nosso 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

    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 como name, duration, delay, direction, iteration count, etc. Múltiplas animações de quadro-chave podem ser passadas para o 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

    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

    A Ignite UI for Angular é agrupada em 8 categorias dependendo de seus efeitos visuais -fade, flip, grow, miscellaneous, rotate, scale, slide e swing. 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 é um objeto AnimationReferenceMetadata conforme produzido pela função animation fornecida pelo Angular.

    Se parâmetros forem anexados, eles agem como valores padrão. Quando uma animação é invocada por meio da função useAnimation, então valores de parâmetros podem ser passados diretamente. Se algum dos valores de parâmetros passados 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.