Question

以下XAML代码会创建一个框，其中内容的一半被剪裁：

<Grid Width="90"
        Height="34"
        Background="Red"
        BorderBrush="Black"
        BorderThickness="2">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,45,34" />
    </Grid.Clip>
    <TextBlock Foreground="White" Margin="4">Hello world</TextBlock>
</Grid>

是否可以创建一个动画的故事板，从左到右逐渐改变剪辑？文档中指出了类似的内容，＆＃34; The animation targets a sub-property value of these UIElement properties: Transform3D, RenderTransform, Projection, Clip＆＃34;，但我还没有找到这样的示例。

Answer 1

要在UWP中设置裁剪动画，我们可以将ObjectAnimationUsingKeyFrames与Grid.Clip一起使用，如下所示：

<Storyboard x:Name="Storyboard1">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="Grid.Clip">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.25">
            <DiscreteObjectKeyFrame.Value>
                <RectangleGeometry Rect="0,0,55,34" />
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.50">
            <DiscreteObjectKeyFrame.Value>
                <RectangleGeometry Rect="0,0,65,34" />
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.75">
            <DiscreteObjectKeyFrame.Value>
                <RectangleGeometry Rect="0,0,75,34" />
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1">
            <DiscreteObjectKeyFrame.Value>
                <RectangleGeometry Rect="0,0,90,34" />
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>
...
<Grid x:Name="grid"
      Width="90"
      Height="34"
      Background="Red"
      BorderBrush="Black"
      BorderThickness="2"
      RenderTransformOrigin="0.5,0.5">

    <Grid.Clip>
        <RectangleGeometry Rect="0,0,45,34" />
    </Grid.Clip>

    <TextBlock Margin="4" Foreground="White">Hello world</TextBlock>
</Grid>

然而，这是一个关键帧动画，如果你需要一个线性插值动画，你可以尝试如下：

<Storyboard x:Name="Storyboard1">
    <DoubleAnimation Duration="0:0:1"
                     Storyboard.TargetName="grid"
                     Storyboard.TargetProperty="(UIElement.Clip).(Geometry.Transform).(CompositeTransform.TranslateX)"
                     To="0" />
</Storyboard>
...
<Grid x:Name="grid"
      Width="90"
      Height="34"
      Background="Red"
      BorderBrush="Black"
      BorderThickness="2"
      RenderTransformOrigin="0.5,0.5">

    <Grid.Clip>
        <RectangleGeometry Rect="0,0,90,34">
            <RectangleGeometry.Transform>
                <CompositeTransform TranslateX="-45" />
            </RectangleGeometry.Transform>
        </RectangleGeometry>
    </Grid.Clip>

    <TextBlock Margin="4" Foreground="White">Hello world</TextBlock>
</Grid>

Answer 2

您可以使用DispatcherTimer并在其Tick事件处理程序中更改Rect属性。像这样：

<RectangleGeometry x:Name="rec" Rect="0,0,45,34" />

DispatcherTimer timer = new DispatcherTimer();
timer.Tick += timer_Tick;
timer.Interval = TimeSpan.FromMilliseconds(50);
timer.Start();

private void timer_Tick(...)
{
    rec.Rect = new Rectangle(left, top, width, height);
}

UWP中的动画剪裁

2 个答案: