In a WinUI 3 project I've applied a SpringVector3NaturalMotionAnimation
to a Polygon
shape object. The effect I'd like to obtain is a scaling up/down animation whenever the pointer enter/exit the polygon (it's a triangle) surface.
XAML
<StackPanel>
<Canvas Name="Container"
Height="20"
Width="20"
HorizontalAlignment="Center">
<Polygon x:Name="Cursor"
Points="0,20 10,0 20,20"
Fill="Green" />
</Canvas>
</StackPanel>
Code
private readonly Compositor Compositor = CompositionTarget.GetCompositorForCurrentThread();
private SpringVector3NaturalMotionAnimation SpringAnimation;
private void Cursor_PointerEntered(object sender, PointerRoutedEventArgs e)
{
CursorScaleAnimation(1.1f);
(sender as UIElement).StartAnimation(SpringAnimation);
}
private void Cursor_PointerExited(object sender, PointerRoutedEventArgs e)
{
CursorScaleAnimation(1f);
(sender as UIElement).StartAnimation(SpringAnimation);
}
private void CursorScaleAnimation(float value)
{
if (SpringAnimation == null)
{
SpringAnimation = Compositor.CreateSpringVector3Animation();
SpringAnimation.Target = "Scale";
}
SpringAnimation.FinalValue = new Vector3(value);
SpringAnimation.DampingRatio = 0.6f;
SpringAnimation.Period = new TimeSpan(0, 0, 0, 0, 60);
}
The above code works, but the issue is that the polygon is set to be centered on the container and the animation instead applies the scale from the (0, 0)
point of the shape to the right. So, even if the scaling is small, you see the polygon moving a bit from the left to the right and vice-versa.
I'd like to apply the animation from the center point of the polygon. Is it possible? Maybe using a different kind of animation?
P.S.: An additional question. I've also noticed (using a bigger scale factor) that the animation applies the scale to the polygon in a "non-vectorial way", like scaling an image over it's maximum resolution and so it loses a bit of it's definition. Since the polygon is a vectorial object, is there any way to scale it just by changing it's actual size (always from the center point)?