Easing: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
m (Changed link for "Qt documentation" because it was no longer valid.)
 
(12 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 one, 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.
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 =
= Preliminary note =
Line 7: Line 7:
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 =
= Easing functions =
 
<syntaxhighlight lang="lua">
Default values (when a function can use a parameter but it's not defined are):
--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>
<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>
<tr>
<tr>
<td>InQuad</td>
<td align="center">InQuad</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inquad.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>
<tr>
<td>OutQuad</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>
<tr>
<td>InOutQuad</td>
<td align="center">InOutQuad</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inoutquad.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>
<tr>
<td>OutInQuad</td>
<td align="center">OutInQuad</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outinquad.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>
<tr>
<td>InElastic</td>
<td align="center">InElastic</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inelastic.png]]</td>
<td>yes</td><td>yes</td><td></td><td>Due to elastic effect, this easing function produces some values < 0</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>
<tr>
<tr>
<td>OutElastic</td>
<td align="center">OutElastic</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outelastic.png]]</td>
<td>yes</td><td>yes</td><td></td><td>Due to elastic effect, this easing function produces some values > 1</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>
<tr>
<tr>
<td>InOutElastic</td>
<td align="center">InOutElastic</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inoutelastic.png]]</td>
<td>yes</td><td>yes</td><td></td><td>Due to elastic effect, this easing function produces some values < 0 and > 1</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>
<tr>
<tr>
<td>OutInElastic</td>
<td align="center">OutInElastic</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outinelastic.png]]</td>
<td>yes</td><td>yes</td><td></td><td>Due to elastic effect, this easing function produces some values < 0 and > 1</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>
<tr>
<tr>
<td>InBack</td>
<td align="center">InBack</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inback.png]]</td>
<td></td><td></td><td>yes</td><td>Due to overshoot, this easing function produces some values < 0</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>
<tr>
<tr>
<td>OutBack</td>
<td align="center">OutBack</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outback.png]]</td>
<td></td><td></td><td>yes</td><td>Due to overshoot, this easing function produces some values > 1</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>
<tr>
<tr>
<td>InOutBack</td>
<td align="center">InOutBack</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inoutback.png]]</td>
<td></td><td></td><td>yes</td><td>Due to overshoot, this easing function produces some values <0 and > 1</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>
<tr>
<tr>
<td>OutInBack</td>
<td align="center">OutInBack</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outinback.png]]</td>
<td></td><td></td><td>yes</td><td></td>
<td align="center"></td><td align="center"></td><td align="center">yes</td><td></td>
</tr>
</tr>
<tr>
<tr>
<td>InBounce</td>
<td align="center">InBounce</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inbounce.png]]</td>
<td></td><td>yes</td><td></td><td></td>
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td>
</tr>
</tr>
<tr>
<tr>
<td>OutBounce</td>
<td align="center">OutBounce</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outbounce.png]]</td>
<td></td><td>yes</td><td></td><td></td>
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td>
</tr>
</tr>
<tr>
<tr>
<td>InOutBounce</td>
<td align="center">InOutBounce</td>
<td></td>
<td align="center">[[File:Qeasingcurve-inoutbounce.png]]</td>
<td></td><td>yes</td><td></td><td></td>
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td>
</tr>
</tr>
<tr>
<tr>
<td>OutInBounce</td>
<td align="center">OutInBounce</td>
<td></td>
<td align="center">[[File:Qeasingcurve-outinbounce.png]]</td>
<td></td><td>yes</td><td></td><td></td>
<td align="center"></td><td align="center">yes</td><td align="center"></td><td></td>
</tr>
</tr>
<tr>
<tr>
<td>SineCurve</td>
<td align="center">SineCurve</td>
<td></td>
<td align="center">[[File:Qeasingcurve-sincurve.png]]</td>
<td></td><td></td><td></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>
<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>
<tr>
<tr>
<td>CosineCurve</td>
<td align="center">CosineCurve</td>
<td></td>
<td align="center">[[File:Qeasingcurve-coscurve.png]]</td>
<td></td><td></td><td></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>
<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>
</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 =
= Source =


The naming conventions of the functions below, available in [[moveObject]], [[interpolateBetween]], or [[getEasingValue]] as been extracted from http://doc.qt.nokia.com/latest/qeasingcurve.html. Only a subset of those functions is available in MTA since some of them are a bit redundant (only the profile or acceleration/deceleration changes).
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.
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
Easing function Function profile Uses fEasingPeriod Uses fEasingAmplitude Uses fEasingOvershoot Comments
Linear Qeasingcurve-linear.png
InQuad Qeasingcurve-inquad.png
OutQuad Qeasingcurve-outquad.png
InOutQuad Qeasingcurve-inoutquad.png
OutInQuad Qeasingcurve-outinquad.png
InElastic Qeasingcurve-inelastic.png yesyesDue to the elastic effect, this easing function produces some values < 0
OutElastic Qeasingcurve-outelastic.png yesyesDue to the elastic effect, this easing function produces some values > 1
InOutElastic Qeasingcurve-inoutelastic.png yesyesDue to the elastic effect, this easing function produces some values < 0 and > 1
OutInElastic Qeasingcurve-outinelastic.png yesyesDue to the elastic effect, this easing function produces some values < 0 and > 1
InBack Qeasingcurve-inback.png yesDue to overshoot, this easing function produces some values < 0
OutBack Qeasingcurve-outback.png yesDue to overshoot, this easing function produces some values > 1
InOutBack Qeasingcurve-inoutback.png yesDue to overshoot, this easing function produces some values <0 and > 1
OutInBack Qeasingcurve-outinback.png yes
InBounce Qeasingcurve-inbounce.png yes
OutBounce Qeasingcurve-outbounce.png yes
InOutBounce Qeasingcurve-inoutbounce.png yes
OutInBounce Qeasingcurve-outinbounce.png yes
SineCurve Qeasingcurve-sincurve.png 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.
CosineCurve Qeasingcurve-coscurve.png 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.

Examples

Click to collapse [-]

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.