动画在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

要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); 
}