LGUI2:AnimationType:value

From Lavish Software Wiki
Revision as of 19:41, 21 November 2018 by Lax (talk | contribs) (→‎Examples)
Jump to navigation Jump to search

The value Animation Type adjusts a specified JSON value over time, with support for different modes (defaulting to linear)

All JSON value types, including Object and Array, can be modified by value Animations. For example, a Color may be animated by specifying Arrays like [1.0,1.0,1.0] (white) to [1.0,1.0,0.0] (yellow), resulting in a fade from white to yellow.

Behaviors for JSON value types
  • String/True/False: Value only sets to provided originalValue and/or finalValue. speed is not calculated or applied.
  • Integer/Number: Value sets to originalValue at start, speed is applied over time, and finalValue will be specifically applied if provided.
  • Array: Value sets to originalValue at start, and finalValue will be specifically applied if provided. If finalValue or speed is provided, then the listed JSON behavior rules apply individually to each value in the Array. The number of values present in finalValue and/or speed must match the number of values in originalValue.
  • Object: Value sets to originalValue at start, and finalValue will be specifically applied if provided. If finalValue or speed is provided, then the listed JSON behavior rules apply individually to each value in the Object. In contrast to Arrays, (unless explicitly specified in 'speed') there is no requirement that values in an Object are present or match the originalValue -- those values present only in one are only applied at the instant they are specified (meaning the start or end).

Animation properties

A value Animation uses these properties in addition to those defined by Animation
Animation properties for "value"
valueName (Required) The name of the JSON value, e.g. that would be used in a Style
mode (Optional) The method of adjusting the value, one of: Linear (more to come). If not given, the default value is Linear
Properties for "Linear" mode
Adjusts by a constant speed
originalValue (Required) The value to start from
finalValue (Optional) The value to end at. If not provided, the speed property must be specified.
speed (Optional) The speed to adjust by. If not provided, the finalValue and duration properties must be specified in order to calculate this value.


Examples

Fade an element by adjusting 'opacity' from 1.0 to 0.5 over 1.0 seconds. This is an alternative implementation of the "fade" Animation Type.
{
  "type": "value",
  "name": "fadeOut",
  "valueName": "opacity",
  "originalValue": 1.0,
  "finalValue": 0.5,
  "duration": 1.0
} 


Spin a radial menu by adjusting 'offsetDegees' from 0.0 at a rate of 60.0 degrees/second. This is an alternative implementation of the custom "spin" Animation Type given in an example for Animation Types.
{
  "type": "value",
  "name": "spin",
  "valueName": "offsetDegrees",
  "originalValue": 0.0,
  "speed": 60.0
}


Adjust border thickness over time from a 1 pixel border, to a 3 pixel left, 5 pixel top, 7 pixel right, 9 pixel bottom border. Why? Because you wanted to see an animated Array
{
  "type": "value",
  "name": "borderThickness",
  "valueName": "borderThickness",
  "originalValue":[1.0,1.0,1.0,1.0],
  "finalValue":[3.0,5.0,7.0,9.0],
  "duration":5.0
}


Adjust color over time from white to red
{
  "type": "value",
  "name": "color",
  "valueName": "color",
  "originalValue":[1.0,1.0,1.0],
  "finalValue":[0.0,1.0,0.0],
  "duration":2.0
}


LavishGUI 2 Animation Types

Basic Animations
fade - slide - value
Utilities
chain - composite - delay - random - repeat