How to add customized easing function in this jQuery code segment without getting all jQueryUI in this?

Question

I saw somebody used an algorithm to simulate the easeOutExpo effect with just the linear parameter. The disadvantage of this code below is it needs a calculation: step_value += (target_value - step_value)/25. It looks very weird in the code.

How do I assign an easing function directly to jQuery in this case? Is it possible to just apply an easing function in this case without bringing jQuery UI or any other heavy framework in the code?

var step_value = 0;
var target_value = 90;
$({
  someValue: 0
}).animate({
  someValue: target_value
}, {
  duration: 6800,
  easing: 'linear',
  step: function() {
    step_value += (target_value - step_value)/25;
    $('#text1').val(step_value);
  },
  complete: function(){
    $('#text1').val(target_value).css('color', 'red');
  }
});

/* This is my goal:
$({
  someValue: 0
}).animate({
  someValue: target_value
}, {
  duration: 6800,
  easing: 'easeOutExpo',
  step: function() {
    $('#text1').val(this.someValue);
  },
  complete: function(){
    $('#text1').val(this.someValue).css('color', 'red');
  }
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text1" />

Why does it look weird? More important, what's wrong with your code at all and what's the goal? Could be I am slow though. — skobaljic, Nov 15 '19 at 13:44
@skobaljic sorry there is a typo in my original code. I have just updated it. — AGamePlayer, Nov 15 '19 at 15:30

score 1 · Accepted Answer · answered Nov 16 '19 at 08:38

You can go and copy the part you need from the jQueryUI script (v1.12.1 here). At the end you get this:

(function() {
    var baseEasings = {};
    $.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function(i, name) {
        baseEasings[name] = function(p) {
            return Math.pow(p, i + 2);
        };
    });
    $.extend(baseEasings, {
        Sine: function(p) {
            return 1 - Math.cos(p * Math.PI / 2);
        },
        Circ: function(p) {
            return 1 - Math.sqrt(1 - p * p);
        },
        Elastic: function(p) {
            return p === 0 || p === 1 ? p :
                -Math.pow(2, 8 * (p - 1)) * Math.sin(((p - 1) * 80 - 7.5) * Math.PI / 15);
        },
        Back: function(p) {
            return p * p * (3 * p - 2);
        },
        Bounce: function(p) {
            var pow2,
                bounce = 4;
            while (p < ((pow2 = Math.pow(2, --bounce)) - 1) / 11) {}
            return 1 / Math.pow(4, 3 - bounce) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - p, 2);
        }
    });
    $.each(baseEasings, function(name, easeIn) {
        $.easing["easeIn" + name] = easeIn;
        $.easing["easeOut" + name] = function(p) {
            return 1 - easeIn(1 - p);
        };
        $.easing["easeInOut" + name] = function(p) {
            return p < 0.5 ?
                easeIn(p * 2) / 2 :
                1 - easeIn(p * -2 + 2) / 2;
        };
    });
})();

var step_value = 0;
var target_value = 90;
$({
    someValue: 0
}).animate({
    someValue: target_value
}, {
    duration: 6800,
    easing: 'easeOutExpo',
    step: function() {
        $('#text1').val(this.someValue);
    },
    complete: function() {
        $('#text1').val(this.someValue).css('color', 'red');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text1" />

Of course, you may pick only the easing you need and you can minify the code.

Also on JSFiddle.

How to add customized easing function in this jQuery code segment without getting all jQueryUI in this?

1 Answers1