{"id":26948455,"url":"https://github.com/kempdec/BlazorAnimate","last_synced_at":"2025-04-02T21:18:32.499Z","repository":{"id":207965267,"uuid":"720508093","full_name":"kempdec/BlazorAnimate","owner":"kempdec","description":"O BlazorAnimate é uma biblioteca que pode ser usada para adicionar facilmente animações em um aplicativo Blazor.","archived":false,"fork":false,"pushed_at":"2024-02-20T11:59:19.000Z","size":137,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T21:18:21.926Z","etag":null,"topics":["animate","animations","blazor","components"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kempdec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-18T17:44:38.000Z","updated_at":"2024-02-20T11:17:48.000Z","dependencies_parsed_at":"2023-11-25T18:27:17.287Z","dependency_job_id":"c6d22afe-fc40-4d65-bbed-47d938d885da","html_url":"https://github.com/kempdec/BlazorAnimate","commit_stats":null,"previous_names":["kempdec/blazorapp.animate","kempdec/blazoranimate"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kempdec%2FBlazorAnimate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kempdec%2FBlazorAnimate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kempdec%2FBlazorAnimate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kempdec%2FBlazorAnimate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kempdec","download_url":"https://codeload.github.com/kempdec/BlazorAnimate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246892847,"owners_count":20850850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate","animations","blazor","components"],"created_at":"2025-04-02T21:18:31.379Z","updated_at":"2025-04-02T21:18:32.491Z","avatar_url":"https://github.com/kempdec.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlazorAnimate\n\nO BlazorAnimate é uma biblioteca que pode ser usada para adicionar facilmente animações em um aplicativo Blazor.\n\n## Índice\n\n- [Instalação](#instalação)\n- [Importação](#importação)\n- [Adição de arquivo](#adição-de-arquivo)\n- [Como usar](#como-usar)\n  - [Componente Animate](#componente-animate)\n  - [Método extensivo](#método-extensivo)\n- [Animações disponíveis](#animações-disponíveis)\n- [Funções de temporização disponíveis](#funções-de-temporização-disponíveis)\n- [Modos de preenchimento disponíveis](#modos-de-preenchimento-disponíveis)\n- [Configurando as opções padrão](#configurando-as-opções-padrão)\n- [Configurando opções pré-construídas](#configurando-opções-pré-construídas)\n- [Como criar animações mutantes](#como-criar-animações-mutantes)\n- [Como criar animações personalizadas](#como-criar-animações-personalizadas)\n- [Autores](#autores)\n- [Notas de lançamento](#notas-de-lançamento)\n- [Licença](#licença)\n\n## Instalação\n\nInstale a biblioteca a partir do NuGet.\n\n``` powershell\nInstall-Package KempDec.BlazorAnimate\n```\n\n## Importação\n\nEm seu arquivo `_Imports.razor` adicione:\n\n``` razor\n@using KempDec.BlazorAnimate\n@using static KempDec.BlazorAnimate.Animation\n@using static KempDec.BlazorAnimate.FillMode\n@using static KempDec.BlazorAnimate.TimingFunction\n```\n\n## Adição de arquivo\n\nDentro da sua tag `\u003chead\u003e` adicione:\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"_content/KempDec.BlazorAnimate/animations.min.css\"\u003e\n```\n\n## Como usar\n\nO BlazorAnimate pode ser utilizado de duas maneiras, uma delas é com o componente `\u003cAnimate/\u003e`, e a outra é através\ndo atributo `style` de qualquer tag HTML.\n\n### Componente Animate\n\nColoque o conteúdo que você deseja animar dentro do componente `\u003cAnimate\u003e`, semelhante aos exemplos abaixo:\n\n``` razor\n@* Componente sem parâmetros, usando a animação padrão (FadeIn). *@\n\u003cAnimate\u003e\n    Texto que será animado.\n\u003c/Animate\u003e\n\n@* Componente com o parâmetro Animation, que define a animação. *@\n\u003cAnimate Animation=\"FadeIn\"\u003e\n    \u003cp\u003e\n        Parágrafo que será animado.\n    \u003c/p\u003e\n\u003c/Animate\u003e\n\n@* Componente com todos os parâmetros de animação. Esses são os valores padrões, quando não especificados. *@\n\u003cAnimate Animation=\"FadeIn\" DurationS=\"0.4\" TimingFunction=\"EaseInOut\" DelayS=\"0.0\" FillMode=\"Both\"\u003e\n    \u003cp\u003e\n        Parágrafo que será animado.\n    \u003c/p\u003e\n\u003c/Animate\u003e\n\n@* Componente com todos os parâmetros de animação (TimeSpan). Esses são os valores padrões, quando não especificados. *@\n\u003cAnimate Animation=\"FadeIn\" Duration=\"TimeSpan.FromSeconds(0.4)\" TimingFunction=\"EaseInOut\" Delay=\"TimeSpan.Zero\" FillMode=\"Both\"\u003e\n    \u003cp\u003e\n        Parágrafo que será animado.\n    \u003c/p\u003e\n\u003c/Animate\u003e\n\n@* Também é possível adicionar qualquer atributo para Animate, como \"class\" e \"style\". *@\n\u003cAnimate class=\"example-class\" style=\"font-weight: bold;\"\u003e\n    Texto animado em negrito.\n\u003c/Animate\u003e\n\n@* Execute uma ação após a animação ser concluída. *@\n\u003cAnimate AfterAnimate=\"firstRender =\u003e {}\" AfterAnimateDelay=\"TimeSpan.FromSeconds(0.2)\"\u003e\n    Texto animado com uma ação após ela ser concluída.\n\u003c/Animate\u003e\n\n@* É possível definir que a animação seja executada somente após a pré-renderização. *@\n\u003cAnimate AfterPreRenderOnly=\"true\"\u003e\n    Texto animado que aparecerá somente após a pré-renderização.\n\u003c/Animate\u003e\n```\n\n### Método extensivo\n\nOs exemplos abaixo tem um resultado equivalente ao uso com o componente `\u003cAnimate/\u003e`, então escolha o que preferir.\nColoque a animação no atributo \"style\" de qualquer tag e use o método extensivo `.With()` para personalizar os parâmetros.\n\n``` razor\n@* Aplicando a animação FadeIn em um elemento HTML. *@\n\u003cdiv style=\"@FadeIn\"\u003e\n    Texto que será animado.\n\u003c/div\u003e\n\n@* Animação com todos os parâmetros personalizados. Esses são os valores padrões, quando não especificados. *@\n\u003cp style=\"@FadeIn.With(0.4, EaseInOut, 0.0, Both)\"\u003e\n    Parágrafo que será animado.\n\u003c/p\u003e\n\n@* Animação com todos os parâmetros personalizados, usando os parâmetros nomeados do C#. Esses são os valores padrões,\nquando não especificados. *@\n\u003cp style=\"@FadeIn.With(durationS: 0.4, timingFunction: EaseInOut, delayS: 0.0, fillMode: Both)\"\u003e\n    Parágrafo que será animado.\n\u003c/p\u003e\n\n@* Animação com todos os parâmetros (TimeSpan). Esses são os valores padrões, quando não especificados. *@\n\u003cp style=\"@FadeIn.With(TimeSpan.FromSeconds(0.4), EaseInOut, TimeSpan.Zero, Both)\"\u003e\n    Parágrafo que será animado.\n\u003c/p\u003e\n\n@* Também é possível usar outras propriedades em \"style\". *@\n\u003cdiv class=\"example-class\" style=\"font-weight: bold; @FadeIn\"\u003e\n    Texto animado em negrito.\n\u003c/div\u003e\n```\n\n## Animações disponíveis\n\nAs animações estão pré-construídas em `KempDec.BlazorAnimate.Animation`, sendo elas:\n\n- FadeIn\n- FadeInUp\n- FadeInRight\n- FadeInDown\n- FadeInLeft\n---\n- SlideInUp\n- SlideInRight\n- SlideInDown\n- SlideInLeft\n\n## Funções de temporização disponíveis\n\nAs funções de temporização estão pré-construídas em `KempDec.BlazorAnimate.TimingFunction`, sendo elas:\n\n- Linear\n- Ease\n- EaseIn\n- EaseOut\n- EaseInOut\n\n\u003e Obs.: Também é possível definir uma função de temporização personalizada usando `CubicBezierTimingFunction`.\n\u003e Exemplo:\n\u003e ``` razor\n\u003e \u003cAnimate TimingFunction=\"new CubicBezierTimingFunction(0.25, 0.1, 0.25, 1.0)\"\u003e\u003c/Animate\u003e\n\u003e ```\n\n## Modos de preenchimento disponíveis\n\nOs modos de preenchimento estão pré-construídas em `KempDec.BlazorAnimate.FillMode`, sendo eles:\n\n- None\n- Forwards\n- Backwards\n- Both\n\n## Configurando as opções padrão\n\nÉ possível definir as opções padrão de animação para serem utilizadas no componente `\u003cAnimate/\u003e` ou com o método\nextensivo `.With()`, em seu `Program.cs` configure de maneira semelhante a abaixo:\n\n``` csharp\nbuilder.Services.Configure\u003cAnimationOptions\u003e(options =\u003e\n{\n    options.Duration = TimeSpan.FromSeconds(0.4);\n    options.TimingFunction = TimingFunction.EaseInOut;\n    options.Delay = TimeSpan.Zero;\n    options.FillMode = FillMode.Both;\n});\n```\n\nE então utilize:\n\n``` razor\n@* Não é necessário fazer mais nada para as opções padrão serem aplicadas ao componente. *@\n\u003cAnimate\u003e\u003c/Animate\u003e\n\n@* É necessário especificar as opções no método extensivo. *@\n@inject IOptionsSnapshot\u003cAnimaitonOptions\u003e options\n\n\u003cdiv style=\"@FadeIn.With(options)\"\u003e\u003c/div\u003e\n```\n\n## Configurando opções pré-construídas\n\nÉ possível definir opções de animação pré-construídas para serem aplicadas ao componente `\u003cAnimate/\u003e` ou método\nextensivo `.With()`.\n\n``` csharp\npublic static AnimationOpts\n{\n    public static AnimationOptions My { get; } = new()\n    {\n        Duration = TimeSpan.FromSeconds(0.4),\n        TimingFunction = TimingFunction.EaseInOut,\n        Delay = TimeSpan.Zero,\n        FillMode = FillMode.Both\n    };\n}\n```\n\nE então é possível utilizar da seguinte maneira:\n\n``` razor\n@* Especificar em componentes. *@\n\u003cAnimate Options=\"AnimationOpts.My\"\u003e\u003c/Animate\u003e\n\n@* Especificar em método extensivo. *@\n\u003cdiv style=\"@FadeIn.With(AnimationOpts.My)\"\u003e\u003c/div\u003e\n```\n\n## Como criar animações mutantes\n\nAs animações mutantes servem para poder criar outras animações a partir de uma já existente, alterando somente as\npropriedades desejadas. Segue o exemplo:\n\n``` csharp\n_ = Animation.FadeIn.Name; // \"fade-in\".\n_ = Animation.FadeIn.Duration; // TimeSpan.FromSeconds(0.4).\n_ = Animation.FadeIn.TimingFunction; // TimingFunction.EaseInOut.\n_ = Animation.FadeIn.Delay; // TimeSpan.Zero.\n_ = Animation.FadeIn.FillMode; // FillMode.Both.\n\n// Criando uma nova animação, a partir da mutação de FadeIn.\nvar newAnimation = new MutantAnimation(Animation.FadeIn, durationS: 1.0, delayS: 0.7);\n\n_ = newAnimation.FadeIn.Name; // \"fade-in\".\n_ = newAnimation.FadeIn.Duration; // TimeSpan.FromSeconds(1.0).\n_ = newAnimation.FadeIn.TimingFunction; // TimingFunction.EaseInOut.\n_ = newAnimation.FadeIn.Delay; // TimeSpan.FromSeconds(0.7).\n_ = newAnimation.FadeIn.FillMode; // FillMode.Both.\n```\n\n## Como criar animações personalizadas\n\n**Adicione a animação com keyframes em seu CSS**\n``` css\n/* Essa animação é apenas um exemplo. */\n@keyframes simple-custom {\n    0% {\n        opacity: 0;\n    }\n\n    100% {\n        opacity: 1;\n    }\n}\n\n/* Essa animação é apenas um exemplo. */\n@keyframes custom {\n    0% {\n        opacity: 0;\n    }\n\n    100% {\n        opacity: 1;\n    }\n}\n```\n\nPara criar uma animação personalizada deve implementar `KempDec.BlazorAnimate.IAnimation`, recomendamos fortemente que\nherde `KempDec.BlazorAnimate.AnimationBase`. Segue um exemplo:\n\n**Crie um tipo C# que implemente `IAnimation` especificando o nome da animação criada com keyframes em seu CSS**\n``` csharp\n// Construtor primário com .NET 8/C# 12.\npublic sealed class SimpleCustomAnimation() : AnimationBase(name: \"simple-custom\")\n{\n}\n\n// Construtor comum.\npublic sealed class SimpleCustomAnimation : AnimationBase\n{\n    public SimpleCustomAnimation() : base(name: \"simple-custom\")\n    {\n    }\n}\n\n// Construtor primário com .NET 8/C# 12, especificando todos os parâmetros.\npublic sealed class CustomAnimation()\n    : AnimationBase(name: \"custom\", duration: 0.4, timingFunction: EaseInOut, delay: 0.0, fillMode: Both)\n{\n}\n\n// Construtor comum, especificando todos os parâmetros.\npublic sealed class CustomAnimation : AnimationBase\n{\n    public CustomAnimation()\n        : base(name: \"custom\", duration: 0.4, timingFunction: EaseInOut, delay: 0.0, fillMode: Both)\n    {\n    }\n}\n```\n\nE então use de maneira semelhante ao exemplo abaixo:\n\n``` razor\n@* Exemplo com componente. *@\n\u003cAnimate Animation=\"new CustomAnimation()\"\u003e\n    Texto a ser animado.\n\u003c/Animate\u003e\n\n@* Exemplo com método extensivo. *@\n\u003cdiv style=\"@(new CustomAnimation())\"\u003e\n    Texto a ser animado.\n\u003c/div\u003e\n```\n\n---\n\nOu você pode definir uma classe estática com a instância pré-construída:\n\n``` csharp\npublic static MyCustomAnimations\n{\n    public static CustomAnimation Custom { get; } = new();\n}\n```\n\nAdicionar a importação em `_Imports.razor`:\n\n``` razor\n@using static MyCustomAnimations\n```\n\nE então usar, de maneira semelhante a abaixo:\n\n``` razor\n@* Exemplo com componente. *@\n\u003cAnimate Animation=\"Custom\"\u003e\n    Texto a ser animado.\n\u003c/Animate\u003e\n\n@* Exemplo com método extensivo. *@\n\u003cdiv style=\"@Custom\"\u003e\n    Texto a ser animado.\n\u003c/div\u003e\n```\n\n## Autores\n\n- **[KempDec](https://github.com/kempdec)** - Mantedora do projeto de código aberto.\n- **[Vinícius Lima](https://github.com/viniciusxdl)** - Desenvolvedor .NET C#.\n\n## Notas de lançamento\n\nPara notas de lançamento, confira a [seção de releases do BlazorAnimate](https://github.com/kempdec/KempDec.BlazorAnimate/releases).\n\n## Licença\n\n[MIT](https://github.com/kempdec/KempDec.BlazorAnimate/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkempdec%2FBlazorAnimate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkempdec%2FBlazorAnimate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkempdec%2FBlazorAnimate/lists"}