如何为剪切路径设置动画

Posted 2023-03-23

【中文标题】如何为剪切路径设置动画

【英文标题】：How can I animate a Clipping Path

【发布时间】：2011-05-10 19:52:08

【问题描述】：

我正在尝试为剪切路径设置动画。我从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

【参考方案1】：

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