Ability to re-use an animation on multiple controls

[dr1rrb]

I'm submitting a...

• Feature request

Current behavior

Animations are tightly coupled with the control (or RenderTransform) that they are animating They cannot be declared in resources and re-used on multiple controls as they can be on Windows.

Expected behavior

A transform can be declared in resources, re-used as RenderTranform on multiple controls across an application, and then animated.

Environment

Nuget Package: Uno.UI Package Version(s): irrelevant Affected platform(s):

• [x] iOS
• [x] Android
• [x] WebAssembly
• [ ] Windows
• [ ] Build tasks

Visual Studio: irrelevant Relevant plugins: none

[ramezgerges]

This is me reporting my findings with the way animations interact on Windows when they affect shared Transforms and the many cases around the idea of animations and transforms being used for multiple targets. This was initially noticed as one of many CommandBar problems being solved in #13214. From here on out, I will refer to cases of a transform being used multiple times as SharedTransform. Similarly, I will name a single animation that's used for different elements, SharedAnimation.

Code for all cases can be found at https://gist.github.com/ramezgerges/909df0982622c021caf0d5c62f46e631

• Case 1 Section 1: 2 Animations , 1 Transform, Animation bound to shared Transform by name
  • In this case, we have 2 animations and a TranslateTransform (SharedTransform) in a Resources section. SharedTransform is then used inside 2 Borders as their RenderTransform.
  • The animations target SharedTransform by name (i.e. Storyboard.TargetName="SharedTransform" Storyboard.TargetProperty="X")
  • Quite surprisingly, even if the animation is never ran, the two borders's transform appears to be one and the same. Setting one Border's RenderTransform.X will set move both Borders simultaneously. If the animation runs, we similarly find both borders moving together.
• Case 1 Section 2: 2 Animations , 1 Transform, Animation bound to UIElement.RenderTransform
  • This is almost identical to the previous case, except this time, the 2 animations are bound to the Borders (i.e. Storyboard.TargetName="Border1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)").
  • Changing one of the Borders' RenderTransform.X will change it for both borders, like they both share the transform. However, the moment an animation is played for one of them, each border seems to behave independently from that point on, Setting or animating one of the borders' RenderTransform.X after that initial animation doesn't affect the other in any way.
• Case 2: 1 Animation, 1 Transform, Animation bound to shared Transform by name
  • This is self explanatory at this point. The results are similar to Case 1 Section 1.
• Case 3: 1 animation with 1 Transform inside a DataTemplate.
  • Here, there's a ListView with a DataTemplate containing a Button with VisualStates that change Button.RenderTransform.X. Both the animation and the transform are declared inside the DataTemplate without any usage of StaticResources.
  • Here, each button behaves independently, which is kind of expected since there isn't really anything "shared".This happens whether I'm using Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" on the Button, or Storyboard.TargetProperty="X" on the transform directly.
• Case 4: 1 animation inside a DataTemplate with the transform referencing a static resource.
  • Similar to Case 3, but here the TranslateTransform is a static resource instead of being defined directly in the DataTemplate.
  • Findings are similar to Case 1 Section 2.
  • Here I'm using Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)". Trying to reference a shared StaticResource Transform from inside the template causes name resolution problems, so I couldn't test with Storyboard.TargetName="SharedTransform" Storyboard.TargetProperty="X".

Some general related findings

• Attempting to set a property while it's being animated will never do anything.
• Attempting to run the animation while it's already running will also do nothing.

All in all, it seems that the most interesting observation is that StaticResource transforms are cloned at the point of running an animation, but not before.

Gist

case1.1.md

GitHub Gist: instantly share code, notes, and snippets.