C# WPF Анимация отдельных точек Polygon

188

29 ноября 2018, 08:00

Всем привет. Есть элемент класса Polygon, у него есть 4 точки, две из которых необходимо анимированно переместить. Не могу понять как анимировать отдельные точки (с использованием BeginAnimation). Код на C#. На картинке показана трансформация фигуры.

[Update]

Фигуру создал так:

<Polygon x:Name="_polygon" Fill="AliceBlue" Points="0,0 10,10 90,10 100,0"></Polygon>

Без анимации перемещаю так:

_polygon.Points[1] = new Point(0, 50);
_polygon.Points[2] = new Point(100, 50);

Answer 1

Можно, не вопрос. Только точки в Polygon'е анимировать сложно (хотя и можно), так что мы пойдём более простым путём, и будем анимировать Path.

Вот вам код, изучайте:

<Grid Background="Black">
    <Grid Width="100" Height="50">
        <Path Fill="AliceBlue" VerticalAlignment="Top">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="0,0">
                            <LineSegment x:Name="S1" Point="0,50"/>
                            <LineSegment x:Name="S2" Point="100,50"/>
                            <LineSegment Point="100,0"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimation
                                Storyboard.TargetName="S1" 
                                Storyboard.TargetProperty="Point"
                                From="10,10" Duration="0:0:2" 
                                AutoReverse="True" RepeatBehavior="Forever" />
                            <PointAnimation
                                Storyboard.TargetName="S2" 
                                Storyboard.TargetProperty="Point"
                                From="90,10" Duration="0:0:2" 
                                AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Grid>
</Grid>

Результат:

Если вам почему-то хочется создавать анимации в code-behind (зачем?), можно воспользоваться таким кодом:

var a1 = new PointAnimation()
{
    From = new Point(10, 10),
    Duration = new Duration(TimeSpan.FromSeconds(2)),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};
Storyboard.SetTargetName(a1, "S1");
Storyboard.SetTargetProperty(a1, new PropertyPath("Point"));
var a2 = new PointAnimation()
{
    From = new Point(90, 10),
    Duration = new Duration(TimeSpan.FromSeconds(2)),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};
Storyboard.SetTargetName(a2, "S2");
Storyboard.SetTargetProperty(a2, new PropertyPath("Point"));
var sb = new Storyboard()
{
    Children = { a1, a2 }
};
sb.Begin(this);

Указание this в sb.Begin нужно для разрешения имён, оно используется как NameScope.