自动缩放效果

时间:2014-06-06 17:25:31

标签: javascript jquery raphael increment

我试图创建一个自动缩放,但我被困在这里。

我有这个功能

panZoom.zoomOut(num);

我需要稍微调用它n次,以创建一个漂亮的zoomOut效果

我正在使用

 for(i=0; i<10;i++){
    panZoom.zoomOut(1);
    };

但它的执行速度太快,无法创建动画。

我也尝试过setTimeout:

function myLoop () {           
    setTimeout(function () {    
        panZoom.zoomOut(1);

        i++;                     
        if (i < 10) {            //  if the counter < 10, call the loop function
            myLoop();             //  ..  again which will trigger another
        }                        //  ..  setTimeout()

        if (i==10){
            i=1;
        }
    }, 100);
};

但是setTimeout之后的动作在没有等待setTimeout完成的情况下执行(显而易见,我知道但是没有延迟功能。)

如何制作平滑的缩放效果?

1 个答案:

答案 0 :(得分:0)

你可能想做这样的事情:

for ( var i = 0; i < 10; i++ ) {
    setTimeout(function(){
        panZoom.zoomOut(1);
    }, 100 * i);
}