How to change size of a control through animation?

Viewed 37

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.

1 Answers

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);
}
Related