Easing: Difference between revisions
m (Changed link for "Qt documentation" because it was no longer valid.) |
|||
(15 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
Easing functions describe functions that control the way an interpolation between 0 and 1 is done. | Easing functions describe functions that control the way an interpolation between 0 and 1 is done. | ||
The most basic | The most basic easing function, linear, is just a linear interpolation at constant speed. Other more advanced easing functions can have acceleration at the beginning, the end or both or deceleration, or even bouncing or elastic effects. | ||
= Preliminary note = | |||
In the functions using easing, there are usually 3 optional parameters. Most functions don't need them at all, the ones needing one or more parameters are listed in the table below. When providing optional parameters, all the parameters before a given parameter must be filled, even if the easing function you intend to use doesn't require such a parameter. In this case, simply use 0 for the parameters you don't need. | In the functions using easing, there are usually 3 optional parameters. Most functions don't need them at all, the ones needing one or more parameters are listed in the table below. When providing optional parameters, all the parameters before a given parameter must be filled, even if the easing function you intend to use doesn't require such a parameter. In this case, simply use 0 for the parameters you don't need. | ||
Examples: | Examples: | ||
* "Linear" can used simply with ''getEasingValue( fProgress, "Linear" )'' | * ''"Linear"'' can be used simply with ''getEasingValue( fProgress, "Linear" )'' | ||
* "OutElastic" can define fEasingPeriod and fEasingAmplitude with ''getEasingValue( fProgress, "OutElastic", 0.3, 1.0 )'' | * ''"OutElastic"'' can define ''fEasingPeriod'' and ''fEasingAmplitude'' so it can be used with ''getEasingValue( fProgress, "OutElastic", 0.3, 1.0 )'' | ||
* "InBack" can define fEasingOvershoot, but since it comes after fEasingPeriod and fEasingAmplitude in the order of parameters, 0 must be used for the others with ''getEasingValue( fProgress, "InBack", 0, 0, 1.7015 )'' | * ''"InBack"'' can define ''fEasingOvershoot'', but since it comes after ''fEasingPeriod'' and ''fEasingAmplitude'' in the order of parameters, 0 must be used for the others with ''getEasingValue( fProgress, "InBack", 0, 0, 1.7015 )'' | ||
= Easing functions = | |||
<syntaxhighlight lang="lua"> | |||
Default values (when a function can use a parameter but it's not defined | --List of builtin easing functions | ||
builtins={ "Linear", "InQuad", "OutQuad", "InOutQuad", "OutInQuad", "InElastic", "OutElastic", "InOutElastic", "OutInElastic", "InBack", "OutBack", "InOutBack", "OutInBack", "InBounce", "OutBounce", "InOutBounce", "OutInBounce", "SineCurve", "CosineCurve" } | |||
</syntaxhighlight> | |||
Default values are (when a function can use a parameter but it's not defined by the user): | |||
* ''fEasingPeriod:'' 0.3 | * ''fEasingPeriod:'' 0.3 | ||
* ''fEasingAmplitude :'' 1. | * ''fEasingAmplitude :'' 1.0 | ||
* ''fEasingOvershoot:'' 1.701 | * ''fEasingOvershoot:'' 1.701 | ||
<table border="1" class="unnamed1"> | <table border="1" class="unnamed1"> | ||
<tr> | <tr> | ||
<th>Easing function | <th align="center">Easing function</th> | ||
<th>Function profile</th> | <th align="center">Function profile</th> | ||
<th>Uses fEasingPeriod</th> | <th align="center">Uses fEasingPeriod</th> | ||
<th>Uses fEasingAmplitude</th> | <th align="center">Uses fEasingAmplitude</th> | ||
<th>Uses fEasingOvershoot</th> | <th align="center">Uses fEasingOvershoot</th> | ||
<th>Comments</th> | <th>Comments</th> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>Linear</td> | <td align="center">Linear</td> | ||
<td></td> | <td align="center">[[File:Qeasingcurve-linear.png]]</td> | ||
<td></td><td></td><td></td><td></td> | <td align="center"></td><td align="center"></td><td align="center"></td><td></td> | ||
</tr> | |||
<tr> | |||
<td align="center">InQuad</td> | |||
<td align="center">[[File:Qeasingcurve-inquad.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center"></td><td></td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td align="center">OutQuad</td> | ||
<td></td> | <td align="center">[[File:Qeasingcurve-outquad.png]]</td> | ||
<td></td><td></td><td></td><td></td> | <td align="center"></td><td align="center"></td><td align="center"></td><td></td> | ||
</tr> | </tr> | ||
<tr> | |||
<td align="center">InOutQuad</td> | |||
<td align="center">[[File:Qeasingcurve-inoutquad.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutInQuad</td> | |||
<td align="center">[[File:Qeasingcurve-outinquad.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">InElastic</td> | |||
<td align="center">[[File:Qeasingcurve-inelastic.png]]</td> | |||
<td align="center">yes</td><td align="center">yes</td><td align="center"></td><td>Due to the elastic effect, this easing function produces some values < 0</td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutElastic</td> | |||
<td align="center">[[File:Qeasingcurve-outelastic.png]]</td> | |||
<td align="center">yes</td><td align="center">yes</td><td align="center"></td><td>Due to the elastic effect, this easing function produces some values > 1</td> | |||
</tr> | |||
<tr> | |||
<td align="center">InOutElastic</td> | |||
<td align="center">[[File:Qeasingcurve-inoutelastic.png]]</td> | |||
<td align="center">yes</td><td align="center">yes</td><td align="center"></td><td>Due to the elastic effect, this easing function produces some values < 0 and > 1</td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutInElastic</td> | |||
<td align="center">[[File:Qeasingcurve-outinelastic.png]]</td> | |||
<td align="center">yes</td><td align="center">yes</td><td align="center"></td><td>Due to the elastic effect, this easing function produces some values < 0 and > 1</td> | |||
</tr> | |||
<tr> | |||
<td align="center">InBack</td> | |||
<td align="center">[[File:Qeasingcurve-inback.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center">yes</td><td>Due to overshoot, this easing function produces some values < 0</td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutBack</td> | |||
<td align="center">[[File:Qeasingcurve-outback.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center">yes</td><td>Due to overshoot, this easing function produces some values > 1</td> | |||
</tr> | |||
<tr> | |||
<td align="center">InOutBack</td> | |||
<td align="center">[[File:Qeasingcurve-inoutback.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center">yes</td><td>Due to overshoot, this easing function produces some values <0 and > 1</td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutInBack</td> | |||
<td align="center">[[File:Qeasingcurve-outinback.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center">yes</td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">InBounce</td> | |||
<td align="center">[[File:Qeasingcurve-inbounce.png]]</td> | |||
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutBounce</td> | |||
<td align="center">[[File:Qeasingcurve-outbounce.png]]</td> | |||
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">InOutBounce</td> | |||
<td align="center">[[File:Qeasingcurve-inoutbounce.png]]</td> | |||
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">OutInBounce</td> | |||
<td align="center">[[File:Qeasingcurve-outinbounce.png]]</td> | |||
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td> | |||
</tr> | |||
<tr> | |||
<td align="center">SineCurve</td> | |||
<td align="center">[[File:Qeasingcurve-sincurve.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center"></td><td>This easing function doesn't end at 1 but goes back to 0. In this case, for interpolation, the target value is just an edge but doesn't represent the stop value.</td> | |||
</tr> | |||
<tr> | |||
<td align="center">CosineCurve</td> | |||
<td align="center">[[File:Qeasingcurve-coscurve.png]]</td> | |||
<td align="center"></td><td align="center"></td><td align="center"></td><td>This easing function both starts and stops at 0.5, going first to 1 then 0. In this case, for interpolation, the source and target values are just the edges but don't represent the start/stop values.</td> | |||
</tr> | |||
</table> | </table> | ||
==Examples == | |||
<section show="true"> | |||
'''Example 1:''' This example move gate with easing. | |||
<syntaxhighlight lang="lua"> | |||
local x,y,z = 2096.3, 1721, 12.7 | |||
local easing = "OutBounce" | |||
local time = 2000 | |||
local gate = createObject(980, x,y,z, 0, 0, 63) | |||
local marker = createMarker(x,y,z, "cylinder", 12, 0, 0, 0, 0) | |||
function moveGate(hitPlayer, matchingDimension) | |||
moveObject(gate, time, x+4.9, y+9.6, z, 0, 0, 0, easing) | |||
end | |||
addEventHandler("onMarkerHit", marker, moveGate) | |||
function moveBack() | |||
moveObject(gate, time, x, y, z, 0, 0, 0, easing) | |||
end | |||
addEventHandler("onMarkerLeave", marker, moveBack) | |||
</syntaxhighlight> | |||
</section> | |||
= Source = | |||
The naming conventions of the functions below, available in [[moveObject]], [[interpolateBetween]], or [[getEasingValue]] have been extracted from [https://doc.qt.io/qt-5/qml-qtquick-animator.html Qt documentation]. Only a subset of those functions is available in MTA since some of them are a bit redundant (only the profile of the acceleration/deceleration changes). | |||
The pictures of the easing functions are directly extracted from Qt documentation, © 2008-2010 Nokia Corporation and/or its subsidiaries. | |||
[[pt-br:Easing]] |
Latest revision as of 12:36, 6 January 2022
Easing functions describe functions that control the way an interpolation between 0 and 1 is done.
The most basic easing function, linear, is just a linear interpolation at constant speed. Other more advanced easing functions can have acceleration at the beginning, the end or both or deceleration, or even bouncing or elastic effects.
Preliminary note
In the functions using easing, there are usually 3 optional parameters. Most functions don't need them at all, the ones needing one or more parameters are listed in the table below. When providing optional parameters, all the parameters before a given parameter must be filled, even if the easing function you intend to use doesn't require such a parameter. In this case, simply use 0 for the parameters you don't need. Examples:
- "Linear" can be used simply with getEasingValue( fProgress, "Linear" )
- "OutElastic" can define fEasingPeriod and fEasingAmplitude so it can be used with getEasingValue( fProgress, "OutElastic", 0.3, 1.0 )
- "InBack" can define fEasingOvershoot, but since it comes after fEasingPeriod and fEasingAmplitude in the order of parameters, 0 must be used for the others with getEasingValue( fProgress, "InBack", 0, 0, 1.7015 )
Easing functions
--List of builtin easing functions builtins={ "Linear", "InQuad", "OutQuad", "InOutQuad", "OutInQuad", "InElastic", "OutElastic", "InOutElastic", "OutInElastic", "InBack", "OutBack", "InOutBack", "OutInBack", "InBounce", "OutBounce", "InOutBounce", "OutInBounce", "SineCurve", "CosineCurve" }
Default values are (when a function can use a parameter but it's not defined by the user):
- fEasingPeriod: 0.3
- fEasingAmplitude : 1.0
- fEasingOvershoot: 1.701
Examples
Example 1: This example move gate with easing.
local x,y,z = 2096.3, 1721, 12.7 local easing = "OutBounce" local time = 2000 local gate = createObject(980, x,y,z, 0, 0, 63) local marker = createMarker(x,y,z, "cylinder", 12, 0, 0, 0, 0) function moveGate(hitPlayer, matchingDimension) moveObject(gate, time, x+4.9, y+9.6, z, 0, 0, 0, easing) end addEventHandler("onMarkerHit", marker, moveGate) function moveBack() moveObject(gate, time, x, y, z, 0, 0, 0, easing) end addEventHandler("onMarkerLeave", marker, moveBack)
Source
The naming conventions of the functions below, available in moveObject, interpolateBetween, or getEasingValue have been extracted from Qt documentation. Only a subset of those functions is available in MTA since some of them are a bit redundant (only the profile of the acceleration/deceleration changes). The pictures of the easing functions are directly extracted from Qt documentation, © 2008-2010 Nokia Corporation and/or its subsidiaries.