2015-03-14 1 views
2

Я пишу приложение, которое может сделать хорошее использование фитнес-дизайн трекера яблоке Дозора, здесь:Recreate Apple, Часы фитнес-трекер «прогресс» бар - градиент на CAShapeLayer инсультом

enter image description here

до сих пор, Я создал базовый контур, который является только CAShapeLayer с CGPath эллипса. Я использую strokeStart и strokeEnd для анимации прогресса. Моя проблема возникает при применении градиента к контуру. Как применить градиент, как указано выше, к штриху CGPath?

+0

Эй, Адам, вы попробовали эту работу CoreGraphics в приложении Apple Watch? У меня возникли проблемы с реализацией функций CG в приложении WatchKit. –

+0

Да и нет. Я нашел анимацию, вы можете просто анимировать начало запуска/инсульта для CAShapeLayer, и чтобы получить градиент, вы нарисуете путь к контексту и добавьте градиент в контекст (см. Другие мои вопросы здесь), но проблема заключается в том, что вы не можете анимировать контент контекста, потому что когда он отображает это просто растровое изображение. Поэтому я не уверен, как объединить две отдельные вещи в одном –

ответ

4

Самый чистый способ сделать это, не сводясь к Core Graphics или GL, - это создать слой, содержащий градиент угла, который вы хотите, чтобы кольцо заполняется с помощью маски CAShapeLayer, содержащей ваш круглый путь (с соответствующей шириной линии и настройками крышки), затем, как вы это делаете, используйте свойство слоя формы, чтобы установить процент заполнения. Обратите внимание, что нет встроенного способа создания градиента угла - для этого вы можете использовать одно из предложений в this answer.

Редактирование: Кроме того, вам понадобятся две полукруглые «колпачные» изображения, по одному на каждом конце кольца, поскольку процент заполнения приближается к 100%, область наверху покажет разрыв между начальный и конечный цвет. В вашем примере, изображенном выше, вам понадобится красная полукруг, ориентированная так: ( в начале, а розовый - такой, как этот ) с преобразованием трансляции/вращения, отслеживающим конец.

дополнительное редактирование: также, так как полукруга конечной крышки будет перемещаться вдоль градиента, вам понадобится ее цвет, интерполирующий от начального цвета до конечного цвета, так как сумма заполнения составляет от 0% до 100%. Лучший способ сделать это - с помощью слоя формы с полукруглым путем, поскольку вы можете установить fillColor, без необходимости перерисовывать содержимое изображения.

+0

Это то, что я сделал. Я закончил тем, что добавил линейный градиент, но остановил неявные анимации и явные анимации в CA (здесь: http://stackoverflow.com/questions/29056332/cashapelayer-s-strokeend-doesn-t-animate), так что теперь удалены градиент, созданный в Quartz, чтобы оставить только цвет блока. –

+0

Не уверен, что вы подразумеваете, добавив его - если вы заполняете градиент в «-drawRect» слоя: «Тогда да, возможно, слишком медленно для анимации, но если вы заранее создадите изображение с градиентом и просто используйте это изображение как содержимое маскированного слоя, тогда он должен работать лучше. –

+0

Я имел в виду, что я рисовал дугу прямо в графическом контексте. Поэтому вместо полной дуги и управления ее размером на основе свойства конца штриха я нарисовал дугу не CAShapeLayer, которая, очевидно, не может быть анимирована, поскольку ее не является стороной слоя ca –

0

Мы сделали это для приложения iOS .. но быстро остановились, так как он быстро увяз. Я думаю, что Apple использует образы .. как они делают в примере Листера

Смежные вопросы