Skip to content

Commit bccc7e9

Browse files
mckaragozmckaragoz
authored
MudAnimate Component (#4)
* Initialize * Cleanup
1 parent 91deee1 commit bccc7e9

File tree

13 files changed

+480
-12
lines changed

13 files changed

+480
-12
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<Company>CodeBeam</Company>
1111
<Description>MudBlazor extension components from contributors.</Description>
1212
<Copyright>CodeBeam OpenSource MIT</Copyright>
13-
<PackageIcon>CodeBeam Purple.jpg</PackageIcon>
13+
<PackageIcon>Mud_Secondary.png</PackageIcon>
1414
<PackageProjectUrl>https://mudextensions.azurewebsites.net</PackageProjectUrl>
1515
<RepositoryUrl>https://github.com/CodeBeamOrg/CodeBeam.MudExtensions</RepositoryUrl>
1616
<PackageTags>Blazor; MudBlazor; Component; Extension;</PackageTags>
@@ -33,20 +33,16 @@
3333
<Exec Command="dotnet tool run webcompiler -r Styles/MudExtensions.scss -c excubowebcompiler.json" StandardOutputImportance="high" />
3434
</Target>
3535

36-
<ItemGroup>
37-
<None Include="..\..\..\..\Desktop\Yazılım - Tasarım\CodeBeam\CodeBeam Purple.jpg">
38-
<Pack>True</Pack>
39-
<PackagePath>\</PackagePath>
40-
</None>
41-
</ItemGroup>
42-
4336
<ItemGroup>
4437
<Content Remove="compilerconfig.json" />
4538
<Content Remove="excubowebcompiler.json" />
4639
</ItemGroup>
4740

4841
<ItemGroup>
49-
<Folder Include="wwwroot\" />
42+
<None Include="wwwroot\Mud_Secondary.png">
43+
<Pack>True</Pack>
44+
<PackagePath>\</PackagePath>
45+
</None>
5046
</ItemGroup>
5147

5248
</Project>

‎CodeBeam.MudExtensions/Components/Animate/MudAnimate.razor‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
@namespace MudExtensions
2+
@using System.Text
3+
@using MudExtensions.Enums
4+
@using MudExtensions.Utilities
5+
@inherits MudComponentBase
6+
7+
@code{
8+
Guid _guid = new Guid();
9+
10+
/// <summary>
11+
/// Supports id and class selection. Use "#idName" for id selectors (ex. <Component id="idName" />) or ".idName" for class selectors (ex. <Component Class="idName" />). Leave it null or empty to effect all scrollbars.
12+
/// </summary>
13+
[Parameter]
14+
[Category(CategoryTypes.Item.Behavior)]
15+
public string Selector { get; set; }
16+
17+
/// <summary>
18+
/// The predefined animation type that runs.
19+
/// </summary>
20+
[Parameter]
21+
[Category(CategoryTypes.Item.Appearance)]
22+
public AnimationType AnimationType { get; set; }
23+
24+
/// <summary>
25+
/// The primary value depends on animation type.
26+
/// </summary>
27+
[Parameter]
28+
[Category(CategoryTypes.Item.Appearance)]
29+
public double Value { get; set; }
30+
31+
/// <summary>
32+
/// The secondary value that sets the start value of animation.
33+
/// </summary>
34+
[Parameter]
35+
[Category(CategoryTypes.Item.Appearance)]
36+
public double? ValueSecondary { get; set; }
37+
38+
/// <summary>
39+
/// Sets how long the animation will last.
40+
/// </summary>
41+
[Parameter]
42+
[Category(CategoryTypes.Item.Appearance)]
43+
public double Duration { get; set; } = 1;
44+
45+
/// <summary>
46+
/// The time before animation starts.
47+
/// </summary>
48+
[Parameter]
49+
[Category(CategoryTypes.Item.Appearance)]
50+
public double Delay { get; set; } = 0;
51+
52+
/// <summary>
53+
/// If true, amination runs when hover.
54+
/// </summary>
55+
[Parameter]
56+
[Category(CategoryTypes.Item.Appearance)]
57+
public bool Hover { get; set; }
58+
59+
/// <summary>
60+
/// If true, amination runs contuniously.
61+
/// </summary>
62+
[Parameter]
63+
[Category(CategoryTypes.Item.Appearance)]
64+
public bool Infinite { get; set; }
65+
66+
/// <summary>
67+
/// If true, animation pauses. Set if false again to continue where it pauses.
68+
/// </summary>
69+
[Parameter]
70+
[Category(CategoryTypes.Item.Appearance)]
71+
public bool Paused { get; set; }
72+
73+
/// <summary>
74+
/// How many times the animation repeats in one run. If the value is 0, the animation doesn't run.
75+
/// </summary>
76+
[Parameter]
77+
[Category(CategoryTypes.Item.Appearance)]
78+
public int IterationCount { get; set; } = 1;
79+
80+
/// <summary>
81+
/// The speed curve of the animation.
82+
/// </summary>
83+
[Parameter]
84+
[Category(CategoryTypes.Item.Appearance)]
85+
public AnimationTiming AnimationTiming { get; set; } = AnimationTiming.EaseInOut;
86+
87+
/// <summary>
88+
/// The running line of the animation.
89+
/// </summary>
90+
[Parameter]
91+
[Category(CategoryTypes.Item.Appearance)]
92+
public AnimationDirection AnimationDirection { get; set; } = AnimationDirection.Normal;
93+
94+
/// <summary>
95+
/// Determines the styles which the element has. Forwards for last keyframe, backwards for first keyframe.
96+
/// </summary>
97+
[Parameter]
98+
[Category(CategoryTypes.Item.Appearance)]
99+
public AnimationFillMode AnimationFillMode { get; set; } = AnimationFillMode.None;
100+
101+
/// <summary>
102+
/// Animation keyframe with plain string. For advanced users.
103+
/// </summary>
104+
[Parameter]
105+
[Category(CategoryTypes.Item.Appearance)]
106+
public string KeyframeAdvanced { get; set; }
107+
108+
109+
bool _show = true;
110+
public async Task Refresh()
111+
{
112+
_show = false;
113+
await Task.Delay(1);
114+
await InvokeAsync(StateHasChanged);
115+
_show = true;
116+
await Task.Delay(1);
117+
await InvokeAsync(StateHasChanged);
118+
}
119+
120+
protected string GetKeyframeCode()
121+
{
122+
if (!string.IsNullOrEmpty(KeyframeAdvanced))
123+
{
124+
return KeyframeAdvanced;
125+
}
126+
127+
List<string> valueList = new List<string>() { ValueSecondary?.ToInvariantString() ?? "0", Value.ToInvariantString() };
128+
List<Tuple<string, string>> valueListTuple = new List<Tuple<string, string>>() { new Tuple<string, string>(ValueSecondary?.ToInvariantString() ?? "0", "0"), new Tuple<string, string>(Value.ToInvariantString(), "0.65") };
129+
130+
if (AnimationType == AnimationType.Rotate)
131+
{
132+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.Rotate);
133+
}
134+
else if (AnimationType == AnimationType.Fade)
135+
{
136+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.Fade);
137+
}
138+
else if (AnimationType == AnimationType.Flip)
139+
{
140+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.Flip);
141+
}
142+
else if (AnimationType == AnimationType.Scale)
143+
{
144+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.Scale);
145+
}
146+
else if (AnimationType == AnimationType.SlideX)
147+
{
148+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.SlideX);
149+
}
150+
else if (AnimationType == AnimationType.SlideY)
151+
{
152+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.SlideY);
153+
}
154+
else if (AnimationType == AnimationType.RotateDiagonal)
155+
{
156+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.RotateDiagonal);
157+
}
158+
else if (AnimationType == AnimationType.Blur)
159+
{
160+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.Blur);
161+
}
162+
else if (AnimationType == AnimationType.Shadow)
163+
{
164+
return KeyframeBuilder.Build(2, valueListTuple, KeyframePreset.Shadow);
165+
}
166+
else if (AnimationType == AnimationType.ShadowInset)
167+
{
168+
return KeyframeBuilder.Build(2, valueListTuple, KeyframePreset.ShadowInset);
169+
}
170+
else if (AnimationType == AnimationType.TextShadow)
171+
{
172+
return KeyframeBuilder.Build(2, valueListTuple, KeyframePreset.TextShadow);
173+
}
174+
else if (AnimationType == AnimationType.TextSpacing)
175+
{
176+
return KeyframeBuilder.Build(2, valueList, KeyframePreset.TextSpacing);
177+
}
178+
179+
return $"0% {{ -webkit-transform: rotate({ValueSecondary ?? 0}); transform: rotate({ValueSecondary ?? 0});}} 100% {{ -webkit-transform: rotate({Value}deg); transform: rotate({Value}deg);}}";
180+
}
181+
182+
public string AnimationName => $"mud-ani{Selector?.Remove(0, 1)}-{_guid.ToString()}";
183+
184+
public string KeyframeCode => GetKeyframeCode();
185+
}
186+
187+
<style>
188+
@(Selector)@(Hover ? ":hover" : null) {
189+
@if (_show == true)
190+
{
191+
@($"animation: {AnimationName} {Duration.ToInvariantString()}s {AnimationTiming.ToDescriptionString()} {(Delay != 0 ? Delay.ToInvariantString() + "s" : null)} {(Infinite ? "infinite" : IterationCount.ToString())} {AnimationDirection.ToDescriptionString()} {(Paused ? "paused" : null)} {AnimationFillMode.ToDescriptionString()};");
192+
}
193+
else
194+
{
195+
@("animation: none;");
196+
}
197+
}
198+
199+
@@keyframes @(AnimationName) {
200+
@GetKeyframeCode()
201+
}
202+
</style>

