在给定的时间动画半径增长/收缩对谷歌地图的圆 [英] Animating radius growth/shrink of a circle on google maps in a given time

问题描述

我正尝试动画增长/在谷歌地图API圆的半径缩小。现在，我有什么是JS一个方法，该方法给出的时间，最终的半径，并计算半径的增量，用它计算时间率（或毫秒数等到循环的下一次迭代） 。问题是，它的工作对于较大的时间（如3秒以上）和更小的时候，它把它比它应该（几乎一切小于或等于1秒，它的服用，如2秒）。
这里的方法>

I´m trying to animate the growth/shrink of the radius of a circle on the Google Maps API. Right now what I have is a method in JS that takes the time given, the final radius and calculates a delta of the radius, with that it calculates the time rate (or the number of milliseconds to wait until the next iteration of the cycle). The thing is that it's working for larger times (like 3 seconds or more) and for smaller times it's taking it more than it should (almost for everything lower or equal to 1 sec, it's taking it like 2 secs). Here's the method>

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);
    }

我不明白为什么这是行不通的。有什么想法吗？任何想法是值得欢迎的，即使它是一个不同的算法（我甚至不知道是否有更好的方法来做到这一点）。

I can't figure out why this is not working. Any thoughts? Any idea is welcome, even if it's a different algorithm (I'm not even sure if there's a better way to do this).

谢谢！

推荐答案

下面是我做了什么。您可以通过调整setTimeout函数给出的时间间隔调整动画。 http://jsbin.com/oritec/2/edit

Here is what I have done. You can adjust the animation by adjusting the time interval given in setTimeout function. 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);

这篇关于在给定的时间动画半径增长/收缩对谷歌地图的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！