這里所說的動(dòng)畫不是cesium的Animation或者是czml，是瀏覽器上的動(dòng)畫requestAnimationFrame。之前我在threejs中使用過該動(dòng)畫，當(dāng)時(shí)以為是threejs所特有的，在其中充當(dāng)將靜態(tài)網(wǎng)頁(yè)動(dòng)起來(lái)的重要對(duì)象。最近在cesium效果編寫中覺得根據(jù)Animation或者是czml去繪制動(dòng)畫非常麻煩。得與cesium的時(shí)間軸相結(jié)合，我只需要點(diǎn)擊后發(fā)生動(dòng)畫就行了。當(dāng)然各有各的優(yōu)勢(shì)，對(duì)于簡(jiǎn)單的動(dòng)畫來(lái)說js的動(dòng)畫無(wú)非更加簡(jiǎn)單以及移植性更加好。
requestAnimationFrame
其實(shí)就是說遞歸，自己不斷根據(jù)某個(gè)屬性的變化來(lái)不斷調(diào)用自身，使某個(gè)屬性不斷發(fā)生變化。比如說我想讓3dtiles不斷上升，可以解析為某個(gè)時(shí)間段讓該3dtiles發(fā)生平移變換。想讓3dtiles平移可以修改他的變換矩陣來(lái)實(shí)現(xiàn)。
API接口
傳入一個(gè)變換矩陣來(lái)達(dá)到變換的效果。
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();//不斷調(diào)用自身
}else{
addEntrance(self);
queryParkingNumber();
};
})
}
這樣就會(huì)有動(dòng)畫效果了，是不是非常簡(jiǎn)單，同時(shí)如果你想讓該動(dòng)畫發(fā)生在cesium的flyto函數(shù)執(zhí)行之后，可以調(diào)用其完成后的回調(diào)函數(shù)。我用的是camera的flyto，viewer的flyto我沒發(fā)現(xiàn)其回調(diào)接口。只要將其放入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();
});
寫的不好之處，還請(qǐng)大家指出來(lái)。
