Как я могу оживить обтравочный контур - PullRequest
Новая
       26

Как я могу оживить обтравочный контур

2 голосов
/ 16 ноября 2010

Я пытаюсь оживить обтравочный контур.Я прочитал из Анимации масок (анимации обтравочного контура) в Silverlight без строки кода , что я должен анимировать 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

1 Ответ

1 голос
/ 18 июня 2011

Вам необходимо создать обтравочный контур перед выполнением анимации.Затем используйте инструмент Direct Select (вторая стрелка вниз на панели инструментов в 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>

...