在给定时间内在谷歌地图上圈动画半径增长/缩小

我试图在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

在给定时间内在谷歌地图上圈动画半径增长/缩小

回答

相关问题