Эффективная анимация изменяющегося во времени рисования с использованием CAKeyFrameAnimation

Моя текущая цель — анимировать отрисовку изображения в приложении для iOS, чтобы пользователь мог видеть что-то вроде http://www.youtube.com/watch?v=xlDmk5WdaHk происходит на их экране.

Ускорение моих рисунков меняется со временем, поэтому я построил свою анимацию, используя CAKeyFrameAnimation и keyTimes. На данный момент у меня есть только один путь Безье, который указывает все точки моего рисунка, я добавляю путь к моему объекту CAShapeLayer, а затем передаю путь своему объекту анимации, когда начинаю анимацию.

Моя проблема: завершенный рисунок немедленно появляется на экране, и мой курсор пера затем перемещается вдоль изображения в соответствии с моими значениями keyTimes, вместо того, чтобы цвет обводки заполнялся в тандеме с движением моего курсора пера на экран, чтобы произвести тот же эффект, что и видео.

Я заметил этот вопрос SO, где рекомендуемым решением было создание отдельного пути для каждой точки анимации: Как анимировать рисунок формы CoreGraphics с помощью CAKeyframeAnimation

Учитывая, что у меня есть 100-300 отдельных точек, есть ли более эффективный метод создания изменяющегося во времени рисунка, чем создание массива из пары сотен путей (с парой сотен значений в каждом пути) с путями в этой форме:

path0 = point0...point0...point0...point0... 
path1 = point0...point1...point1...point1...
path2 = point0...point1...point2...point2...
path3 = point0...point1...point2...point3...

Затем взять этот массив путей, передать его в myAnimation.values и анимировать values с помощью моего keyTimes? Или это действительно лучший способ сделать это?

заранее спасибо


person Lonso    schedule 11.03.2013    source источник


Ответы (1)


Конечно, есть более эффективный способ, если ваши точки находятся на пути Безье. CAShapeLayer имеет два небольших свойства, которые называются strokeStart и strokeEnd. Если вы изначально установили strokeEnd равным нулю, ваш путь не будет отображаться. В 1.0 он будет отображаться полностью. Увеличение значений от нуля до единицы будет соответствующим образом отображать вашу кривую. Это анимируемое свойство, поэтому синхронизируйте его значение с ключевыми моментами другой анимации, и ваш рисунок будет отображаться при движении «пера».

person aLevelOfIndirection    schedule 13.04.2013