‎CodeBeam.MudExtensions/Enums/AnimationDirection.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum AnimationDirection
6+
{
7+
[Description("normal")]
8+
Normal,
9+
[Description("reverse")]
10+
Reverse,
11+
[Description("alternate")]
12+
Alternate,
13+
[Description("alternate-reverse")]
14+
AlternateReverse,
15+
}
16+
}

‎CodeBeam.MudExtensions/Enums/AnimationFillMode.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum AnimationFillMode
6+
{
7+
[Description("none")]
8+
None,
9+
[Description("forwards")]
10+
Forwards,
11+
[Description("backwards")]
12+
Backwards,
13+
[Description("both")]
14+
Both,
15+
}
16+
}

‎CodeBeam.MudExtensions/Enums/AnimationTiming.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum AnimationTiming
6+
{
7+
[Description("ease")]
8+
Ease,
9+
[Description("linear")]
10+
Linear,
11+
[Description("ease-in")]
12+
EaseIn,
13+
[Description("ease-out")]
14+
EaseOut,
15+
[Description("ease-in-out")]
16+
EaseInOut,
17+
}
18+
}

‎CodeBeam.MudExtensions/Enums/AnimationType.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions.Enums
4+
{
5+
public enum AnimationType
6+
{
7+
[Description("blur")]
8+
Blur,
9+
[Description("fade")]
10+
Fade,
11+
[Description("flip")]
12+
Flip,
13+
[Description("rotate")]
14+
Rotate,
15+
[Description("rotate-diagonal")]
16+
RotateDiagonal,
17+
[Description("scale")]
18+
Scale,
19+
[Description("shadow")]
20+
Shadow,
21+
[Description("shadow-inset")]
22+
ShadowInset,
23+
[Description("slide-x")]
24+
SlideX,
25+
[Description("slide-y")]
26+
SlideY,
27+
[Description("text-shadow")]
28+
TextShadow,
29+
[Description("text-spacing")]
30+
TextSpacing,
31+
}
32+
}

‎CodeBeam.MudExtensions/Utilities/KeyframeBuilder.cs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Text.RegularExpressions;
6+
using System.Threading.Tasks;
7+
8+
namespace MudExtensions.Utilities
9+
{
10+
public class KeyframeBuilder
11+
{
12+
public static string Build(int ticks, List<string> values, string property, string defaultValue = "")
13+
{
14+
StringBuilder sb = new ();
15+
for (int i = 0; i < ticks; i++)
16+
{
17+
sb.Append($"{(i == 0 ? 0 : 100/i)}%");
18+
sb.Append($"{{ {property.Replace("-val-", values[i])} }}");
19+
}
20+
return sb.ToString();
21+
}
22+
23+
public static string Build(int ticks, List<Tuple<string, string>> values, string property, string defaultValue = "")
24+
{
25+
StringBuilder sb = new();
26+
for (int i = 0; i < ticks; i++)
27+
{
28+
sb.Append($"{(i == 0 ? 0 : 100 / i)}%");
29+
sb.Append($"{{ {property.Replace("-val1-", values[i].Item1).Replace("-val2-", values[i].Item2)} }}");
30+
}
31+
return sb.ToString();
32+
}
33+
}
34+
}

‎CodeBeam.MudExtensions/Utilities/KeyframePreset.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Text.RegularExpressions;
6+
using System.Threading.Tasks;
7+
8+
namespace MudExtensions.Utilities
9+
{
10+
public static class KeyframePreset
11+
{
12+
// When making presets use "-val-" keyword to change it to real values with KeyframeBuilder.
13+
public static string Blur { get; set; } = "-webkit-filter: blur(-val-px); filter: blur(-val-px);";
14+
public static string Fade { get; set; } = "opacity: -val-;";
15+
public static string Flip { get; set; } = "-webkit-transform: rotateX(-val-deg); transform: rotateX(-val-deg);";
16+
public static string Rotate { get; set; } = "transform: rotate(-val-deg); transform: -webkit-rotate(-val-deg);";
17+
public static string RotateDiagonal { get; set; } = "-webkit-transform: rotate3d(1, 1, 0, -val-deg); transform: rotate3d(1, 1, 0, -val-deg);";
18+
public static string Scale { get; set; } = "-webkit-transform: scale(-val-); transform: scale(-val-);";
19+
public static string Shadow { get; set; } = "-webkit-box-shadow: 0 0 -val1-px 0 rgba(0, 0, 0, -val2-); box-shadow: 0 0 -val1-px 0 rgba(0, 0, 0, -val2-);";
20+
public static string ShadowInset { get; set; } = "-webkit-box-shadow: inset 0 0 -val1-px 0 rgba(0, 0, 0, -val2-); box-shadow: inset 0 0 -val1-px 0 rgba(0, 0, 0, -val2-);";
21+
public static string SlideX { get; set; } = "-webkit-transform: translateX(-val-px); transform: translateX(-val-px);";
22+
public static string SlideY { get; set; } = "-webkit-transform: translateY(-val-px); transform: translateY(-val-px);";
23+
public static string TextShadow { get; set; } = "text-shadow: 0 0 -val1-px rgba(0, 0, 0, -val2-);";
24+
public static string TextSpacing { get; set; } = "letter-spacing: -val-em;";
25+
}
26+
}

‎CodeBeam.MudExtensions/wwwroot/Mud_Secondary.png‎

4.45 KB
Loading

‎CodeBeamMudExtensions.sln‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ Microsoft Visual Studio Solution File, Format Version 12.00
33
# Visual Studio Version 17
44
VisualStudioVersion = 17.3.32922.545
55
MinimumVisualStudioVersion = 10.0.40219.1
6-
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CodeBeam.MudExtensions", "CodeBeam.MudExtensions\CodeBeam.MudExtensions.csproj", "{542668A8-79D0-4697-9861-87EC5266EA65}"
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "CodeBeam.MudExtensions", "CodeBeam.MudExtensions\CodeBeam.MudExtensions.csproj", "{542668A8-79D0-4697-9861-87EC5266EA65}"
77
EndProject
8-
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ComponentViewer", "ComponentViewer\ComponentViewer.csproj", "{F1B30028-B255-4668-81E8-C7D25ECD33A1}"
8+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ComponentViewer", "ComponentViewer\ComponentViewer.csproj", "{F1B30028-B255-4668-81E8-C7D25ECD33A1}"
99
EndProject
10-
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ComponentViewer.Wasm", "ComponentViewer.Wasm\ComponentViewer.Wasm.csproj", "{924E72FF-1B0D-4465-9805-AB7B9D114113}"
10+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ComponentViewer.Wasm", "ComponentViewer.Wasm\ComponentViewer.Wasm.csproj", "{924E72FF-1B0D-4465-9805-AB7B9D114113}"
1111
EndProject
1212
Global
1313
GlobalSection(SolutionConfigurationPlatforms) = preSolution

0 commit comments

Comments
 (0)