如何将按钮从 y 10 动画化到 y 0 - UWP

Question

从 Y 坐标 10 到 Y 坐标 0 的动画按钮。动画如：缓入缓出、缓入缓出。谢谢！

Answer 1

How to animation button from y 10 to y 0 - UWP

您可以将 DoubleAnimation 与 EasingFunction 结合使用来为您的按钮设置动画。以下是完整的示例。

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="Storyboard2">
            <DoubleAnimation
                Storyboard.TargetName="MyButton"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                From="0"
                To="200">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase EasingMode="EaseIn" Exponent="4.5" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <Button
        x:Name="MyButton"
        VerticalAlignment="Center"
        Click="Button_Click"
        Content="HelloWorld">
        <Button.RenderTransform>
            <CompositeTransform />
        </Button.RenderTransform>
    </Button>
</Grid>

用法

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard2.Begin();
}