Question

我正在尝试了解WPF中的Storyboard和动画。我有一个非常简单的问题，我似乎无法回答。

我有一个放置在网格中的矩形。我试图将矩形从网格的一侧移动到另一侧。我可以让矩形成功移动。然而问题是我正在指定From＆amp;为了价值观。因此，在我的下面的代码中，我硬编码了from（50）＆amp;到（300）值。我想要发生的是矩形转到网格的另一边而没有我硬编码值。因为如果用户调整窗口大小，我输入的值将是浪费时间。

 <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"  
                                             From="50"
                                             To="300"
                                             Duration="0:0:5"/>
                            <ColorAnimation
                                Storyboard.TargetProperty="Fill.Color"
                                To="Yellow"
                                BeginTime="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Rectangle.Triggers>

Answer 1

您可以使用RenderTransform的ScaleTransform，而不是使用Width属性。这将允许您根据父元素而不是宽度本身进行缩放。请参阅下面的示例，看看它是否有效......

<Rectangle Height="70" Fill="Green">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="0.2"/>
        </TransformGroup>
    </Rectangle.RenderTransform>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"  
                                        From="0.2"
                                        To="1"
                                        Duration="0:0:5"/>
                        <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        To="Yellow"
                        BeginTime="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

Answer 2

使用Storyboard设置动画尺寸/位置时，请始终使用ActualWidth和/或Actualheight属性，而不是通常的Width和Height属性，因为Width和Height属性通常具有NaN（非数字）值，当Storyboard尝试访问它们时，这些值会爆炸。

对于此动画，您需要声明父元素的Name属性，因为我们将在Storyboard中引用它。试试这个，让我知道你是怎么做的：

<Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" From="50" 
To="{Binding ActualWidth, ElementName=ParentContainer}" Duration="0:0:5"/>
                    <ColorAnimation Storyboard.TargetProperty="Fill.Color" To="Yellow" 
BeginTime="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Rectangle.Triggers>

WPF动画相对值

2 个答案: