4

GoogleMapsAPIで円の半径の拡大/縮小をアニメーション化しようとしています。今私が持っているのは、与えられた時間、最終的な半径を取り、半径のデルタを計算する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 に答える