2

クリッピング パスをアニメーション化しようとしています。マスク アニメーション (クリッピング パス アニメーション) 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

4

1 に答える 1

1

アニメーションを実行する前に、クリッピング パスを作成する必要があります。次に、ダイレクト選択ツール (Blend 4 のツールバーの 2 番目の矢印) を使用して、クリッピング パスを選択します。タイムラインの記録中にクリッピング パスを移動すると、クリッピングが期待どおりにアニメーション化されます。

2 つの四角形の 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>

于 2011-06-18T00:07:04.003 に答える