Hi,
I had previously been using version b28 and was taking heavy advantage of scene.animations to perform smooth transitions of my billboards to new positions on the fly.
Now that this feature is no longer public, how can I go about animating my billboards so that they move slowly (~1 sec) to their new positions?
Any help would be appreciated! (I hope I am not missing something simple)
B.
Good question. A quick scan through the Cesium docs doesn’t show anything obvious directly in the Cesium API. You may need to do it a bit indirectly using some kind of tweening library and update your billboard’s positions as the tween progresses.
One possibility is actually to slightly abuse $.animate(). You can pass it plain JS objects, have it animate properties of those objects, and update your billboards using those values in the step() handler.
Digging through the Cesium source, it appears that they are using a third-party Tween.js library, and actually exposing a reference to it attached to the core Cesium object (in the combined build). See Cesium’s Camera.flyTo() and CameraFlightPath.createTween() for some examples. Cesium’s usage of this library is not documented, but I would expect it to continue to be available in the near future, so you could potentially use it as well.
Well, proving that a fresh set of eyes usually solves a problem quickly...
I somehow missed the TweenCollection & Tween objects that have replaced AnimationCollection & Animation. They are not in the online documentation, however, and examples of both have all been removed from Sandcastle so I'm not sure how much the devs actually want this used.
That being said, the following changes worked perfectly for me.
I'll just leave this here on the off chance it helps someone else 
Previous code:
var anim;
function update(value) {
billboard.position = new Cesium.Cartesian3(value.x, value.y, value.z);
}
function complete() {
anim = undefined;
}
// animate
anim = anim || scene.animations.add({
onUpdate: update,
onComplete: complete,
startValue: {
x: b.position.x,
y: b.position.y,
z: b.position.z
},
stopValue: {
x: new_pos.x,
y: new_pos.y,
z: new_pos.z
},
duration: 1000,
easingFunction: Cesium.Tween.Easing.Quartic.Out
});
New code:
var tween;
function update(value) {
billboard.position = new Cesium.Cartesian3(value.x, value.y, value.z);
}
function complete() {
tween = undefined;
}
// animate
tween = tween || scene.tweens.add({
update: update,
complete: complete,
startObject: {
x: b.position.x,
y: b.position.y,
z: b.position.z
},
stopObject: {
x: new_pos.x,
y: new_pos.y,
z: new_pos.z
},
duration: 1.0,
easingFunction: Cesium.EasingFunction.QUARTIC_OUT
});
Just an FYI; the animation stuff was marked private before the 1.0 release because we felt it wasn’t ready for primetime. You can certainly use the undocument/private version; but there’s no guarantee that it won’t change sometime in the future (but not anytime soon). Another option is to just use Tween.js, https://github.com/sole/tween.js/, which is what Cesium is currently wrapping under the hood.
Hello,
I would like to know if there are any news regarding wether the animation stuff will be part of the public API anytime soon.
I am currently working on animation paths for the camera and I use flyTo() to move the camera between keyframes. But for large distances, the camera "jumps" (flying up, moving, than flying down again). So I thought about implementing my own animation paths using tweens.
Should I use Cesium's Tween stuff (currentlich private) or use Tween.js?
Would you use the CallbackProperty for the position property of the Entity?
I am not sure if I understood your question. I do not animate Entities, but the camera.
Or where you referring to Bean's Post?
Regards,
Anne