Easing: Difference between revisions
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
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.