在給定時間內在谷歌地圖上圈動畫半徑增長/縮小

我試圖在Google Maps API上動畫圓圈半徑的增長/縮小。現在我所擁有的是JS中的一種方法，它取得給定的時間，最終半徑並計算半徑的增量，並計算時間速率（或等待下一次循環迭代所需的毫秒數）。問題在於它可以在更大的時間內工作（比如3秒或更長時間），對於更小的時間，它會比它應該更多的時間（幾乎所有事情都會降低或等於1秒，就像2秒一樣）。這裏的方法>在給定時間內在谷歌地圖上圈動畫半徑增長/縮小

var animateRadius = function(change){ 
     var radiusDelta = Math.abs(change.FinalRadius-Circle.getRadius()); 
     var radiusChangeRate = 1; 
     var timeRate = (radiusChangeRate*change.FinalTime)/radiusDelta; 
     if(timeRate <= 1){ 
      /*since the setInterval method only works with miliseconds 
       if the timespan is less than one milisecond, the radius change 
       rate has to be bigger in order to make it on time, and since this 
       only happens in smaller times, I think the error is around here..*/ 
      timeRate = 1; 
      radiusChangeRate = (timeRate*radiusDelta)/change.FinalTime; 
         } 
     if(change.FinalRadius > Circle.getRadius()){ 
      //This just tells if the circle is growing or shrinking 
      radiusChangeRate = radiusChangeRate*-1; 
     } 

     var interval = window.setInterval(function(){ 
      if(visionRadiusCircle.getRadius() == change.FinalRadius){ 
       window.clearInterval(interval); 
       interval = 0; 
      } 
      Circle.setRadius(Circle.getRadius() - radiusChangeRate); 

     }, timeRate); 
    }

我想不通這是爲什麼不工作。有什麼想法嗎？任何想法都是受歡迎的，即使它是一種不同的算法（我甚至不確定是否有更好的方法來做到這一點）。

謝謝！

來源

2013-03-06 ZSnake123

也許使增量時間常數在0.1秒;然後改變增量半徑以匹配（實際上，你可能沒有得到足夠的處理器來做任何比這更快的事情，當然不是每毫秒）。 – geocodezip 2013-03-06 22:24:59

是的，這就是我的想法，奇怪的是，例如1秒鐘，程序接近3秒完成，但10秒鐘，它需要10.57秒做到這一點。有些東西搞亂了時間。 – ZSnake123 2013-03-06 23:47:36

radiusDelta和timeRate在配置1秒時的值是什麼（vs它們是10秒）？那些條件的初始半徑和最終半徑是多少？ – geocodezip 2013-03-07 00:34:22

這是我所做的。您可以通過調整setTimeout函數中給出的時間間隔來調整動畫。 http://jsbin.com/oritec/2/edit

function getCircle() { 
    var circle = { 
    path: google.maps.SymbolPath.CIRCLE, 
    fillColor: 'red', 
    fillOpacity: 0.6, 
    scale: 2, 
    strokeColor: 'red', 
    strokeWeight: 1, 
    strokeOpacity: 0.6 
    }; 
    return circle; 
     } 
     function init() { 
    var mapCenter = new google.maps.LatLng(41.7833, 5.2167); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     'zoom': 2, 
     'center': mapCenter, 
     draggable: false, 
     disableDefaultUI: true, 
     'mapTypeId': google.maps.MapTypeId.ROADMAP 
    }); 
    var rad = 0; 
    var sop = 1; 
    var sw = 1; 
    var fillop = 1;  
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(18.7000, 79.1833), 
     icon: getCircle(), 
     draggable: false 
    }); 

    for(var i=0;i<10;i++) 
    { 
     setTimeout(function(){     
        animate(); 
        rad += 50000; 
        sop -= 0.1; 
        fillop -= 0.1; 
        sw -= 0.1; 
       },i* 50); 
    } 

    function animate(){ 
     var circle2 = new google.maps.Circle({ 
     map: map, 
     radius: rad, 
     center: new google.maps.LatLng(18.7000, 79.1833), 
     strokeColor: "#FF0000", 
     fillColor: "#FF0000", 
     fillOpacity: fillop, 
     strokeWeight: sw, 
     strokeOpacity: sop 
    }); 
    setTimeout(function(){ 
     circle2.setMap(null); },100); 
} 
     } 
     google.maps.event.addDomListener(window, 'load', init);

來源

2013-04-11 06:10:24

看不到jsFiddle的工作。 – kaiser 2013-10-23 15:33:15

在給定時間內在谷歌地圖上圈動畫半徑增長/縮小

回答

相關問題