Comment puis-je animer un tracé de détourage

Question

J'essaie d'animer un tracé de détourage. Je lis de Mask Animations (Clipping Path Animations) In Silverlight Without a Line of Code que j'animer le 1er chemin de détourage si

Data=”M159.67175,104.26108 L177.91812,28.328932 L195.51648,104.43327 L255.0802,102.6104 L206.86984,151.82758 L225.8029,226.56477 L179.0616,179.17046 L129.73396,229.29906 L147.97842,150.63879 L98.650803,101.53297 z” 

sera changé pour

<Path.Data> 
<PathGeometry> 
    <PathFigure IsClosed=”True” StartPoint=”91.0527648925781,84.0121078491211?> 
     <LineSegment Point=”118.057907104492,0.549586236476898?/> 
     <LineSegment Point=”144.103973388672,84.2013778686523?/> 
     <LineSegment Point=”232.259979248047,82.1977386474609?/> 
     <LineSegment Point=”160.907287597656,136.2958984375?/> 
     <LineSegment Point=”188.928756713867,218.444961547852?/> 
     <LineSegment Point=”119.750289916992,166.350433349609?/> 
     <LineSegment Point=”46.7439804077148,221.450408935547?/> 
     <LineSegment Point=”73.7462997436523,134.989212036133?/> 
     <LineSegment Point=”0.740016639232636,81.0134506225586?/> 
    </PathFigure> 
</PathGeometry> 
</Path.Data> 

mais après animant le chemin, mon XAML ressemble toujours

<Path x:Name="path" Data="M0.5,0.5 L84.5,0.5 L84.5,150.5 L0.5,150.5 z" HorizontalAlignment="Left" Height="151" Margin="76,55,0,0" Stretch="Fill" Stroke="{x:Null}" VerticalAlignment="Top" Width="85" Fill="Black" RenderTransformOrigin="0.5,0.5"> 
    <Path.RenderTransform> 
     <TransformGroup> 
      <ScaleTransform/> 
      <SkewTransform/> 
      <RotateTransform/> 
      <TranslateTransform/> 
     </TransformGroup> 
    </Path.RenderTransform> 
</Path> 

A courte vidéo sur le problème http://screenr.com/1Wc

Answer 1

Vous devez créer t Le chemin de détourage avant de faire l'animation. Puis, utilisez l'outil Sélection directe (la deuxième flèche vers le bas sur la barre d'outils dans le mélange 4) pour sélectionner le tracé de détourage. Si vous déplacez le tracé de détourage lors de l'enregistrement d'une timeline, l'animation sera animée comme vous le souhaitez.

Voici le XAML à partir de deux rectangles - un grand avec un gradient linéaire, et un plus petit qui est le chemin de détourage. Le rectangle de découpe est animé et suit le dégradé.

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
x:Class="WpfSplash.TemplatePanel" 
x:Name="UserControl" Height="1000" Width="544"> 
<UserControl.Resources> 
    <Storyboard x:Key="OnLoaded1"> 
     <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="rectangle"> 
      <EasingPointKeyFrame KeyTime="0:0:1" Value="495,184.5"/> 
     </PointAnimationUsingKeyFrames> 
     <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" Storyboard.TargetName="rectangle"> 
      <EasingPointKeyFrame KeyTime="0:0:1" Value="-14.9999999999998,184.5"/> 
     </PointAnimationUsingKeyFrames> 
     <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)" Storyboard.TargetName="rectangle"> 
      <EasingPointKeyFrame KeyTime="0:0:1" Value="-14.9999999999998,142.5"/> 
     </PointAnimationUsingKeyFrames> 
     <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="rectangle"> 
      <EasingPointKeyFrame KeyTime="0:0:1" Value="495,142.5"/> 
     </PointAnimationUsingKeyFrames> 
    </Storyboard> 
</UserControl.Resources> 
<UserControl.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/> 
    </EventTrigger> 
</UserControl.Triggers> 

<Canvas x:Name="LayoutRoot"> 
    <Rectangle x:Name="rectangle" Height="207" Canvas.Left="33" Canvas.Top="106.5" Width="481.5"> 
     <Rectangle.Clip> 
      <PathGeometry> 
       <PathFigure IsClosed="True" StartPoint="-15,16.5"> 
        <LineSegment Point="495,16.5"/> 
        <LineSegment Point="495,54"/> 
        <LineSegment Point="-15,54"/> 
       </PathFigure> 
      </PathGeometry> 
     </Rectangle.Clip> 
     <Rectangle.Fill> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFD6904A" Offset="1"/> 
       <GradientStop Color="#FFEBD8FF"/> 
      </LinearGradientBrush> 
     </Rectangle.Fill> 
    </Rectangle> 
</Canvas>