4

我正在尝试为 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);
    }

我不知道为什么这不起作用。有什么想法吗？欢迎任何想法，即使它是不同的算法（我什至不确定是否有更好的方法来做到这一点）。

谢谢！

4

1 回答 1

2

这是我所做的。您可以通过调整 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-11T06:10:24.900 回答