Silverlight - анимировать рисование кривых Безье?

Я создаю небольшое приложение Silverlight. В моем приложении мне нужно рисовать линии, как показано на прикрепленном изображении.

Я понял, что лучше всего рисовать дугообразные соединительные линии (зеленые) с помощью кривых Безье.

Мой вопрос: как мне анимировать рисование линий (заставить их начинать с начальной (X, Y) координаты до целевых)?

Прикрепленное изображение:

Кривые Безье


animation silverlight bezier
person vondip    schedule 05.04.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я провел немного времени, играя с этим, и это возможно. Хитрость в том, что вы не анимируете путь. Вместо этого вы сначала обрезаете путь до ограничивающей области нулевого размера, а затем существенно анимируете высоту и ширину области отсечения. Окончательный эффект выглядит так, будто путь анимируется из точки А в точку Б.

Взгляните на пример XAML ниже:

<Canvas x:Name="LayoutRoot" Background="White">
        <Path Stroke="Blue" StrokeThickness="2" StrokeDashArray="10,2" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="50,50">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                       <BezierSegment
                                           Point1="50,20"
                                           Point2="120,170"
                                           Point3="350,150"
                                       /> 
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
            <Path.Clip>
                <PathGeometry>
                    <PathFigure IsClosed="true">
                        <LineSegment x:Name="seg1" Point="50,50"/>
                        <LineSegment x:Name="seg2" Point="0,0"/>
                        <LineSegment x:Name="seg3" Point="0,0"/>
                        <LineSegment x:Name="seg4" Point="0,0"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Clip>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimation Storyboard.TargetName="seg2" Storyboard.TargetProperty="point" To="350,50" Duration="0:0:2" />
                            <PointAnimation Storyboard.TargetName="seg3" Storyboard.TargetProperty="point" To="350,150" Duration="0:0:2" />
                            <PointAnimation Storyboard.TargetName="seg4" Storyboard.TargetProperty="point" To="50,1500" Duration="0:0:2" />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="350,150" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
    </Canvas>
person NakedBrunch    schedule 05.04.2011
comment
Рад помочь. Не стесняйтесь возвращаться с другими вопросами. - person NakedBrunch; 05.04.2011