動畫在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); 
}