{"id":17718658,"url":"https://github.com/jsuarezruiz/alohakit.animations","last_synced_at":"2025-04-13T07:50:25.650Z","repository":{"id":37760157,"uuid":"487509009","full_name":"jsuarezruiz/AlohaKit.Animations","owner":"jsuarezruiz","description":"AlohaKit.Animations is a library designed for .NET MAUI that aims to facilitate the use of animations to developers.","archived":false,"fork":false,"pushed_at":"2024-05-20T09:56:45.000Z","size":8176,"stargazers_count":263,"open_issues_count":5,"forks_count":26,"subscribers_count":12,"default_branch":"main","last_synced_at":"2024-12-13T03:30:57.578Z","etag":null,"topics":["animation","dotnet","dotnet-maui","maui","transition"],"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/jsuarezruiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["jsuarezruiz"]}},"created_at":"2022-05-01T10:36:57.000Z","updated_at":"2024-12-09T02:03:00.000Z","dependencies_parsed_at":"2024-02-18T11:30:33.804Z","dependency_job_id":"1864c57e-97b8-4638-bbea-2e813f16dbd1","html_url":"https://github.com/jsuarezruiz/AlohaKit.Animations","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"81606cac85545777105ff4642715a3db7de02b8a"},"previous_names":["jsuarezruiz/mauianimation"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsuarezruiz","download_url":"https://codeload.github.com/jsuarezruiz/AlohaKit.Animations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681494,"owners_count":21144700,"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":["animation","dotnet","dotnet-maui","maui","transition"],"created_at":"2024-10-25T14:55:23.792Z","updated_at":"2025-04-13T07:50:25.624Z","avatar_url":"https://github.com/jsuarezruiz.png","language":"C#","funding_links":["https://github.com/sponsors/jsuarezruiz"],"categories":[],"sub_categories":[],"readme":"# AlohaKit Animations - Animation Library for .NET MAUI\n\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://www.nuget.org/packages/AlohaKit.Animations\"\u003e\u003cimg src=\"https://img.shields.io/nuget/v/AlohaKit.Animations?color=blue\u0026style=flat-square\u0026logo=nuget\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.nuget.org/packages/AlohaKit.Animations\"\u003e\u003cimg src=\"https://img.shields.io/nuget/dt/AlohaKit.Animations.svg?style=flat-square\"\u003e\u003c/a\u003e\n   \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/jsuarezruiz/AlohaKit.Animations?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n**AlohaKit.Animations** is a library designed for .NET MAUI that aims to facilitate the use of **animations** to developers. Very simple use from **C# and XAML** code.\n\n![AlohaKit.Animations](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations-promo.png)\n\n_NOTE: This library is a port of [Xamanimation](https://github.com/jsuarezruiz/Xamanimation) to .NET MAUI._\n\nWe can define animations in XAML to a visual element when loading through a Behavior, use a trigger in XAML to execute the animation or  from C# code.\n\nAvailable animations:\n\n- Color\n- FadeTo\n- Flip\n- Heart\n- Jump\n- Rotate\n- Scale\n- Shake\n- Translate\n- Turnstile\n\n![AlohaKit.Animations](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations.gif)\n\n## Usage\n\n**Step 1**: Include the AlohaKit.Animations package reference in your project. \n\n**Step 2**: Enjoy coding!.\n\n## Animations directly from XAML\n\nOne of the main advantages of the library is the possibility of using animations from **XAML**. We must use the following namespace:\n\n    xmlns:AlohaKit.Animations=\"clr-namespace:AlohaKit.Animations;assembly=AlohaKit.Animations\"\n\nLet's animate a BoxView:\n\n```\n\u003cBoxView\n    x:Name=\"FadeBox\"\n    HeightRequest=\"120\"\n    WidthRequest=\"120\"\n    Color=\"Blue\" /\u003e\n```\nwe can define animations directly in XAML (as Application or Page Resources):\n\n```\n\u003calohakit:FadeToAnimation\n    x:Key=\"FadeToAnimation\"\n    Target=\"{x:Reference FadeBox}\"\n    Duration=\"2000\"\n    Opacity=\"0\"/\u003e\n```\nUsing the namespace of AlohaKit.Animations, we have access to the whole set of animations of the library. In all of them there are a number of common **parameters** such as:\n\n- **Target**: Indicate the visual element to which we will apply the animation.\n- **Duration**: Duration of the animation in milliseconds.\n\nDepending on the animation type used, we will have more parameters to customize the specific animation. For example, in the case of Fade Animation we will have an Opacity property to set how we modify the opacity.\n\nTo launch the animation we have two options:\n\n- **Trigger**: Called BeginAnimation that allows us to launch an animation when a condition occurs.\n- **Behavior**: We have a Behavior called BeginAnimation that we can associate to a visual element so that indicating the desired animation, we can launch the same when the element load occurs.\n\nUsing the Clicked event of a button we can launch the previous animation using the trigger provided:\n\n```\n\u003cButton \n    Text=\"Fade\"\u003e\n    \u003cButton.Triggers\u003e\n        \u003cEventTrigger Event=\"Clicked\"\u003e\n            \u003calohakit:BeginAnimation\n                Animation=\"{StaticResource FadeToAnimation}\" /\u003e\n        \u003c/EventTrigger\u003e\n    \u003c/Button.Triggers\u003e\n\u003c/Button\u003e\n```\nWe also have the concept of **Storyboard** as a set of animations that we can execute over time:\n\n```\n\u003calohakit:StoryBoard\n    x:Key=\"StoryBoard\"\n    Target=\"{x:Reference StoryBoardBox}\"\u003e\n    \u003calohakit:ScaleToAnimation  Scale=\"2\"/\u003e\n    \u003calohakit:ShakeAnimation /\u003e\n\u003c/alohakit:StoryBoard\u003e\n```\n### Using C# \n\nIn the same way that we can use the animations of the library from XAML, we can do it from **C#** code. We have an extension method called **Animate** that expects an instance of any of the available animations.\n\nIf we want to animate a BoxView called AnimationBox:\n\n```\n\u003cBoxView\n    x:Name=\"AnimationBox\"\n    HeightRequest=\"120\"\n    WidthRequest=\"120\"\n    Color=\"Blue\" /\u003e\n```\nAccess the element, use the Animate method with the desired animation:\n\n```\nAnimationBox.Animate(new HeartAnimation());\n```\n### Take control of the animation\n\nYou can control the duration of the animation using the **Duration** property. In addition to the type of **Easing** to use. Now, new properties have also been added such as:\n\n**Delay** Add a delay before play the animation.\n\n![Delayed](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations-delayed.gif)\n\n**Repeat Forever** Now you can create infinite animations if you need it.\n\n![Repeat Forever](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations-repeat.gif)\n\n### Triggers!\n\nTriggers allow you to start animations declaratively in XAML based on events or property changes.\n\n```\n\u003cEntry \n    FontSize=\"16\" \n    BackgroundColor=\"LightGray\"\u003e\n    \u003cEntry.Triggers\u003e\n        \u003cTrigger TargetType=\"Entry\" Property=\"IsFocused\" Value=\"True\"\u003e\n            \u003cTrigger.EnterActions\u003e\n                \u003calohakit:AnimateDouble TargetProperty=\"Entry.FontSize\" To=\"24\"/\u003e\n                \u003calohakit:AnimateColor TargetProperty=\"Entry.TextColor\" To=\"Red\"/\u003e\n                \u003calohakit:AnimateColor TargetProperty=\"VisualElement.BackgroundColor\" To=\"Yellow\" Delay=\"1000\"/\u003e\n                \u003calohakit:AnimateDouble TargetProperty=\"VisualElement.Rotation\" To=\"12\" Duration=\"100\"/\u003e\n            \u003c/Trigger.EnterActions\u003e\n            \u003cTrigger.ExitActions\u003e\n                \u003calohakit:AnimateDouble TargetProperty=\"{x:Static Entry.FontSizeProperty}\" To=\"16\"/\u003e\n                \u003calohakit:AnimateColor TargetProperty=\"{x:Static Entry.TextColorProperty}\" To=\"Black\"/\u003e\n                \u003calohakit:AnimateColor TargetProperty=\"{x:Static VisualElement.BackgroundColorProperty}\" To=\"LightGray\"/\u003e\n                \u003calohakit:AnimateDouble TargetProperty=\"{x:Static VisualElement.RotationProperty}\" To=\"0\"/\u003e\n            \u003c/Trigger.ExitActions\u003e\n        \u003c/Trigger\u003e\n    \u003c/Entry.Triggers\u003e\n\u003c/Entry\u003e\n```\n\n![Triggers](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations-triggers.gif)\n\nYou can animate any property of type Int, Double, Color, Thickness or CornerRadius. Available options:\n* AnimateInt\n* AnimateColor\n* AnimateCornerRadius\n* AnimateDouble\n* AnimateThickness\n\n### Progress Animations\n\nSometimes you need to animate something based on a value that changes over time, for example as a a the result of a user interaction.\n\nA common scenario is using a scroll. A parallax effect, etc.\n\n```\n\u003cBoxView \n    BackgroundColor=\"Red\"\n    CornerRadius=\"24, 24, 0, 0\"\u003e\n    \u003cVisualElement.Behaviors\u003e\n        \u003calohakit:AnimateProgressColor\n            TargetProperty=\"VisualElement.BackgroundColor\"\n            Progress=\"{Binding ScrollY, Source={x:Reference ScrollBehavior}}\" \n            Minimum=\"0\"\n            Maximum=\"200\"\n            From=\"Black\"\n            To=\"Red\"/\u003e\n        \u003calohakit:AnimateProgressCornerRadius\n            TargetProperty=\"BoxView.CornerRadius\"\n            Progress=\"{Binding ScrollY, Source={x:Reference ScrollBehavior}}\" \n            Minimum=\"0\"\n            Maximum=\"200\"\n            From=\"24, 24, 0, 0\"\n            To=\"0,0,0,0\"/\u003e\n    \u003c/VisualElement.Behaviors\u003e\n\u003c/BoxView\u003e\n```\n\n![Progress Animations](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Animations/main/images/alohakit-animations-progress.gif)\n\nAvailable options:\n* AnimateProgressInt\n* AnimateProgressColor\n* AnimateProgressCornerRadius\n* AnimateProgressDouble\n* AnimateProgressThickness\n\n## Feedback\n\nPlease use [GitHub issues](https://github.com/jsuarezruiz/AlohaKit.Animations/issues) for questions or comments.\n\n## Copyright and license\n\nCode released under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsuarezruiz%2Falohakit.animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsuarezruiz%2Falohakit.animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsuarezruiz%2Falohakit.animations/lists"}