Как оживить многоугольник? (Читайте: Анимируйте контур, чтобы изменить форму)

Привет!

В настоящее время я работаю над проектом Silverlight и хочу анимировать простую форму многоугольника (на самом деле трапецию). В частности, мне нравится динамически перемещать две из четырех точек после того, как произошло какое-то событие. Мне нужно / хочу изменить размер и переместить одну из параллельных сторон в другое положение.

Признаюсь, я новичок в Silverlight и не нашел источника, который мог бы сказать мне, возможно ли это вообще, не говоря уже о том, как это можно сделать.

Раньше я использовал анимацию, поэтому общая концепция раскадровки и анимации для меня не нова. Но как я могу перемещать точки многоугольника в анимации? Есть ли альтернативы с аналогичным оптическим эффектом (например, анимация пути)?
Есть ли PropertyPath, который я могу использовать, аналогичный

P3AnimBack.SetValue(Storyboard.TargetPropertyProperty, 
    new PropertyPath("(Path.Data).
        (PathGeometry.Figures)[0].(PathFigure.Segments)[0].
        (BezierSegment.Point3)"));

, как указано в учебнике по точечной анимации в Silverlight 3?

Спасибо всем заранее. :)


animation polygon silverlight
person Cornelius    schedule 18.08.2009    source источник

Ответы (2)


arrow_upward
4
arrow_downward

я ничего не знаю о Silverlight или анимации в .NET в целом, но Charles Petzold сделал что-то подобное:

person Ian Boyd    schedule 18.08.2009
comment
Вау, это было быстро. Должен любить этот сайт. :) Спасибо вам за ваш быстрый ответ. Код очень легко адаптируется к полигонам вместо ломаных линий - и более или менее точно то, что я искал. - person Cornelius; 18.08.2009
comment
... Ну вот ^. ^ Еще раз спасибо - person Cornelius; 19.08.2009
comment
Возможно, вы могли бы повторить код, который вы использовали. я знаю, что не прочь бы чему-нибудь научиться; даже если я никогда не воспользуюсь им. - person Ian Boyd; 19.08.2009

arrow_upward
1
arrow_downward

В соответствии с просьбой в комментарии, я объясняю, что я в итоге использовал для создания своей анимации:

Я изучил Анимированные интерполяции полилиний в Silverlight и более-менее напрямую использовал этот код - «украл» класс PointCollectionInterpolator.cs.

Затем у меня появился метод создания нужных мне полигонов и подготовки анимации:

private void CreatePolygon(TextBox txtbx, string prop, Color curcol)
    {
        PointCollectionInterpolator pci = new PointCollectionInterpolator();
        pci.Points1 = new PointCollection() // Start Points
            {
                new Point(...),
                new Point(...),
                new Point(...),
                new Point(...),
            };

        pci.Points2 = new PointCollection() // End Points
            {
                new Point(...),
                new Point(...),
                new Point(...),
                new Point(...),
            };

        Polygon tmpply = new Polygon();
        LayoutRoot.Children.Add(tmpply);

        tmpply.Points = pci.InterpolatedPoints;

        DoubleAnimation animpci = new DoubleAnimation();
        animpci.Duration = someDuration;
        animpci.From = 0.0;
        animpci.To = 1.0;
        Storyboard.SetTarget(animpci, pci);
        Storyboard.SetTargetProperty(animpci, new PropertyPath("(Progress)"));
        myStoryBoard.Children.Add(animpci);
    }

А затем в каком-то случайном обработчике событий я запускаю анимацию. Кроме того, чтобы я мог повторно использовать этот метод, я переместил коллекцию конечных точек в коллекцию начальных точек и обновил интерполятор новыми конечными точками. (Не забудьте установить прогресс на 0,0 ...) Таким образом, каждый раз, когда срабатывает обработчик, многоугольник плавно трансформируется в новый.

private void SomeEventHandler(object sender, RoutedEventArgs e) 
{
    PointCollectionInterpolator polygonPCI = 
            this.referenceToPointCollectionInterpolator;
    polygonPCI.Points1 = polygonPCI.Points2;
    polygonPCI.Progress = 0.0;
    polygonPCI.Points2 = getNewEndPoints();
    myStoryBoard.Begin();
}

Оглядываясь назад, я бы изменил имена с Points1 и Points2 на StartPoints и EndPoints соответственно. Надеюсь, это помогло. :)

person Cornelius    schedule 20.08.2009