A animation helper that morphs between two controls

[HHChaos]

Feature #4323

A new animation helper that morphs between two controls was added in this PR and an example for it.

PR Type

What kind of change does this PR introduce?

• Feature

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• New component
  • Pull Request has been submitted to the documentation repository instructions. Link:
  • Added description of major feature to project description for NuGet package (4000 total character limit, so don't push entire description over that)
  • If control, added to Visual Studio Design project
• Sample in sample app has been added / updated (for bug fixes / features)
  • Icon has been created (if new sample) following the Thumbnail Style Guide and templates
• New major technical changes in the toolkit have or will be added to the Wiki e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
• Tests for the changes have been added (for bug fixes / features) (if applicable)
• Header has been added to all new source files (run build/UpdateHeaders.bat)
• Contains NO breaking changes

Other information

The document is not ready.

[ghost]

Thanks HHChaos for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

[boyofgreen]

😍😍😍

[ghost]

This PR has been marked as "needs attention 👋" and awaiting a response from the team.

[michael-hawker]

Sharing some thoughts I had on if we can expose XAML helpers for this as well:

<Page.Resources>
  <ani:TransitionHelper x:Key="MyTransitionHelper">
    <ani:AnimationConfig Id="background" Properties="Scale"/>
    <ani:AnimationConfig Id="image" Properties="Scale"/>
    <ani:AnimationConfig Id="guide"/>
    <ani:AnimationConfig Id="name" Properties="ScaleY"/> <!-- If use flag enum then should be able to combine like "ScaleX,ScaleY" -->
    <ani:AnimationConfig Id="desc"/>
  </ani:TransitionHelper>
</Page.Resources>

<!-- Existing Sample Code -->

<Button x:Name="MaxToMinButton">
  <interactivity:Interaction.Behaviors>
    <interactions:EventTriggerBehavior EventName="Click">
      <behaviors:StartTransitionAction Transition="{StaticResource MyTransitionHelper}" Source="{Binding ElementName=ThirdControl}" Target="{Binding ElementName=FirstControl}"/>
    </interactions:EventTriggerBehavior>
  </interactivity:Interaction.Behaviors>
</Button>

Will have to dig into code more and think if we can simplify a bit further... 😉

Super excited to see how this feature can be used! Super cool. Going to mark as draft for now as we continue to explore and optimize.

[michael-hawker]

@HHChaos we want to move this over to Labs. Is that something you want to learn how to do, or want us to help assist with the initial migration (we can still credit the commit to your account)? Let us know, in either case, @niels9001 and I can help out here.

[HHChaos]

Thanks @michael-hawker @niels9001 for help! It would be best if you could help with the initial migration.

[michael-hawker]

@HHChaos thanks for continuing to update this PR. 🦙❤ As discussed previously, I've moved this PR to Labs. The new PR is here: CommunityToolkit/Labs-Windows#354

Get better soon, we're all wishing you well.