Home
  • English
  • 中文
Home
  • English
  • 中文
  • Get Started

    • Install
    • Hello LGUI
    • Custom Button
    • Use custom font
    • Prefab workflow
    • Interaction
    • Button from scratch
  • Sample Projects

    • Sample Projects
  • Prefab Workflow

    • LGUI Prefab
    • PrefabEditor
    • LGUILifeCycleBehaviour
    • LGUIPrefabInterface
  • Rendering

    • LGUICanvas
    • Screen Space Overlay
    • World Space - UE Renderer
    • World Space - LGUI Renderer
    • LGUI render flow
    • UICanvasGroup
  • Visual Components

    • UIText
    • UIEffect
    • TextAnimation
    • UIBackgroundBlur
    • UIBackgroundPixelate
  • Events

    • LGUIEventDelegate
    • LGUIEventSystem
  • Interaction Components

    • UISelectable component
  • Layout

    • Basic Layout
    • Auto Layout
  • Tween Animation

    • LTween
    • Use LTween for UI element
  • Performance

    • LGUI Stat
  • ReleaseNotes

    • LGUI 3.x
    • LGUI 2.x
  • FAQ

    • Why use prefab?
    • Update project from LGUI2 to LGUI3
    • Project 3d world position to LGUI's screen 2d position
    • Deproject LGUI's screen position to world
    • Use custom material for UI elements
    • Disable interaction component
    • Find Child by DisplayName
    • Get actor or component inside prefab
    • Anti-aliasing

TextAnimation

Select a UIText actor, add "UIEffectTextAnimation" component:

TextAnimation Component

Property:Function:
SelectorSelector defines the method to select characters in text.
PropertiesProperties defines which property will affect and how it affect.
Execute OrderSee Common Effect
Basically we use Selector to select range of characters in text, and use Properties to change character's property, then use a animation controller to Play Animation.

Get example from This Project.

Selector

Selector can collect information about which characters are selected, and 0 to 1 interpolation value from start to end, then provide these informations to Properties.
There are 3 types of Selector: Range, Random, RichTextTag.

Range selector defines start and end range of characters in UIText, and provide 0 to 1 value(for interpolation) from start to end.

Property:Function:
StartStart character position from 0 to 1, 0 is first character of text, 1 is last one.
EndEnd character position from 0 to 1, 0 is first character of text, 1 is last one.
Offset0 means Properties will have no effect, 1 means Properties have full effect, and middle value is interplation. We can set this "offset" property to make animation.
RangeSelector can provide 0 to 1 value from start to end, but sometime Properties effect may look too smooth, so lower this value can let Properties effect more sharp.
Flip DirectionSelector can provide 0 to 1 value from start to end when this value is false, if it is true then 1 to 0 from start to end.

Random selector will select characters randomly, and generate random value from 0 to 1 for interpolation.

Property:Function:
SeedRandom seed.
StartStart character position from 0 to 1, 0 is first character of text, 1 is last one.
EndEnd character position from 0 to 1, 0 is first character of text, 1 is last one.
Offset0 means Properties will have no effect, 1 means Properties have full effect, and middle value is interplation. We can set this "offset" property to make animation.

RichTextTag selector can select characters by rich-text custom-tag, and provide 0 to 1 value(for interpolation) from start to end.

Property:Function:
RangeLike the property in Range selector. Lower this value can let Properties effect more sharp.
Tag NameCustom tag name
Flip DirectionLike the property in Range selector, flip 0-1 to 1-0.
Offset0 means Properties will have no effect, 1 means Properties have full effect, and middle value is interplation. We can set this "offset" property to make animation.

Properties

Properties can use the information that passed from Selector, and apply property change to characters.
There are many types of Properties: Alpha, Color, Position, Rotation, Scale, Position Random, Position Wave... The name is what it functional for.

eg.
Alpha can change transparency of characters.

Property:Function:
AlphaTarget alpha value, 0-1 range.
Ease TypeAnimation type, same as LTween ease.
Ease CurveOnly valid if easeType = CurveFloat. Use CurveFloat to control the animation.

ColorRandom can generate random color.

Property:Function:
SeedRandom seed
MinRandom min
MaxRandom max
Use HSVConver color to HSV(Hue, Saturate, Value) and interpolate, then convert the result back. Interpolate two colors in HSV may look better.

PositionWave can use a sin function to generate wave effect for characters.

Property:Function:
PositionMax position value for sin wave. Sin function generate values from -1 to 1, so the result will be from -position to position.
FrequencyHigher frequency will generate smaller wavelength.
SpeedMove speed of the wave.
Flip DirectionFlip move speed direction of the wave.

We can use multiple properties to combine our specific effects, the effects will calculate from top to bottom:

PlayAnimation

We can use build-in LGUIPlayTween component to control our animation. The key is call function SetSelectorOffset on UIEffectTextAnimation component.

Last Updated:
Contributors: lf2007hf
Prev
UIEffect
Next
UIBackgroundBlur