更新'onChange'中.animate函数的'duration'?

时间:2014-03-02 22:51:06

标签: javascript jquery animation jquery-animate fabricjs

我正在努力改进我一直在处理屏幕上移动的动画 目前,对象以设定的速度移动,没有任何差异。

我试图包含两个最终会做同样事情的功能;改变动画对象的速度。

我希望用户能够根据屏幕上的位置更改速度以及对象减速或加速。

我不确定我是否正在寻找正确的位置,因为目前我无法在动画循环开始后更新持续时间。我首先想到我可以用一个返回int的函数替换数字。这可以使'速度'的值发生变化但动画循环不会更新。

非常感谢任何帮助,谢谢。

以下代码段。

function moveObj () {

//initially the duration was set here.  I understand that will not work as the animation is only
//being called once.

//animation process
obj.animate('top', '+=' + canvas.height, {
    duration: speedOfObj(0),
    abort: function () {
    },//end abort callback
    onChange: function () {
        //testing only//
        speedOfObj(1000);
}

//test function to see what the results would be. speed changes when called within the on change but  the animation is not affected.
function speedOfObj(modifier){
    var speed = 10000 / (new Number(speedControl.value));
    if(modifier == 0){
        console.log("speed: "+speed);
        return speed;
    }else{
        speed *= modifier;
        console.log("speedBBBB: "+speed);
        return speed;
    }
}

1 个答案:

答案 0 :(得分:1)

一旦jQuery动画关闭并运行,它就会自行消失。如果你想改变它的工作方式,你可以.stop(true)然后启动一个新的动画,从现在的新速度再次开始。

也可以在动画中实现自定义步骤功能,这可能需要一些队列来处理动画期间可能发生变化的外部影响,但我认为这比停止原始动画要复杂得多并开始一个以新的速度移动的新的。

工作演示:http://jsfiddle.net/jfriend00/tzxca/