Skip to content

Commit 80eb81a

Browse files
instance-idinstance-id
committed
New animation types and additional functionality.
1 parent 75db4d2 commit 80eb81a

Some content is hidden

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

55 files changed

+3930
-171
lines changed

‎Runtime/Animations/ContinuousAnimations.cs‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,44 @@ public static class ContinuousAnimations
1818

1919
// -------------------------------------------------- @HoverBorder
2020
// ---------------------------------------------------------------
21-
/// <summary>
22-
/// Pulse the border of an element between two colors
23-
///
24-
/// ** To help combat your element shifting position slightly when a border is applied on hover,
25-
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
26-
/// so that it is transparent, then keep 'addBorder' parameter as false.
27-
/// </summary>
28-
/// <param name="element">The element in which this function will be applied</param>
29-
/// <param name="color1">Color 1 in which to pulse between</param>
30-
/// <param name="color2">Color 2 in which to pulse between</param>
31-
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
32-
/// <param name="color1DurationMs">The amount of time it takes in milliseconds to complete the first color animation</param>
33-
/// <param name="color2DurationMs">The amount of time it takes in milliseconds to complete the second color animation</param>
34-
/// <param name="addBorder">Adds a border if the element does not have one already</param>
35-
/// <param name="borderStartEndWidth">The width in which the borders should be when displaying</param>
36-
/// <param name="callback">Function that can be called when the animation is completed</param>
37-
/// <param name="borderSelection">The parameters of the Vector4(1-4) represent which borders should have their colors changed: 1(x) = left, 2(y) = top, 3(z) = right, 4(w) = bottom.
38-
/// If only the top and bottom borders are desired to pulse, you would pass new Vector4(0, 1, 0, 1)</param>
39-
public static IVisualElementScheduledItem AnimBorderPulse(this VisualElement element, Color color1, Color color2, Color original = default,
21+
/// <summary>
22+
/// Pulse the border of an element between two colors
23+
///
24+
/// ** To help combat your element shifting position slightly when a border is applied on hover,
25+
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
26+
/// so that it is transparent, then keep 'addBorder' parameter as false.
27+
/// </summary>
28+
/// <example>
29+
/// <code>
30+
/// "#2F569C".FromHex(), "#D2A00C".FromHex()
31+
/// </code>
32+
/// </example>
33+
/// <param name="element">The element in which this function will be applied</param>
34+
/// <param name="color1">Color 1 in which to pulse between</param>
35+
/// <param name="color2">Color 2 in which to pulse between</param>
36+
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
37+
/// <param name="color1DurationMs">The amount of time it takes in milliseconds to complete the first color animation</param>
38+
/// <param name="color2DurationMs">The amount of time it takes in milliseconds to complete the second color animation</param>
39+
/// <param name="addBorder">Adds a border if the element does not have one already</param>
40+
/// <param name="borderStartEndWidth">The width in which the borders should be when displaying</param>
41+
/// <param name="callback">Function that can be called when the animation is completed</param>
42+
/// <param name="borderSelection">The parameters of the Vector4(1-4) represent which borders should have their colors changed: 1(x) = left, 2(y) = top, 3(z) = right, 4(w) = bottom.
43+
/// If only the top and bottom borders are desired to pulse, you would pass new Vector4(0, 1, 0, 1)</param>
44+
/// <param name="repeatedAnim">Pass in a new ScheduledItem object, which will return the animation in order to control it externally</param>
45+
/// <param name="delayBetween">Time in which to delay between each pulse set</param>
46+
public static IVisualElementScheduledItem AnimBorderPulse(
47+
this VisualElement element,
48+
Color color1,
49+
Color color2,
50+
Color original = default,
4051
int color1DurationMs = 1000,
4152
int color2DurationMs = 1000,
4253
bool addBorder = false,
4354
Vector2 borderStartEndWidth = default,
4455
Action callback = null,
4556
Vector4 borderSelection = default,
46-
IVisualElementScheduledItem repeatedAnim = default
57+
IVisualElementScheduledItem repeatedAnim = default,
58+
int delayBetween = 0
4759
)
4860
{
4961
if (borderStartEndWidth == default)
@@ -148,7 +160,7 @@ void DoCleanup()
148160
// -- via the AnimateTo local function. Once completed --
149161
// -- the AnimateFrom function is called animating back --
150162
// -- to the original color. This is then repeated for --
151-
// -- as long as the mouse is hovered over the target --
163+
// -- until stopped --------------------------------------
152164
void PulseIn(IVisualElementScheduledItem repeated)
153165
{
154166
if (!repeated.isActive) { DoCleanup(); return; }
@@ -170,7 +182,7 @@ void PulseOut(IVisualElementScheduledItem repeated)
170182
color2DurationMs, () => { if(!repeated.isActive) DoCleanup();}).KeepAlive();
171183
} // @formatter:on
172184

173-
var recurring = color1DurationMs + color2DurationMs + 20;
185+
var recurring = color1DurationMs + color2DurationMs + 20 + delayBetween;
174186

175187
repeatedAnim = element.schedule
176188
.Execute(() => { PulseIn(repeatedAnim); })

‎Runtime/Animations/HoverAnimations.cs‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,28 +111,29 @@ public static void HoverColor<T>(this T target, StyleColor original, Color hover
111111
/// <code>
112112
/// var originalColor = ColorUtil.FromHex("#BABABA");
113113
/// var hoverBGColor = ColorUtil.FromHex("#2F569C");
114-
///
114+
///
115115
/// label.HoverBackground(originalColor, hoverBGColor);
116116
/// </code>
117117
/// </example>>
118118
/// <param name="target">The element in which this function will be applied</param>
119119
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
120120
/// <param name="hoverColor">The color to fade to when element is hovered</param>
121+
/// <param name="animDuration">Transition animation duration when switching between states</param>
121122
/// <param name="condition">Create a condition to pass to this function. Example: bool Condition(VisualElement sRow) => selectedRow == packageListRow;</param>
122123
/// <param name="conditionElement">The element in which the optional condition will be evaluated. Ex. in the example of 'bool Condition(VisualElement sRow) => selectedRow == packageListRow;', the conditionalElement would be 'VisualElement selectedRow'</param>
123124
/// <param name="animate">Whether to animate the transition of the background color</param>
124125
public static void HoverBackground(this VisualElement target, StyleColor original, Color hoverColor, Func<VisualElement, bool> condition = null,
125-
VisualElement conditionElement = null, bool animate = false)
126+
VisualElement conditionElement = null, bool animate = false, int animDuration = 250)
126127
{
127128
var mouseOver = new ValueAnimation<StyleValues>();
128129
var mouseOut = new ValueAnimation<StyleValues>();
129130

130131
if (animate)
131132
{
132-
mouseOver = target.AnimateBackgroundColor(original.value, hoverColor, 250);
133+
mouseOver = target.AnimateBackgroundColor(original.value, hoverColor, animDuration);
133134
mouseOver.KeepAlive();
134135

135-
mouseOut = target.AnimateBackgroundColor(hoverColor, original.value, 250);
136+
mouseOut = target.AnimateBackgroundColor(hoverColor, original.value, animDuration);
136137
mouseOut.KeepAlive();
137138
}
138139

@@ -430,6 +431,33 @@ void PulseOut(in ValueAnimation<StyleValues> pulse)
430431

431432
#endregion
432433

434+
// -------------------------------------------------- @HoverBorder
435+
// ---------------------------------------------------------------
436+
/// <summary>
437+
/// Adds background hover capability that will not be lost like CSS:hover when programatically setting background color
438+
///
439+
/// ** To help combat your element shifting position slightly when a border is applied on hover,
440+
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
441+
/// so that it is transparent, then keep 'addBorder' parameter as false.
442+
/// </summary>
443+
/// <param name="target">The element in which this function will be applied</param>
444+
/// <param name="startValue"></param>
445+
/// <param name="endValue"></param>
446+
/// <param name="animDuration"></param>
447+
public static void HoverOpacity(this VisualElement target, float startValue, float endValue, int animDuration = 500)
448+
{
449+
target.RegisterCallback<MouseOverEvent>(evt =>
450+
{
451+
target.AnimateOpacity(startValue, endValue, animDuration);
452+
evt.StopPropagation();
453+
});
454+
target.RegisterCallback<MouseOutEvent>(evt =>
455+
{
456+
target.AnimateOpacity(endValue, startValue, animDuration);
457+
evt.StopPropagation();
458+
});
459+
}
460+
433461
// -------------------------------------------------------- @HoverWidth
434462
// -- Animate the width of target element to desired value on hover --
435463
// --------------------------------------------------------------------

0 commit comments

Comments
 (0)