Question

我想设置控件的宽度（此处为矩形）的动画。该代码会为宽度设置动画，并自动将宽度重新设置为原始宽度，但是如果我在中途再次触发动画，则不会。在这种情况下，宽度会在我重新触发时自动反转为宽度，永远不会回到其原始宽度。

为动画设置“ From”属性需要我记住原始宽度，而不是运行时宽度，仅此而已。不能找到一种方法来绑定到矩形宽度或其他东西。就像说<DoubleAnimation From="rectangle.Width"/>

    <Style x:Key="animation" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Rectangle x:Name="rectangle" Fill="Blue" Width="500"></Rectangle>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="Width"
                                                 To="250" Duration="0:0:1" AutoReverse="True"></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>

        </Setter>

    </Style>

我认为将矩形元素的宽度绑定到动画中的“ From”属性将解决所有问题。因为它将始终自动返回到该状态。我听了From="{Binding ElementName=rectangle,Path=Width}"。它是有效的xaml代码。但是在构建错误之后它说 Error Cannot freeze this Storyboard timeline tree for use across threads.

Answer 1

与其对矩形的宽度进行动画处理并因此处理绝对大小值，还不如对其进行动画处理，例如ScaleTransform。像这样：

<ControlTemplate>
    <Grid>
        <Rectangle x:Name="rectangle" Fill="Blue" Width="500"
                   RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <ScaleTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="rectangle"
                        Storyboard.TargetProperty="RenderTransform.ScaleX"
                        From="1" To="0.5" Duration="0:0:1" AutoReverse="True"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

动画控件的宽度

1 个答案: