How do I make a "exponential curve animation" on a value

0 favourites
  • 13 posts
  • Hello,

    I try to animate some item opacity with events, I currently have this :

    every tick : lerp(item.opacity,100,dt)

    So it works, and the animation curve is something like :

    But I would like to make the opacity animation curve more like this :

    And I don't understand how to do it

  • There is no difference in the curving. (i layed one on the other).

    If you mean 'the other way' that would be lerp(item.opacity,0,dt).

    You can have a differend curve using math like: lerp(item.opacity,100,(dt^n)/m)

  • 99Instances2Go

    Thanks for your reply

    Well there is a difference. The first curve shows that the value will quickly go toward its goal to finally reach it very slowly. The second one shows that the value will very slowly start toward its goal to end up reaching it really fast.

    I think the math solution you mention is the right way to do it, but I don't quite understand your suggestion : lerp(item.opacity,100,(dt^n)/m) ?

  • In fact, in lerp(x,y,z) the z stands for the time that it will lerp from x to y.

    You choosed dt as z-factor, wich is fine, but liniair.

    The thing is, if you change z to a function, also the time is effected. It wil be a bit try and error. (for me it will be).

    So if you change z to 'dt^n' with n a number your choose, you will have a curve. How bigger you choose n to be, how steeper the curve.

    You can google on "graph for x^3" to see the curve drawn. Or x^4 ... any math.

    But now you also changed the time. So you have to correct it somewhat to youre liking.

    That is why i proposed (dt^n)/m, where m is any number that gives you an acceptable time.

    So, you choose n and m and it wil be, with by instance n = 3 and m = 2 ... lerp(x,y,(dt^3)/2)

  • That totally makes sense, I try that now !

  • 99Instances2Go

    Alright that's it, I understand how it's working

    So the issue was that the first parameter was relative : item.opacity

    So whatever the math, the curve was constantly changing because of this relative value and so inevitably scaling down and down without never reaching its goal

    lerp is linearly interpolating a to b by x so a and b need to be "static" values so that they follow x function properly, knowing that x=0 will result the value being a and x=1 will result the value being b

    So :


    You will have a nice exponential acceleration from a to b for the duration of your timer.

    Thank you so much for your help

  • I knew about the 'static', but because i used (x,y,z) that got evident. I should have seen that it is not a good presentation of the problem. I apologize for that.

    Its nice how you use a timer to insert the dt. I never thaught of that.

  • I am not sure it's quite working though,

    In another try I have some overshoot issue, I wonder if that's because I'm using a timer and not dt...

  • Well even after reading this very interesting article <img src="{SMILIES_PATH}/icon_arrow.gif" alt=":arrow:" title="Arrow" /> /blog/ashley/17/using-lerp-with-delta-time?action=lastpage&t=1461233976004#lastcomment

    I can't manage to have something accurate

    I guess the best is to carry on with timers and put maximum/minimum values to prevent any overshoot... technically you can't really have a 100% accurate value animation using lerp I think.

  • You can still use the tick-cyclus.

    Lets say we want to count to 10 in 1 second.

    dt is time between 2 ticks. So dt takes 1/dt dt-steps in a second.

    But we want to do it in 10 steps, meaning each step will be 1/(dt*10)

    Or for any time (s): s/(dt*10)

    Need a global variable 'step'

    Then, first you need a condition that is true when a fade is needed.

    Then first subevent (every tick): and the actions

    opacity = step^2

    add s/(dt*10) to step

    Second subevent

    If step > 100 >>> set root condition as not true

    I did't test this, i can have made a math error. But you see the picture?

  • I get the picture yes, this is good to simulate a framerate animation btw

    I like the idea of creating a step global variable to control the use of dt

    The subevent

    If step > 100 >>>>>>>>> set value to max

    Can be used to define the maximum value to prevent overshooting as well


  • https://

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thank you so much for your example, it's being very instructive.

    So as I can see you have the same problem that I had, the value is slightly overshooting because dt cannot be 100% accurate, however in your example it's more accurate.

    I think the only way to counter this is by creating limits such as : if X>10 then set X to 10

    you could also do :

    on timer, set X to max value

    if you need 100% accurate values

    Also your example will be very useful to try all sort of curves based on expressions. Thanks a lot again!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)