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，您可以清楚地看到进度文本以恒定速率计数，但动画条会填充缓动。

有没有办法取得进展，考虑'easeInQuart'的指数增长？

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

Answer 1

要获取“缓动”值，而不是progress回调，请使用step回调并检查其now参数。

在这种情况下，由于没有任何动画属性为您提供所需的值，因此您可以为自定义属性设置动画，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（） - 通过缓动获得进展

1 个答案: