jQuery easing function — variables' comprehension

后端 未结 5 888
无人共我
无人共我 2020-11-30 01:00

How does the easing function for jQuery work? Take for example:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

How d

5条回答
  •  孤街浪徒
    2020-11-30 01:27

    A concrete example,

    Suppose our initial value is 1000 and we want to reach 400 in 3s:

    var initialValue = 1000,
        destinationValue = 400,
        amountOfChange = destinationValue - initialValue, // = -600
        duration = 3,
        elapsed;
    

    Let's go from 0s to 3s:

    elapsed = 0
    $.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
    //> 1000
    
    elapsed = 1
    $.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
    //> 933.3333333333334
    
    elapsed = 2
    $.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
    //> 733.3333333333334
    
    elapsed = 3
    $.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
    //> 400
    

    So compared to the synopsis:

    $.easing.easeInQuad = function (x, t, b, c, d) {...}
    

    we can deduce:

     x       t          b              c            d
     |       |          |              |            |
    null  elapsed  initialValue  amountOfChange  duration
    

    NB1: One important thing is that elapsed(t) and duration(d) should be expressed in the same unit, eg: here 'seconds' for us, but could be 'ms' or whatever. This is also true for initialValue(b) and amountOfChange(c), so to sum-up:

     x       t          b              c            d
     |       |          |              |            |
    null  elapsed  initialValue  amountOfChange  duration
             ^          ^              ^            ^
             +----------|----=unit=----|------------+
                        +----=unit=----+
    

    NB2: Like @DamonJW, I don't know why x is here. It does not appear in Penner's equations and does not seem to be used in result: let always set him to null

提交回复
热议问题