Skip to content

Commit a1569ea

Browse files
MarvinKlein1508MarvinKlein1508
authored
Merge pull request #89 from Community-Toolkit-for-Fluent-UI-Blazor/feat/fluentcx-animation
Adds FluentCxAnimation to provide some animation for UI elements
2 parents 172377f + 30f69a0 commit a1569ea

File tree

132 files changed

+15760
-6990
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+15760
-6990
lines changed

‎examples/demo/FluentUI.Demo.Shared/FluentUI.Blazor.Community.Components.xml‎

Lines changed: 8270 additions & 6150 deletions
Large diffs are not rendered by default.

‎examples/demo/FluentUI.Demo.Shared/Layout/DemoNavProvider.cs‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,23 @@ public DemoNavProvider()
8080
gap: "10px",
8181
children:
8282
[
83-
new NavLink(
84-
href: "artisticscatter",
83+
new NavGroup(
8584
icon: new Icons.Regular.Size20.FilmstripImage(),
86-
title: "Artistic Scatter"
85+
title: "Animations",
86+
gap: "10px",
87+
expanded: false,
88+
children: [
89+
new NavLink(
90+
href: "animations-overview",
91+
icon: new Icons.Regular.Size20.FilmstripImage(),
92+
title: "Overview"
93+
),
94+
new NavLink(
95+
href: "animation-default",
96+
icon: new Icons.Regular.Size20.FilmstripImage(),
97+
title: "Default"
98+
)
99+
]
87100
),
88101
new NavLink(
89102
href: "cookies",

‎examples/demo/FluentUI.Demo.Shared/Pages/Animations/AnimationDefaultPage.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@page "/animation-default"
2+
@using FluentUI.Demo.Shared.Pages.Animations.Examples
3+
4+
<DemoSection Title="Default Animation Layout" Component="typeof(AnimationDefault)">
5+
<Description>
6+
<p>
7+
This example demonstrates all the available layouts.
8+
</p>
9+
</Description>
10+
</DemoSection>
11+

‎examples/demo/FluentUI.Demo.Shared/Pages/Animations/AnimationPage.razor‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@page "/animations-overview"
2+
@using FluentUI.Demo.Shared.Pages.Animations.Examples
3+
4+
<h1>Animations</h1>
5+
6+
The <c>FluentCxAnimation</c> component provides a way to animate a collection of items using different layouts.
7+
Each item is represented by an <c>AnimationItem</c> component, which can contain any content you want to animate.
8+
The layout determines how the items are arranged and animated.
9+
You can group multiple <c>AnimationItem</c> components within a <c>AnimationGroup</c> component.
10+
Each <c>AnimationGroup</c> component can have its own layout, allowing you to create complex animations with multiple groups of items.
11+
You can choose from several built-in layouts or create your own custom layout by implementing the <c>AnimatedLayerBase</c> base class.
12+
You can assemble multiple layouts together using the <c>MorphingLayout</c> component to create more complex animations.
13+
Using <c>MorphingLayout</c> all layouts inside it will use the animation settings of the parent <c>MorphingLayout</c> component.
14+
The <c>FluentCxAnimation</c> component can start, stop, pause, resume the animation. The animation can also be set to loop or play once.
15+
16+
<h2>Easing</h2>
17+
18+
<p>
19+
Easing functions determine the rate of change of a parameter over time, allowing for more natural and visually appealing animations.
20+
The <c>AnimatedLayoutBase</c> component supports several easing functions, which can be set using the <c>EasingFunction</c> and <c>EasingMode</c> parameters.
21+
These easing functions are available :
22+
</p>
23+
24+
25+
<ul>
26+
<li><c>Linear</c>: A constant speed from start to finish.</li>
27+
<li><c>Quadratic</c>: Accelerates and decelerates using a quadratic curve.</li>
28+
<li><c>Cubic</c>: Accelerates and decelerates using a cubic curve.</li>
29+
<li><c>Quartic</c>: Accelerates and decelerates using a quartic curve.</li>
30+
<li><c>Quintic</c>: Accelerates and decelerates using a quintic curve.</li>
31+
<li><c>Exponential</c>: Accelerates and decelerates exponentially.</li>
32+
<li><c>Circular</c>: Accelerates and decelerates in a circular motion.</li>
33+
<li><c>Bounce</c>: Simulates a bouncing effect.</li>
34+
<li><c>Elastic</c>: Simulates an elastic effect, overshooting the target before settling.</li>
35+
<li><c>Back</c>: Overshoots the target and then comes back.</li>
36+
<li><c>Bounce</c>: Simulates a bouncing effect.</li>
37+
<li><c>Circular</c>: Accelerates and decelerates in a circular motion.</li>
38+
</ul>
39+
40+
<p>And you can choose the easing mode:</p>
41+
42+
<ul>
43+
<li><c>In</c>: The easing function is applied at the beginning of the animation.</li>
44+
<li><c>Out</c>: The easing function is applied at the end of the animation.</li>
45+
<li><c>InOut</c>: The easing function is applied at both the beginning and end of the animation.</li>
46+
</ul>
47+
48+
<h2>Layout</h2>
49+
50+
The layout can be set using the <c>Layout</c> parameter of the <c>FluentCxAnimation</c> component or the <c>Layout</c> parameter of the <c>AnimationGroup</c> component.
51+
All layouts inherit from the <c>AnimatedLayerBase</c> base class and can be used to arrange and animate the items within the <c>FluentCxAnimation</c> component.
52+
The following layouts are available:
53+
54+
<ul>
55+
<li><c>BindStackLayout</c>: Arranges items in a stack, either vertically or horizontally, with configurable spacing.</li>
56+
<li><c>CascadeLayout</c>: Arranges items in a cascading manner, where each item is slightly offset from the previous one.</li>
57+
<li><c>ChaosLayout</c>: Randomly positions items within the available space.</li>
58+
<li><c>FanLayout</c>: Arranges items in a fan shape, radiating out from a central point.</li>
59+
<li><c>FloatLayout</c>: Allows items to float freely within the available space.</li>
60+
<li><c>FlowerLayout</c>: Arranges items in a flower-like pattern.</li>
61+
<li><c>GalaxyLayout</c>: Arranges items in a spiral galaxy pattern.</li>
62+
<li><c>GoldenSpiralLayout</c>: Arranges items in a golden spiral pattern.</li>
63+
<li><c>GridLayout</c>: Arranges items in a grid with configurable rows and columns.</li>
64+
<li><c>HeartLayout</c>: Arranges items in a heart shape.</li>
65+
<li><c>HelixLayout</c>: Arranges items in a helical pattern.</li>
66+
<li><c>MagnetLayout</c>: Attracts items towards a central point, simulating magnetic attraction.</li>
67+
<li><c>MorphingLayout</c>: Allows you to combine multiple layouts together to create complex animations. All child layouts will use the animation settings of the parent MorphingLayout component.</li>
68+
<li><c>OrbitLayout</c>: Arranges items in an orbit around a central point.</li>
69+
<li><c>PinLayout</c>: Pins items to specific locations within the available space.</li>
70+
<li><c>PulseLayout</c>: Creates a pulsing effect by expanding and contracting the arrangement of items.</li>
71+
<li><c>SnakeLayout</c>: Arranges items in a snake-like pattern that can move and change direction.</li>
72+
<li><c>SpiralGalaxyLayout</c>: Similar to GalaxyLayout but with a more pronounced spiral effect.</li>
73+
<li><c>SpiralLayout</c>: Arranges items in a simple spiral pattern.</li>
74+
<li><c>StackedRotatingLayout</c>: Stacks items on top of each other and rotates them around a central point.</li>
75+
<li><c>StackLayout</c>: Arranges items in a stack, either vertically or horizontally, without spacing.</li>
76+
<li><c>SunburstLayout</c>: Arranges items in a sunburst pattern, radiating out from a central point.</li>
77+
<li><c>VortexLayout</c>: Arranges items in a vortex pattern, swirling around a central point.</li>
78+
<li><c>WaveLayout</c>: Arranges items in a wave-like pattern.</li>
79+
<li><c>ZigZagLayout</c>: Arranges items in a zigzag pattern.</li>
80+
</ul>
81+
82+
<h2 id="documentation">Documentation</h2>
83+
84+
<ApiDocumentation Component="typeof(FluentUI.Blazor.Community.Components.FluentCxAnimation)" />
85+
<ApiDocumentation Component="typeof(FluentUI.Blazor.Community.Components.AnimationItem)" />
86+
<ApiDocumentation Component="typeof(FluentUI.Blazor.Community.Components.AnimationGroup)" />
87+
<ApiDocumentation Component="typeof(BindStackLayout)" />
88+
<ApiDocumentation Component="typeof(CascadeLayout)" />
89+
<ApiDocumentation Component="typeof(ChaosLayout)" />
90+
<ApiDocumentation Component="typeof(FanLayout)" />
91+
<ApiDocumentation Component="typeof(FloatLayout)" />
92+
<ApiDocumentation Component="typeof(FlowerLayout)" />
93+
<ApiDocumentation Component="typeof(GalaxyLayout)" />
94+
<ApiDocumentation Component="typeof(GoldenSpiralLayout)" />
95+
<ApiDocumentation Component="typeof(GridLayout)" />
96+
<ApiDocumentation Component="typeof(HeartLayout)" />
97+
<ApiDocumentation Component="typeof(HelixLayout)" />
98+
<ApiDocumentation Component="typeof(MagnetLayout)" />
99+
<ApiDocumentation Component="typeof(MorphingLayout)" />
100+
<ApiDocumentation Component="typeof(OrbitLayout)" />
101+
<ApiDocumentation Component="typeof(PinLayout)" />
102+
<ApiDocumentation Component="typeof(PulseLayout)" />
103+
<ApiDocumentation Component="typeof(SnakeLayout)" />
104+
<ApiDocumentation Component="typeof(SpiralGalaxyLayout)" />
105+
<ApiDocumentation Component="typeof(SpiralLayout)" />
106+
<ApiDocumentation Component="typeof(StackedRotatingLayout)" />
107+
<ApiDocumentation Component="typeof(StackLayout)" />
108+
<ApiDocumentation Component="typeof(SunburstLayout)" />
109+
<ApiDocumentation Component="typeof(WaveLayout)" />
110+
<ApiDocumentation Component="typeof(ZigZagLayout)" />
111+
112+
113+

0 commit comments

Comments
 (0)