Skip to content

Commit

Permalink
New animation types and additional functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
@instance-id
instance-id committed May 1, 2022
1 parent 75db4d2 commit 80eb81a
Show file tree
Hide file tree
Showing 55 changed files with 3,930 additions and 171 deletions.
56 changes: 34 additions & 22 deletions Runtime/Animations/ContinuousAnimations.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,44 @@ public static class ContinuousAnimations

// -------------------------------------------------- @HoverBorder
// ---------------------------------------------------------------
/// <summary>
/// Pulse the border of an element between two colors
///
/// ** To help combat your element shifting position slightly when a border is applied on hover,
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
/// so that it is transparent, then keep 'addBorder' parameter as false.
/// </summary>
/// <param name="element">The element in which this function will be applied</param>
/// <param name="color1">Color 1 in which to pulse between</param>
/// <param name="color2">Color 2 in which to pulse between</param>
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
/// <param name="color1DurationMs">The amount of time it takes in milliseconds to complete the first color animation</param>
/// <param name="color2DurationMs">The amount of time it takes in milliseconds to complete the second color animation</param>
/// <param name="addBorder">Adds a border if the element does not have one already</param>
/// <param name="borderStartEndWidth">The width in which the borders should be when displaying</param>
/// <param name="callback">Function that can be called when the animation is completed</param>
/// <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.
/// If only the top and bottom borders are desired to pulse, you would pass new Vector4(0, 1, 0, 1)</param>
public static IVisualElementScheduledItem AnimBorderPulse(this VisualElement element, Color color1, Color color2, Color original = default,
/// <summary>
/// Pulse the border of an element between two colors
///
/// ** To help combat your element shifting position slightly when a border is applied on hover,
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
/// so that it is transparent, then keep 'addBorder' parameter as false.
/// </summary>
/// <example>
/// <code>
/// "#2F569C".FromHex(), "#D2A00C".FromHex()
/// </code>
/// </example>
/// <param name="element">The element in which this function will be applied</param>
/// <param name="color1">Color 1 in which to pulse between</param>
/// <param name="color2">Color 2 in which to pulse between</param>
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
/// <param name="color1DurationMs">The amount of time it takes in milliseconds to complete the first color animation</param>
/// <param name="color2DurationMs">The amount of time it takes in milliseconds to complete the second color animation</param>
/// <param name="addBorder">Adds a border if the element does not have one already</param>
/// <param name="borderStartEndWidth">The width in which the borders should be when displaying</param>
/// <param name="callback">Function that can be called when the animation is completed</param>
/// <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.
/// If only the top and bottom borders are desired to pulse, you would pass new Vector4(0, 1, 0, 1)</param>
/// <param name="repeatedAnim">Pass in a new ScheduledItem object, which will return the animation in order to control it externally</param>
/// <param name="delayBetween">Time in which to delay between each pulse set</param>
public static IVisualElementScheduledItem AnimBorderPulse(
this VisualElement element,
Color color1,
Color color2,
Color original = default,
int color1DurationMs = 1000,
int color2DurationMs = 1000,
bool addBorder = false,
Vector2 borderStartEndWidth = default,
Action callback = null,
Vector4 borderSelection = default,
IVisualElementScheduledItem repeatedAnim = default
IVisualElementScheduledItem repeatedAnim = default,
int delayBetween = 0
)
{
if (borderStartEndWidth == default)
Expand Down Expand Up @@ -148,7 +160,7 @@ void DoCleanup()
// -- via the AnimateTo local function. Once completed --
// -- the AnimateFrom function is called animating back --
// -- to the original color. This is then repeated for --
// -- as long as the mouse is hovered over the target --
// -- until stopped --------------------------------------
void PulseIn(IVisualElementScheduledItem repeated)
{
if (!repeated.isActive) { DoCleanup(); return; }
Expand All @@ -170,7 +182,7 @@ void PulseOut(IVisualElementScheduledItem repeated)
color2DurationMs, () => { if(!repeated.isActive) DoCleanup();}).KeepAlive();
} // @formatter:on

var recurring = color1DurationMs + color2DurationMs + 20;
var recurring = color1DurationMs + color2DurationMs + 20 + delayBetween;

repeatedAnim = element.schedule
.Execute(() => { PulseIn(repeatedAnim); })
Expand Down
36 changes: 32 additions & 4 deletions Runtime/Animations/HoverAnimations.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,28 +111,29 @@ public static void HoverColor<T>(this T target, StyleColor original, Color hover
/// <code>
/// var originalColor = ColorUtil.FromHex("#BABABA");
/// var hoverBGColor = ColorUtil.FromHex("#2F569C");
///
///
/// label.HoverBackground(originalColor, hoverBGColor);
/// </code>
/// </example>>
/// <param name="target">The element in which this function will be applied</param>
/// <param name="original">The original color of the element being changed. Can be obtained and passed via 'visualElement.style.backgroundColor.value'</param>
/// <param name="hoverColor">The color to fade to when element is hovered</param>
/// <param name="animDuration">Transition animation duration when switching between states</param>
/// <param name="condition">Create a condition to pass to this function. Example: bool Condition(VisualElement sRow) => selectedRow == packageListRow;</param>
/// <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>
/// <param name="animate">Whether to animate the transition of the background color</param>
public static void HoverBackground(this VisualElement target, StyleColor original, Color hoverColor, Func<VisualElement, bool> condition = null,
VisualElement conditionElement = null, bool animate = false)
VisualElement conditionElement = null, bool animate = false, int animDuration = 250)
{
var mouseOver = new ValueAnimation<StyleValues>();
var mouseOut = new ValueAnimation<StyleValues>();

if (animate)
{
mouseOver = target.AnimateBackgroundColor(original.value, hoverColor, 250);
mouseOver = target.AnimateBackgroundColor(original.value, hoverColor, animDuration);
mouseOver.KeepAlive();

mouseOut = target.AnimateBackgroundColor(hoverColor, original.value, 250);
mouseOut = target.AnimateBackgroundColor(hoverColor, original.value, animDuration);
mouseOut.KeepAlive();
}

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

#endregion

// -------------------------------------------------- @HoverBorder
// ---------------------------------------------------------------
/// <summary>
/// Adds background hover capability that will not be lost like CSS:hover when programatically setting background color
///
/// ** To help combat your element shifting position slightly when a border is applied on hover,
/// it is a good idea to add a border to your element before hand and just set color to 'initial'
/// so that it is transparent, then keep 'addBorder' parameter as false.
/// </summary>
/// <param name="target">The element in which this function will be applied</param>
/// <param name="startValue"></param>
/// <param name="endValue"></param>
/// <param name="animDuration"></param>
public static void HoverOpacity(this VisualElement target, float startValue, float endValue, int animDuration = 500)
{
target.RegisterCallback<MouseOverEvent>(evt =>
{
target.AnimateOpacity(startValue, endValue, animDuration);
evt.StopPropagation();
});
target.RegisterCallback<MouseOutEvent>(evt =>
{
target.AnimateOpacity(endValue, startValue, animDuration);
evt.StopPropagation();
});
}

// -------------------------------------------------------- @HoverWidth
// -- Animate the width of target element to desired value on hover --
// --------------------------------------------------------------------
Expand Down
Loading

0 comments on commit 80eb81a

Please sign in to comment.