自动缩放效果

Question

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

我有这个功能

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完成的情况下执行（显而易见，我知道但是没有延迟功能。）

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

Answer 1

你可能想做这样的事情：

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