cesium 动画添加

这里所说的动画不是cesium的Animation或者是czml，是浏览器上的动画requestAnimationFrame。之前我在threejs中使用过该动画，当时以为是threejs所特有的，在其中充当将静态网页动起来的重要对象。最近在cesium效果编写中觉得根据Animation或者是czml去绘制动画非常麻烦。得与cesium的时间轴相结合，我只需要点击后发生动画就行了。当然各有各的优势，对于简单的动画来说js的动画无非更加简单以及移植性更加好。

废话不多说，来先看下requestAnimationFrame的特性吧。 requestAnimationFrame
其实就是说递归，自己不断根据某个属性的变化来不断调用自身，使某个属性不断发生变化。比如说我想让3dtiles不断上升，可以解析为某个时间段让该3dtiles发生平移变换。想让3dtiles平移可以修改他的变换矩阵来实现。 API接口

传入一个变换矩阵来达到变换的效果。

var distance =0;
                    function animation(){
                        requestAnimationFrame(function(){
                            var translation=Cesium.Cartesian3.fromArray([-distance, distance, distance]);
                            var m= Cesium.Matrix4.fromTranslation(translation);
                            distance = distance+0.2;
                            self.map.tilesets["parkinglot1"]._modelMatrix = m;
                            self.map.tilesets["parkinglot"]._modelMatrix = m;

                            if(distance<15){
                                animation();//不断调用自身
                            }else{
                                addEntrance(self);
                                queryParkingNumber();
                            };
                        })
                    }

这样就会有动画效果了，是不是非常简单，同时如果你想让该动画发生在cesium的flyto函数执行之后，可以调用其完成后的回调函数。我用的是camera的flyto，viewer的flyto我没发现其回调接口。只要将其放入complete后就行了，代码中我做过封装，原理是一样的。

self.map.flyTo({
                        destination: new Cesium.Cartesian3(-2506686.9441362103, 4658206.935923001, 3552200.4119844055),
                        orientation: {
                            heading: 3.8527405078650916,
                            pitch: -0.531606095336215,
                            roll: 6.280831687840141
                        },
                        duration: 3,
                    },function (){
                        animation();

                    });

写的不好之处，还请大家指出来。