如何在此 jQuery 代码段中添加自定义缓动函数而不获取其中的所有 jQueryUI？

Question

我看到有人用一种算法来模拟 easeOutExpo 效果，只需要 linear 参数。下面这段代码的缺点是它需要计算： step_value += (target_value - step_value)/25。在代码中看起来很奇怪。

在这种情况下，如何将缓动函数直接分配给 jQuery？在这种情况下是否可以只应用缓动函数而不在代码中引入 jQuery UI 或任何其他重型框架？

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

Answer 1

您可以从 jQueryUI 脚本 (v1.12.1 here) 中复制您需要的部分。最后你会得到这个：

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

当然，你可以只选择你需要的缓动，你可以缩小代码。

也在 JSFiddle.

如何在此 jQuery 代码段中添加自定义缓动函数而不获取其中的所有 jQueryUI？

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

jquery

easing-functions

jquery-easing

easing