jQuery animate() - 通过缓动取得进展

Question

目前，我正在使用此代码为条形图式元素制作动画：

$('.anim').animate({
    right: `${100-(e/max*100)}%`,
    backgroundColor: colors[0]
},{
    duration: 1500,
    easing: 'easeInQuart',
    progress: function(animation, progress, msRemaining) {
        console.log(100 * progress + "%");
        document.getElementById('progress').innerText = Math.round(e * progress);
    }
});

(jsfiddle)

其中 e 是条形图的值，max 是总条形图比例。

元素 progress 应该显示条形图的值随着它的增加而增加。

但是，由于我使用的是 'easeInQuart'，条形图的数字进度实际上并不是它的视觉状态。

这是一个 slowed down example，您可以在其中清楚地看到进度文本以恒定速率递增，但动画条以缓动方式填充。

Is there a way to get the progress, factoring in the exponential growth of 'easeInQuart'?

另外：我可能会改变缓动风格，所以我希望解决方案具有适应性。

Answer 1

要获取 "eased" 值而不是 progress 回调，请使用 step 回调并检查其 now 参数。

在这种情况下，由于动画属性的 none 为您提供了您想要的值，您可以为自定义属性设置动画，这 jQuery 变得非常简单。

var e = 3210;
var max = 4504;
var colors = ['#28ad8a'];
$('.anim').css({
  'val': 0 // custom property: start value 
}).animate({
  'right': `${100-(e/max*100)}%`,
  'val': e, // custom property: final value: 
  'backgroundColor': colors[0]
}, {
  'duration': 1500,
  'easing': 'easeInQuart',
  'step': function(now, tween, msRemaining) {
    if (tween.prop === 'val') { // this callback is called once per property per step, therefore filter out all but the property of interest, 'val'
        $('#progress').text(Math.round(now));
    }
  }
});

fiddle

jQuery animate() - 通过缓动取得进展

jQuery animate() - get progress with easing

javascript

jquery

easing

jquery-animate