KempDec.BlazorAnimate 1.0.0-rc.9

.NET 8.0
This is a prerelease version of KempDec.BlazorAnimate. 
dotnet add package KempDec.BlazorAnimate --version 1.0.0-rc.9
NuGet\Install-Package KempDec.BlazorAnimate -Version 1.0.0-rc.9
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="KempDec.BlazorAnimate" Version="1.0.0-rc.9" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add KempDec.BlazorAnimate --version 1.0.0-rc.9
#r "nuget: KempDec.BlazorAnimate, 1.0.0-rc.9"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install KempDec.BlazorAnimate as a Cake Addin
#addin nuget:?package=KempDec.BlazorAnimate&version=1.0.0-rc.9&prerelease

// Install KempDec.BlazorAnimate as a Cake Tool
#tool nuget:?package=KempDec.BlazorAnimate&version=1.0.0-rc.9&prerelease

BlazorAnimate

O BlazorAnimate é uma biblioteca que pode ser usada para adicionar facilmente animações em um aplicativo Blazor.

Índice

Instalação

Instale a biblioteca a partir do NuGet.

Install-Package KempDec.BlazorAnimate

Importação

Em seu arquivo _Imports.razor adicione:

@using KempDec.BlazorAnimate
@using static KempDec.BlazorAnimate.Animation
@using static KempDec.BlazorAnimate.FillMode
@using static KempDec.BlazorAnimate.TimingFunction

Adição de arquivo

Dentro da sua tag <head> adicione:

<link rel="stylesheet" href="_content/KempDec.BlazorAnimate/animations.min.css">

Como usar

O BlazorAnimate pode ser utilizado de duas maneiras, uma delas é com o componente <Animate/>, e a outra é através do atributo style de qualquer tag HTML.

Componente Animate

Coloque o conteúdo que você deseja animar dentro do componente <Animate>, semelhante aos exemplos abaixo:

@* Componente sem parâmetros, usando a animação padrão (FadeIn). *@
<Animate>
    Texto que será animado.
</Animate>

@* Componente com o parâmetro Animation, que define a animação. *@
<Animate Animation="FadeIn">
    <p>
        Parágrafo que será animado.
    </p>
</Animate>

@* Componente com todos os parâmetros de animação. Esses são os valores padrões, quando não especificados. *@
<Animate Animation="FadeIn" DurationS="0.4" TimingFunction="EaseInOut" DelayS="0.0" FillMode="Both">
    <p>
        Parágrafo que será animado.
    </p>
</Animate>

@* Componente com todos os parâmetros de animação (TimeSpan). Esses são os valores padrões, quando não especificados. *@
<Animate Animation="FadeIn" Duration="TimeSpan.FromSeconds(0.4)" TimingFunction="EaseInOut" Delay="TimeSpan.Zero" FillMode="Both">
    <p>
        Parágrafo que será animado.
    </p>
</Animate>

@* Também é possível adicionar qualquer atributo para Animate, como "class" e "style". *@
<Animate class="example-class" style="font-weight: bold;">
    Texto animado em negrito.
</Animate>

@* Execute uma ação após a animação ser concluída. *@
<Animate AfterAnimate="firstRender => {}" AfterAnimateDelay="TimeSpan.FromSeconds(0.2)">
    Texto animado com uma ação após ela ser concluída.
</Animate>

@* É possível definir que a animação seja executada somente após a pré-renderização. *@
<Animate AfterPreRenderOnly="true">
    Texto animado que aparecerá somente após a pré-renderização.
</Animate>

Método extensivo

Os exemplos abaixo tem um resultado equivalente ao uso com o componente <Animate/>, então escolha o que preferir. Coloque a animação no atributo "style" de qualquer tag e use o método extensivo .With() para personalizar os parâmetros.

@* Aplicando a animação FadeIn em um elemento HTML. *@
<div style="@FadeIn">
    Texto que será animado.
</div>

@* Animação com todos os parâmetros personalizados. Esses são os valores padrões, quando não especificados. *@
<p style="@FadeIn.With(0.4, EaseInOut, 0.0, Both)">
    Parágrafo que será animado.
</p>

@* Animação com todos os parâmetros personalizados, usando os parâmetros nomeados do C#. Esses são os valores padrões,
quando não especificados. *@
<p style="@FadeIn.With(durationS: 0.4, timingFunction: EaseInOut, delayS: 0.0, fillMode: Both)">
    Parágrafo que será animado.
</p>

@* Animação com todos os parâmetros (TimeSpan). Esses são os valores padrões, quando não especificados. *@
<p style="@FadeIn.With(TimeSpan.FromSeconds(0.4), EaseInOut, TimeSpan.Zero, Both)">
    Parágrafo que será animado.
</p>

@* Também é possível usar outras propriedades em "style". *@
<div class="example-class" style="font-weight: bold; @FadeIn">
    Texto animado em negrito.
</div>

Animações disponíveis

As animações estão pré-construídas em KempDec.BlazorAnimate.Animation, sendo elas:

  • FadeIn
  • FadeInUp
  • FadeInRight
  • FadeInDown
  • FadeInLeft
  • SlideInUp
  • SlideInRight
  • SlideInDown
  • SlideInLeft

Funções de temporização disponíveis

As funções de temporização estão pré-construídas em KempDec.BlazorAnimate.TimingFunction, sendo elas:

  • Linear
  • Ease
  • EaseIn
  • EaseOut
  • EaseInOut

