Question

I am trying to animate a clipping path. I read from Mask Animations (Clipping Path Animations) In Silverlight Without a Line of Code that I should animate the clipping path 1st so

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”

will be changed to

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

but after animating the path, my XAML still looks like

<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 short video on the problem http://screenr.com/1Wc

Answer 1

You need to create the clipping path prior to doing the animation.
Then, use the Direct Select tool (the second arrow down on the toolbar in Blend 4) to select the clipping path. Moving the clipping path while recording a timeline will result in the clipping being animated the way you expect.

Here’s the XAML from two rectangles – a big one with a linear gradient, and a smaller one that is the clipping path. The clipping rectangle is animated and follows the gradient.

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