Class TweenVisualElementExtensions
Provides extension methods for animating UI Toolkit UnityEngine.UIElements.VisualElement styles using the Scylla tween system.
Covers opacity, translation, scale, rotation, background and text color, and explicit width and height.
All methods return a pre-configured tween instance sourced from
TweenPool. The tween is not started automatically -
call Play() or PlayManaged(ITween)
on the returned instance to begin playback. The start value is captured
lazily from the element at the moment playback begins, unless you
override it with a SetFrom call before playing.
Every tween sets the element as its target, so
ScyllaTween.KillTweensOf(element) stops everything animating it.
Do that when the element leaves its panel; a tween that outlives its
element keeps writing styles nothing will ever draw.
USS transitions are the cheaper choice for a simple state change on a single property. Reach for these when the motion is sequenced, eased in a way USS cannot express, or driven from code that already owns the timing.
Inherited Members
Namespace: Scylla.Core.Util.Tween
Assembly: ScyllaCore.dll
Syntax
public static class TweenVisualElementExtensionsMethods
TweenBackgroundColor(VisualElement, Color, float)
Animates the element's background color.
Declaration
public static TweenColor TweenBackgroundColor(this VisualElement element, Color endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| Color | endValue | The target background color. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenColor | The pooled tween, not yet playing. |
TweenFadeIn(VisualElement, float)
Animates the element's opacity from fully transparent to fully opaque.
Declaration
public static TweenFloat TweenFadeIn(this VisualElement element, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
TweenFadeOut(VisualElement, float)
Animates the element's opacity to fully transparent.
Declaration
public static TweenFloat TweenFadeOut(this VisualElement element, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
TweenHeight(VisualElement, float, float)
Animates the element's explicit height in points.
Declaration
public static TweenFloat TweenHeight(this VisualElement element, float endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | endValue | The target height in points. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
Remarks
As with TweenWidth(VisualElement, float, float), this participates in layout and moves the element's siblings while it runs.
TweenOpacity(VisualElement, float, float)
Animates the element's opacity to a target value.
Declaration
public static TweenFloat TweenOpacity(this VisualElement element, float endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | endValue | The target opacity, normally in the range [0, 1]. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
TweenRotate(VisualElement, float, float)
Animates the element's rotation in degrees about its transform origin.
Declaration
public static TweenFloat TweenRotate(this VisualElement element, float endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | endValue | The target rotation in degrees. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
TweenScale(VisualElement, float, float)
Animates the element's uniform scale about its transform origin.
Declaration
public static TweenVector2 TweenScale(this VisualElement element, float endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | endValue | The target scale applied to both axes. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenVector2 | The pooled tween, not yet playing. |
TweenScale(VisualElement, Vector2, float)
Animates the element's scale about its transform origin.
Declaration
public static TweenVector2 TweenScale(this VisualElement element, Vector2 endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| Vector2 | endValue | The target scale, where one is unscaled. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenVector2 | The pooled tween, not yet playing. |
TweenTextColor(VisualElement, Color, float)
Animates the element's text color.
Declaration
public static TweenColor TweenTextColor(this VisualElement element, Color endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| Color | endValue | The target text color. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenColor | The pooled tween, not yet playing. |
TweenTranslate(VisualElement, Vector2, float)
Animates the element's translation, in points, relative to its laid-out position.
Declaration
public static TweenVector2 TweenTranslate(this VisualElement element, Vector2 endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| Vector2 | endValue | The target translation in points. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenVector2 | The pooled tween, not yet playing. |
Remarks
Translation does not affect layout, so this moves the element without disturbing its siblings. Prefer it over animating width, height or position when the intent is purely visual.
TweenWidth(VisualElement, float, float)
Animates the element's explicit width in points.
Declaration
public static TweenFloat TweenWidth(this VisualElement element, float endValue, float duration)Parameters
| Type | Name | Description |
|---|---|---|
| VisualElement | element | The element to animate. |
| float | endValue | The target width in points. |
| float | duration | The duration in seconds. |
Returns
| Type | Description |
|---|---|
| TweenFloat | The pooled tween, not yet playing. |
Remarks
This writes an explicit width, which participates in layout, so the element's siblings move as it animates. That cost is the reason TweenScale(VisualElement, Vector2, float) is the better choice when the effect is only meant to be seen rather than measured.