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>

是否可以创建一个带有从左到右逐渐改变剪辑的动画的故事板？文档指出了类似的内容，“动画针对这些 UIElement 属性的子属性值：Transform3D、RenderTransform、Projection、Clip ”，但我还没有找到这样的示例。

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>