UWP 中的动画剪辑答案

【问题标题】：Animate clipping in UWPUWP 中的动画剪辑
【发布时间】：2016-09-25 08:17:10
【问题描述】：

以下 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”的内容，但我还没有找到这样的示例。

【问题讨论】：

标签： uwp windows-10-universal uwp-xaml

【解决方案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>

【讨论】：

谢谢，这真的解释了一切。如果可能的话，我会为 Storyboard.TargetProperty 中的语法加分 :-)

【解决方案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);
}

【讨论】：