Easing: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
Line 20: Line 20:
<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 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 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 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 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>



Revision as of 21:46, 18 December 2010

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.

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

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 elastic effect, this easing function produces some values < 0
OutElastic Qeasingcurve-outelastic.png yesyesDue to elastic effect, this easing function produces some values > 1
InOutElastic Qeasingcurve-inoutelastic.png yesyesDue to elastic effect, this easing function produces some values < 0 and > 1
OutInElastic Qeasingcurve-outinelastic.png yesyesDue to 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.

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 or acceleration/deceleration changes). The pictures of the easing functions are directly extracted from Qt documentation, © 2008-2010 Nokia Corporation and/or its subsidiaries.