Best practice motion graphics and touch application in UWP

Question

We are currently developing an multitouch multiuser application using UWP and XAML (Terminal in a museum). Obviously the application has a lot of animations and transformations included, i.e. moving usercontrols around using touch input, menu opening animations, touch rotations etc.

To better understand what kind of Application this is going to be, here is a Video of an application with kind of the behaviour we are targeting (minutes 0:16 - 0:27): https://www.youtube.com/watch?time_continue=13&v=qIOR9FiL97w

---

Now my question is what is the best practice to handle all these animations. Currently we are using RenderTransforms for all the moving of UserControls (like touch movement, touch rotation etc.) and Storyboard animations for Menu Animations (like opening animation of a menu, closing animations etc.). Our concern is the performance, since we are running this on 4K and multiple users are meant to use it at once.

I recently read about Windows.UI.Composition API but as I understood this is mainly for smaller animations on button presses etc, not more complex and dynamic animations like in our case (i.e. Menu can be somewhere on the screen, position defined by a translateTransform and background animation of menu is dependent on selected menu entry).

Combining all the dynamic stuff with Storyboard animations can be a struggle since I have to create the Storyboard in code to use the (partly random generated) dynamic values (like offset, selected menu entry etc). Is there any better solution for this?

Answer 1

Now my question is what is the best practice to handle all these animations

Composition API is best performance of three animation you mentioned,

The Windows.UI.Composition APIs allows you to create, animate, transform and manipulate compositor objects in a unified API layer. Composition animations provide a powerful and efficient way to run animations in your application UI. They have been designed from the ground up to ensure that your animations run at 60 FPS independent of the UI thread and to give you the flexibility to build amazing experiences using not only time, but input and other properties, to drive animations.

It could implement a lot of animation such as moving rotation etc, it's is complicated, And this is code sample that you could refer this.

RenderTransforms for all the moving of UserControls (like touch movement, touch rotation etc.) and Storyboard animations for Menu Animations (like opening animation of a menu, closing animations etc.).

Although RenderTransforms and Storyboard animations are not the best performance, but they are very easy to use. you could write them in the xaml and control it in the code behind. For more detail please refer this.