Obs.: Também é possível definir uma função de temporização personalizada usando CubicBezierTimingFunction. Exemplo:

<Animate TimingFunction="new CubicBezierTimingFunction(0.25, 0.1, 0.25, 1.0)"></Animate>

Modos de preenchimento disponíveis

Os modos de preenchimento estão pré-construídas em KempDec.BlazorAnimate.FillMode, sendo eles:

  • None
  • Forwards
  • Backwards
  • Both

Configurando as opções padrão

É possível definir as opções padrão de animação para serem utilizadas no componente <Animate/> ou com o método extensivo .With(), em seu Program.cs configure de maneira semelhante a abaixo:

builder.Services.Configure<AnimationOptions>(options =>
{
    options.Duration = TimeSpan.FromSeconds(0.4);
    options.TimingFunction = TimingFunction.EaseInOut;
    options.Delay = TimeSpan.Zero;
    options.FillMode = FillMode.Both;
});

E então utilize:

@* Não é necessário fazer mais nada para as opções padrão serem aplicadas ao componente. *@
<Animate></Animate>

@* É necessário especificar as opções no método extensivo. *@
@inject IOptionsSnapshot<AnimaitonOptions> options

<div style="@FadeIn.With(options)"></div>

Configurando opções pré-construídas

É possível definir opções de animação pré-construídas para serem aplicadas ao componente <Animate/> ou método extensivo .With().

public static AnimationOpts
{
    public static AnimationOptions My { get; } = new()
    {
        Duration = TimeSpan.FromSeconds(0.4),
        TimingFunction = TimingFunction.EaseInOut,
        Delay = TimeSpan.Zero,
        FillMode = FillMode.Both
    };
}

E então é possível utilizar da seguinte maneira:

@* Especificar em componentes. *@
<Animate Options="AnimationOpts.My"></Animate>

@* Especificar em método extensivo. *@
<div style="@FadeIn.With(AnimationOpts.My)"></div>

Como criar animações mutantes

As animações mutantes servem para poder criar outras animações a partir de uma já existente, alterando somente as propriedades desejadas. Segue o exemplo:

_ = Animation.FadeIn.Name; // "fade-in".
_ = Animation.FadeIn.Duration; // TimeSpan.FromSeconds(0.4).
_ = Animation.FadeIn.TimingFunction; // TimingFunction.EaseInOut.
_ = Animation.FadeIn.Delay; // TimeSpan.Zero.
_ = Animation.FadeIn.FillMode; // FillMode.Both.

// Criando uma nova animação, a partir da mutação de FadeIn.
var newAnimation = new MutantAnimation(Animation.FadeIn, durationS: 1.0, delayS: 0.7);

_ = newAnimation.FadeIn.Name; // "fade-in".
_ = newAnimation.FadeIn.Duration; // TimeSpan.FromSeconds(1.0).
_ = newAnimation.FadeIn.TimingFunction; // TimingFunction.EaseInOut.
_ = newAnimation.FadeIn.Delay; // TimeSpan.FromSeconds(0.7).
_ = newAnimation.FadeIn.FillMode; // FillMode.Both.

Como criar animações personalizadas

Adicione a animação com keyframes em seu CSS

/* Essa animação é apenas um exemplo. */
@keyframes simple-custom {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Essa animação é apenas um exemplo. */
@keyframes custom {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

Para criar uma animação personalizada deve implementar KempDec.BlazorAnimate.IAnimation, recomendamos fortemente que herde KempDec.BlazorAnimate.AnimationBase. Segue um exemplo:

Crie um tipo C# que implemente IAnimation especificando o nome da animação criada com keyframes em seu CSS

// Construtor primário com .NET 8/C# 12.
public sealed class SimpleCustomAnimation() : AnimationBase(name: "simple-custom")
{
}

// Construtor comum.
public sealed class SimpleCustomAnimation : AnimationBase
{
    public SimpleCustomAnimation() : base(name: "simple-custom")
    {
    }
}

// Construtor primário com .NET 8/C# 12, especificando todos os parâmetros.
public sealed class CustomAnimation()
    : AnimationBase(name: "custom", duration: 0.4, timingFunction: EaseInOut, delay: 0.0, fillMode: Both)
{
}

// Construtor comum, especificando todos os parâmetros.
public sealed class CustomAnimation : AnimationBase
{
    public CustomAnimation()
        : base(name: "custom", duration: 0.4, timingFunction: EaseInOut, delay: 0.0, fillMode: Both)
    {
    }
}

E então use de maneira semelhante ao exemplo abaixo:

@* Exemplo com componente. *@
<Animate Animation="new CustomAnimation()">
    Texto a ser animado.
</Animate>

@* Exemplo com método extensivo. *@
<div style="@(new CustomAnimation())">
    Texto a ser animado.
</div>

Ou você pode definir uma classe estática com a instância pré-construída:

public static MyCustomAnimations
{
    public static CustomAnimation Custom { get; } = new();
}

Adicionar a importação em _Imports.razor:

@using static MyCustomAnimations

E então usar, de maneira semelhante a abaixo:

@* Exemplo com componente. *@
<Animate Animation="Custom">
    Texto a ser animado.
</Animate>

@* Exemplo com método extensivo. *@
<div style="@Custom">
    Texto a ser animado.
</div>

Autores

Notas de lançamento

Para notas de lançamento, confira a seção de releases do BlazorAnimate.

Licença

MIT

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0-rc.9 118 12/28/2023
1.0.0-rc.8 96 11/25/2023