This sample demonstrates how to toggle a layer's visibility with a fade in transition using requestAnimationFrame.
How it works
By default, when a user toggles a layer's visibility on and off, it flashes between visible and invisible. You can use the layer's opacity property in conjunction with requestAnimationFrame to create a smooth fade-in transition from invisible to visible.
The following function demonstrates how to do this. See the comments for a detailed walk-through of how this works.
functionfadeVisibilityOn(layer) {
// Once this function is called, we create an animating variable// to keep track of the animation status.let animating = true;
let opacity = 0;
// fade layer's opacity from 0 to// whichever value the user has configuredconst finalOpacity = layer.opacity;
// Start the animation by setting the layer's opacity to 0.// Technically the layer is now visible (because the LayerList widget// controls the visible property of the layer) so to create// the illusion of the layer being invisible, we'll set the// opacity to 0 layer.opacity = opacity;
view.whenLayerView(layer).then(function(layerView){
// Wait for tiles to finish loading before beginning the fade-in// transition. The layer view's 'updating' property is true when// data is being downloaded and tiles are drawing in the view// Waiting for this property to be false makes the fade-in transition// smoother (you don't see tiles) though it forces the user to wait// a little longer for the transition to start watchUtils.whenFalseOnce(layerView, "updating", function(updating){
requestAnimationFrame(incrementOpacityByFrame);
});
// This function will fire on every frame before the browser repaints.functionincrementOpacityByFrame() {
// Stop the animation if the opacity has reached the same value// as the pre-defined finalOpacityif((opacity >= finalOpacity) && animating){
animating = false;
return;
}
// Increment the opacity and set the new value on the layer opacity += 0.05;
layer.opacity = opacity;
// Continue the animation at the next frame requestAnimationFrame(incrementOpacityByFrame);
}
});
}
Watch the visible property of a ListItem in the LayerList widget to fire the fadeVisibilityOn function each time the user toggles a layer's visibility.