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

Animating radius growth/shrink of a circle on google maps in a given time

本文关键字：时间 谷歌地图 缩小 动画      更新时间：2023-09-26

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

我不明白为什么这不起作用。任何想法吗?任何想法都是受欢迎的，即使它是一个不同的算法(我甚至不确定是否有更好的方法来做到这一点)。

谢谢!

这是我所做的。你可以通过调整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);
相关文章：