代码之家  ›  专栏  ›  技术社区  ›  Jiew Meng

如何设置剪辑路径的动画

  •  2
  • Jiew Meng  · 技术社区  · 14 年前

    我正在尝试动画剪辑路径。我读过 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 回复  |  直到 14 年前
        1
  •  1
  •   Brian Gillespie    14 年前

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