将多个控件动画化到它们的位置

Question

假设我有一个按钮和它后面的 3 个按钮。当我单击该按钮时，我希望它后面的按钮根据它们的位置进行动画处理。我试图在这张图片中解释它：

Answer 1

试试这个：

<Grid VerticalAlignment="Top" Margin="50">
    <Grid.Resources>
        <QuadraticEase x:Key="AnimationEase" EasingMode="EaseInOut"/>
    </Grid.Resources>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="AnimateButton">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation Storyboard.TargetName="Transform1" Storyboard.TargetProperty="Y" Duration="0:0:0.25" From="0" To="300" EasingFunction="{StaticResource AnimationEase}" />
                    <DoubleAnimation Storyboard.TargetName="Transform2" Storyboard.TargetProperty="Y" Duration="0:0:0.25" From="0" To="200" EasingFunction="{StaticResource AnimationEase}" />
                    <DoubleAnimation Storyboard.TargetName="Transform3" Storyboard.TargetProperty="Y" Duration="0:0:0.25" From="0" To="100" EasingFunction="{StaticResource AnimationEase}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Ellipse Width="80" Height="80"  Fill="Red">
        <Ellipse.RenderTransform>
            <TranslateTransform x:Name="Transform1" />
        </Ellipse.RenderTransform>
    </Ellipse>

    <Ellipse Width="80" Height="80"  Fill="Green">
        <Ellipse.RenderTransform>
            <TranslateTransform x:Name="Transform2" />
        </Ellipse.RenderTransform>
    </Ellipse>

    <Ellipse Width="80" Height="80"  Fill="Blue">
        <Ellipse.RenderTransform>
            <TranslateTransform x:Name="Transform3" />
        </Ellipse.RenderTransform>
    </Ellipse>

    <Button x:Name="AnimateButton" Width="100" Height="100" />

</Grid>

将多个控件动画化到它们的位置

Animate multiple controls to their positions

.net

c#

wpf

animation