Question

我遇到了这个问题，我希望使用velocity js将div从100％设置为0。我想让它在每次宽度不等于0时进行动画处理.div的宽度使用setInterval进程自动更新。此间隔过程将永远运行，并将每3秒更新一次div的宽度。速度js或其他动画插件的功能是使其宽度为0％。

我的代码是这样的。

left().top()
add(Label("Player name", UI_SKIN)).center().expandX()
row()
add(Table()).width(50f).height(50f)
add(Table()).width(200f).height(50f)
setDebug(true, true)

速度js的问题在于它只是动画1次，即使它在setInterval过程中也不会做动画。为什么会这样？

Answer 1

终于找到了解决方案。

// THIS IS A BIDDING PROCESS

var progressBar = document.getElementById("progressBar");
var scenario = 3
var width = 265;
var processDuration = 60000;
var processDelay = 3000;
var time_per_scenario = 20000;
var width_per_processDelay = (width / (processDuration / processDelay));

var process = null;

// Call the  animateProgressBar for the first animation;
animateProgressBar();

setInterval(function(){
    //console.log("time_per_scenario: " + time_per_scenario);
    time_per_scenario -= 3000;
    width -= width_per_processDelay;
},3000);

setInterval(function(){
    if(scenario != 0) {
         if(time_per_scenario <= 0) {
            clearInterval(process);
            scenario--;
            width = 265;
            time_per_scenario = 20000;
            animateProgressBar();
         }
    } else {
        scenario = 3;
    }
}, processDelay);

function animateProgressBar() {
    var widthAnimation = width;
    var width_per_frame = (width / (time_per_scenario / 5));
    //console.log("animateProgressBar Again with scenario: " + scenario);
    process = setInterval(frame, 5);
    var me = this;
    function frame() {
        if (widthAnimation <= 0) {
            clearInterval(process);
        } else {
            widthAnimation = widthAnimation - width_per_frame; 
            progressBar.style.width = widthAnimation + 'px'; 
        }
    }
};

#progressBar {
	height: 20px;
	background-color: #ccc;
}

<div id="outerDiv">
	<div id="progressBar"></div>
</div>

感谢@toddmo的帮助

我想在宽度不为0时动画div

1 个答案: