-
Notifications
You must be signed in to change notification settings - Fork 14
Skeleton loading animation
Many UI designs require the skeleton loading animation. For this reason, a Monobehaviour has been created. Its name is SkeletonLoadingView inside DCL.UI.
Inside your prefab, you need to create two gameobjects:
- loaded state
- loading state
Both need to have a CanvasGroup component.
To keep things organized, both objects should have a common parent where SkeletonLoadingView can be placed.
Under loaded state there's the normal UI, while under loading state you create your skeletons.
Each animated bone must have a gradient texture as a child. The design relies on the fact that this gradient texture is GradientLoading, therefore its length must be double the width of its container and its X=0 position must be on the left most side of the parent.
The final step is to drag all the canvas groups references and the gradient (bones) to the array inside SkeletonLoadingView. There you can configure the fade in (of the loaded state) duration and the tween duration for the wave effect.
All communities UIs implement this loading animations. Therefore you can refer to their prefabs.
There's a prefab that implements this loading animation for images. It works like Image (with an ImageController) and it's called ImageWithSkeletonAnimation.