Question

正如标题所说，如何在更改其百分比值时使 ProgressIndicator （https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.m.ProgressIndicator.html）不动画？

我找不到适合它的方法，延伸可能是要走的路，但是也许有人已经弄明白并完成了它？我的谷歌搜索没有成功。

Answer 1

没有方便的方法来抑制这种行为。

您只能扩展控件并将方法setPercentValue覆盖为您想要的行为。

Answer 2

有趣的问题，下面是sap.m.ProgressIndication.prototype.setPercentValue函数，你可以看到当百分比值改变时，条形值是通过线性动画改变的

我的建议，更改此行为的最简单方法是将控件扩展到您自己的控件并重新定义setPercentValue，删除栏上的animate函数或将时间设置为null以便没有动画

sap.m.ProgressIndicator.prototype.setPercentValue = function(fPercentValue) {

var that = this;
 ...
if (that.getPercentValue() != fPercentValue) {
    // animation without rerendering
    this.$().addClass("sapMPIAnimate");
    var time = Math.abs(that.getPercentValue() - fPercentValue) * 20;
    this.setProperty("percentValue", fPercentValue, true);
    var $Bar = this.$("bar");
    $Bar.animate({
        width : fPercentValue + "%"
    }, time, "linear", function() {
        that._setText.apply(that);
        that.$().removeClass("sapMPIAnimate");
    });
}

类似

jQuery.sap.declare("my.ProgressIndicator");
jQuery.sap.require("sap.m.ProgressIndicator");
sap.m.ProgressIndicator.extend("my.ProgressIndicator", {
   renderer: {} 
});

my.ProgressIndicator.prototype.setPercentValue = function(fPercentValue) {

  var that = this;

// validation of fPercentValue
if (typeof (fPercentValue) == "number") {
    if (that.getPercentValue() != fPercentValue) {
        // animation without rerendering
        this.$().addClass("sapMPIAnimate");
        //var time = Math.abs(that.getPercentValue() - fPercentValue) * 20;
        var time = 0;
        this.setProperty("percentValue", fPercentValue, true);
        var $Bar = this.$("bar");
        $Bar.animate({
            width : fPercentValue + "%"
        }, time, "linear", function() {
            that._setText.apply(that);
            that.$().removeClass("sapMPIAnimate");
        });
    }

    return this;
};

Answer 3

从UI5 1.73开始，可以通过将属性displayAnimation设置为percantageValue来关闭false更改时的动画。

确定动画是否显示百分比变化。
从：1.73。

<ProgressIndicator displayAnimation="false" />

SAPUI5：如何在setPercentValue（）上使ProgressIndicator不动画？

3 个答案: