Question

我正在尝试为剪切路径设置动画。我从Mask Animations (Clipping Path Animations) In Silverlight Without a Line of Code读到我应该为剪切路径设置第1个动画

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

Answer 1

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

如何为剪切路径设置动画

1 个答案: