jqueryeasingjquery-easingeasing-functions

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

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" />

Solution

  • 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.