What are easing functions?
Easing functions are used in the context of animated GIFs, for defining a property (such as the width of a rectangle) as a function of time in the animation. You need an easing function for example if...
- You want to draw an expanding rectangle in an animation
- You want to "move" stuff (overlay images) during the animation
Example
Say that I have a 40-frame animation in which a fixed height rectangle expands from left to right. The rectangle will be defined with the following:
- FIXED x, y values to locate the top left corner of the rectangle
- FIXED h value to indicate how tall the rectangle should be
- a DYNAMIC w value to define how wide the rectangle should be at the time of the animation
Note: Easing functions always return a float.
Dynamic inputs
Using functions for a dynamic input
Functions enable you to dynamically compute the animation input using various parameters. For instance, if you want to create a progress bar that calculates the progress value based on dim1 (loyalty points) and dim2 (maximum possible loyalty points), you would write a function in pseudo code like this: "100 * dim1 value / dim2 value." The syntax to implement this would be:
Examples:
"source": {"function": "100 * x/y", "mapping": {"x":"dim1","y":"dim2"}}
In the above:
- Always express your function using single letter variable names, preferably x, y, z, etc.
- The mapping property needs to instruct the renderer how to pull the values from your custom variables.
In the special case where you want a static value to be returned by your function, you don't need the mapping property. This example will always return 100 regardless of the input:
Example:
"source": {"function": 100}
Using microparse for a dynamic input
It's possible to use microparse to calculate an input. The most common example would be to retrieve the number of points available for a given user, for let's say an airline mileage program, and draw a little animation.
Example:
"source": {
"microparse": "LiveclickerApiRenderTest",
"parameter_for_microparse": "dim2",
"parameter_from_microparse": "points"
}
In this example, the microparse service takes as input the user ID (referenced as dim2), connects to the proper API, and returns points available.
The LiveRender parameter parses the microparse output, and assigns the output value to the drawrectangle, drawtext methods, etc.
For example, here is a microparse code.
Note:
- $this->apiRsp must be an array with the parameters you want to send back to LiveRender. Notice how the "points" property is returned (that's what defined in LiveRender as "parameter_from_microparse").
-
If you have a true API to connect to, you will need to do embed the logic in the various methods within your microparse class.
Dynamic outputs
For the output you can set minimum and maximum value. The maximum value can be made dynamic, by using the "source_input". This will automatically assign the max values for both input and output to the source input value.
Example:
If dim2 serves as the source input, and its value is 30 within an input range of [0,100] and an output range of [0,"source_input"], this implies that both the input and output ranges will adjust to [0,30].
This setup is useful when you want to create a horizontal animation that consistently concludes at a fixed point, for example.
Special case: overlaytext
When the overlay text needs to be updated dynamically as the animation progresses (as shown above with the changing percentage), you can utilize an easing function. This function takes an integer as input and returns another integer, as demonstrated below.
The key here is to use the correct syntax to specify that during the animation the input should range from a minimum value (in this case, 0) to a maximum value (set as "source_input"). By using "source_input" as the maximum, any predefined ranges are disregarded, and the output will be proportional to the frame index, spanning from the minimum value to the provided source value. For instance, if your range consists of 20 frames and your input value is 80, then the output will be:
Frame 0, output 0
Frame 1, 80/20 * 1 = 4
Frame 2, 80/20 * 2 = 8
Frame 3, 80/20 * 3 = 12
...
Frame 20 80/20 * 20 = 80
