UWP 中的动画剪辑

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>

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

Answer 1

您可以使用 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);
}

Answer 2

要在 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>

UWP 中的动画剪辑

Animate clipping in UWP

uwp

windows-10-universal

uwp-xaml