1

I want to change the size of a control through animation, which looks like 3D Touch animation on iOS(not just ScaleAnimation, I want to change the length and width of it separately), and then attach the animation to the control.

I have tried to search for documents of Microsoft.Toolkit.Uwp.UI.Animations namespace but find nothing.

wxinbang
  • 11
  • 2

1 Answers1

0

I have tried to search for documents of Microsoft.Toolkit.Uwp.UI.Animations namespace but find nothing.

Microsoft.Toolkit contains AnimationExtensions Scale method could be used to scale element, you could refer to document here.

You could also use a natural motion composition animation on a uielement. For more detail please refer to xaml controls gallery app.

For Example

Compositor _compositor = Window.Current.Compositor;
SpringVector3NaturalMotionAnimation _springAnimation;

private void CreateOrUpdateSpringAnimation(float finalValue)
{
    if (_springAnimation == null)
    {
        _springAnimation = _compositor.CreateSpringVector3Animation();
        _springAnimation.Target = "Scale";
    }

    _springAnimation.FinalValue = new Vector3(finalValue);
}

private void element_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    // Scale up to 1.5
    CreateOrUpdateSpringAnimation(1.5f);

    (sender as UIElement).StartAnimation(_springAnimation);
}

private void element_PointerExited(object sender, PointerRoutedEventArgs e)
{
    // Scale back down to 1.0
    CreateOrUpdateSpringAnimation(1.0f);

    (sender as UIElement).StartAnimation(_springAnimation);
}
Nico Zhu
  • 32,367
  • 2
  • 15
  • 36
  • I have tried this method but it seems that it is no longer provided in NuGet package, and this code looks length and width are magnified by the same multiple. What I need is not the same multiple, If getting older version could solve this, I want to know the correct version. – wxinbang Aug 09 '22 at 02:40
  • It is aviable in WindowsCommunityToolkit version [6.1.1](https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/dev/6.1.1/Microsoft.Toolkit.Uwp.UI.Animations/Extensions/AnimationExtensions.Scale.cs) – Nico Zhu Aug 09 '22 at 03:30
  • Thanks for your solution but this version is too old for me to develop other visual effects. Recently I found Storyboard in *System.Windows.Media.Animation* , can it meet my requirement? – wxinbang Aug 13 '22 at 11:51
  • Sure, you could use double animation to animatie Scale property like WindowsCommunityToolkit [did](https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/dev/6.1.1/Microsoft.Toolkit.Uwp.UI.Animations/Extensions/AnimationExtensions.Scale.cs#L91) . – Nico Zhu Aug 15 '22 at 01:16