Рисование линии в анимации

Question

У меня есть невидимая полилиния, содержащая множество точек на холсте.

    <Polyline x:Name="plinePath" Stroke="#00000000" StrokeThickness="3">
            <Polyline.Points>
            <Point X="0" Y="0" />
            <Point X="10" Y="10" />
            <Point X="10" Y="20" />
            <Point X="20" Y="20" />
            ...
              ...
               ... 
        </Polyline.Points>
    </Polyline>

Теперь мне нужно визуализировать линию во время выполнения, как будто кто-то рисовал ее красным.Я бы хотел сделать это в раскадровке, если смогу.

Есть какие-нибудь советы, как мне это сделать?

Answer 1

Если ломаная всегда двигалась в одном общем направлении, вы могли бы просто анимировать обтравочный прямоугольник, прикрепленный к вашему plinePath , чтобы показать ее плавно.

Проблема, с которой вы сталкиваетесь при использовании других методов «рисования», заключается в том, что размеры отдельных отрезков необходимо изменять по отдельности по длине их экстента. Это нетривиально, но возможно. Существуют проблемы, связанные с постоянной скоростью рисования и интерполяцией X & Y, которые необходимо рассчитать для каждого сегмента. В основном берется длина линии (каждого сегмента), затем линейно интерполируется end-x и end-y в их конечное положение за время, определяемое длиной строки.

Answer 2

ОК,

В итоге я создал собственный настраиваемый элемент управления, в котором есть Canvas и Polyline.У моего элемента управления есть два основных общедоступных свойства:

• PathPoints (List<Points>): список всех точек в пути

• CurrentPoint (int): Показать все точки в PathPoints, которые меньше или равны этому числу.

Теперь я могу использовать раскадровку с DoubleAnimation на основе свойства «CurrentPoint» для анимации моегопуть.