我如何爲剪切路徑創建動畫

我正在嘗試創建剪切路徑的動畫。我從Mask Animations (Clipping Path Animations) In Silverlight Without a Line of Code讀，我應該動畫剪輯路徑一日所以我如何爲剪切路徑創建動畫

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」

將改爲

<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>

但動畫的路徑後，我的XAML仍然看起來像

<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>

一關於問題的短片http://screenr.com/1Wc

來源

2010-11-16 Jiew Meng

您需要創建t他在做動畫之前剪下路徑。然後，使用直接選擇工具（混合4中工具欄上的第二個箭頭）選擇剪切路徑。在錄製時間線的同時移動剪切路徑將導致剪輯按照您期望的方式進行動畫。

這是來自兩個矩形的XAML--一個帶有線性漸變的較大的一個，另一個是剪切路徑較小的一個。裁剪矩形是動畫效果並遵循漸變。

<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>

來源

2011-06-18 00:07:04

我如何爲剪切路徑創建動畫

回答

相關問題