在制作动画之前,需要创建剪辑路径。
然后,使用直接选择工具(Blend 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>