使用Velocity.js来动画进度条

Question

我想从使用jQuery动画切换到Velocity，因为它应该有更好的性能跨设备。从文档看起来应该相当容易 - 我已经下载了源代码并将其添加到我的js文件夹中，并且在我的函数中，我应该能够将.animate（）切换为.velocity（）。仍然没有工作，但我没有控制台日志错误。 （在心中也保持它与jQuery动画工作之前我也试过下载SRC代码，并使用不带运气的CDN）

下面的代码：

// PROGRESSBAR 
var show_complete_time = 2000; // time to show completed green progressbar and 100% text 
function progressbar(progressbar, time) { 

    var progressbar = $(progressbar); 

    $({someValue: 0}).velocity({someValue: 99}, { 
     duration: time, 
     easing: 'linear', 
     step: function() { 
      var widthNumber = this.someValue; 
      var number = Math.floor(this.someValue+1); 
      progressbar.css({"width": widthNumber + "%"}); 
      progressbar.html("<p>" + number + '%' + "</p>"); 
     }, 
     complete: function(){ // progressbar completed 
      progressbar.css({"width": "100%"}); 
      progressbar.addClass("complete").html("<p>100%</p>"); 
     } 
    }); 
}; 

Answer 1

原来的方式jQuery动画功能写入的速度不正确。 Velocity将CSS属性和值的映射作为其第一个参数。一个选项对象可以选择作为第二个参数传入。

这是新的速度函数：

// PROGRESSBAR 
var show_complete_time = 2000; // time to show completed green progressbar and 100% text 
function progressbar(progressbar, time) { 

    var progressbar = $(progressbar); 

    progressbar.velocity({"width": "100%"}, { 
     duration: time, 
     easing: "linear", 
     progress: function(elements, c, r, s, t) { 
      var number = Math.floor((c * 100) + 1); 
      progressbar.html("<p>" + number + '%' + "</p>"); 
     }, 
     complete: function(){ // progressbar completed 
      progressbar.addClass("complete").html("<p>100%</p>"); 
     } 
    }); 

};