javascript的时间描述图怎么写

在gis系统中往往需要在一个时间间隔内把图形动态播放出来，比如2000年到现在地震变化啊，海啸的变化，在flex中这种展现方式需要后台rest服务相结合，要建立有时间点的图层，arcgis发布要选timeinfo属性，如果我们不用后台，数据格式是json或者xml形式应该怎么做呢，在flex中还有帧动画这个东东，在javascript应该怎么写呢，因为这个表现形式要以数据做支持，而且要在一个地图底图上叠加不断展现，现有javascript动画库是用不上了，很多都是css动画和canvas（html5）的，但是可以用settime这个函数展示这种变化，比如说某某月到某某月热点图的变化。写了一个热点图时间描述。

 /**
  * Created by haibalai on 2015/9/29.
  */
 var HeatLayerAnimate = function()
 {

     var heatLayerManager;

     var ajaxTool;

     var queryVo = new QueryVO();

     //设置时间间隔
     var timeinterval = 5000;

     var isStopFlag = false;

     this.init = function(heatLayerManager1)
     {
         heatLayerManager = heatLayerManager1;
         ajaxTool = new AjaxTool();

     }

     /**
      * 添加某个时间段的分色
      * @param queryVO
      * @param polygon
      */
     this.addAnimate = function(queryVO1,polygon)
     {
         queryVo = queryVO1;
         heatLayerManager.addRenderCallBack(queryVO1,polygon,ajaxquery);
     }

     function ajaxquery(param)
     {
         param.startDate = queryVo.startDate;
         param.endDate = queryVo.endDate;
         param.layerName= queryVo.layerName;
         param.tjfs = queryVo.tjfs;
         var str =   JSON.stringify(param);

         //--------------------------------------测试环境用
         ajaxTool.getTimeHeatData1(str,ajaxBack);
         //-------------------------------------

         //--------------------------------------真实环境用
         //ajaxTool.getTimeHeatData(str,ajaxBack);
         //-------------------------------------
     }

     var i = 0;
     var len = 0;
     var num1 = 0.01;
     var obj;

     function ajaxBack(obj1)
     {
         num1 = 0.01;
         len = obj1.dataarr.length;
         i = 0;
         obj = obj1;

         setRender(i);

     }

     function setRender(i)
     {
         if(i < len)
         {
             if(isStopFlag == false)
             {
                 setTimeout(function()
                 {
                     var codeobj = obj.dataarr[i];
                     renderplay(codeobj,i,setRender);
                 },timeinterval);
             }

         }

     }

     function renderplay(codeobj,i,callback)
     {
         if(isStopFlag == false)
         {
             heatLayerManager.ajaxBackFun(codeobj,num1);
             // -----------------------------------num1 这一段是我测试用的
             num1 = num1 + 0.05;
             //--------------------------------------------------------
             i++;
             callback(i);
         }

     }

     /**
      * 停止动画
      */
     this.stopRender = function()
     {
         isStopFlag = true;
     }

     /**
      * 动画再生
      */
     this.resumeRender = function()
     {
         isStopFlag = false;
         setRender(i);
     }

 }