Animate усечение в 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 и изменить свойство Rect в обработчике событий Tick. Что-то вроде этого:

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