30th March 2017 Olivier

Spotlight animation with composition API

I’m having fun lately with Composition API. What is Composition API? These are APIs to manipulate the Visual Layer. It’s a graphic layer of lower level comparedto the Framework XAML. This allows optimized effects and animations


The doc is good, you can see it here: https://docs.microsoft.com/en-us/windows/uwp/graphics/visual-layer

I had little fun (on the Anniversary of 10 Windows version) with the Spotlight and animations.
To start, here’s a simple XAML:

And the code:

Composition API works with visuals. What I do first is take the visual of the XAML rectangle. After that, I’ll take his compositor. The compositor is an object that will allow to create visuals. Like the SpotLight from the line after. Then I filled some properties of this spotlight (color of the cone, etc…) and finally I told him that he must have as target the visual of the rectangle.

In action:



That’s nice, but what about some animation? I use the ScalarKeyFrameAnimation. Under this barbarous name hides just an animation where a scalar value is given for certain stages (keys), and Composition API will do the interpolation between those keys

I animate the angle of the innercone here. I give him 3 steps (defined by a float that goes from 0 (0%) to 1.0 (100%)): 0% it is 0, it is 30 to 50%, and 100% it is back to zero. Then I give duration (4 seconds), and precise that animation must be replay infinitely.

Very well, but what about going further? Also changing the color of spotlight?

I create a list of colors, I create a KeyFrameAnimation, but to animate colors this time. There is a small calculation to make the color change happen just when the cone angle is 0. Since Composition API compute a linear interpolation between the keys of the animation, I put a step just a little bit before the color change with the current color, so it will look like there is no interpolation.
Now we just have to launch the animation

The result:


Composition API, one of the best things that happened on Windows 10! It gives us everything we need to make incredibly beautiful and fluid with interfaces. I had only touched the subject, soon there will be other posts about it !


Mobile and Mixed Reality engineer , Arcana Studio
follow me


Leave a Reply

Your email address will not be published. Required fields are marked *