Самый чистый способ сделать это, не сводясь к Core Graphics или GL, - это создать слой, содержащий градиент угла, который вы хотите, чтобы кольцо заполняется с помощью маски CAShapeLayer, содержащей ваш круглый путь (с соответствующей шириной линии и настройками крышки), затем, как вы это делаете, используйте свойство слоя формы, чтобы установить процент заполнения. Обратите внимание, что нет встроенного способа создания градиента угла - для этого вы можете использовать одно из предложений в this answer.
Редактирование: Кроме того, вам понадобятся две полукруглые «колпачные» изображения, по одному на каждом конце кольца, поскольку процент заполнения приближается к 100%, область наверху покажет разрыв между начальный и конечный цвет. В вашем примере, изображенном выше, вам понадобится красная полукруг, ориентированная так: (
в начале, а розовый - такой, как этот )
с преобразованием трансляции/вращения, отслеживающим конец.
дополнительное редактирование: также, так как полукруга конечной крышки будет перемещаться вдоль градиента, вам понадобится ее цвет, интерполирующий от начального цвета до конечного цвета, так как сумма заполнения составляет от 0% до 100%. Лучший способ сделать это - с помощью слоя формы с полукруглым путем, поскольку вы можете установить fillColor
, без необходимости перерисовывать содержимое изображения.
Эй, Адам, вы попробовали эту работу CoreGraphics в приложении Apple Watch? У меня возникли проблемы с реализацией функций CG в приложении WatchKit. –
Да и нет. Я нашел анимацию, вы можете просто анимировать начало запуска/инсульта для CAShapeLayer, и чтобы получить градиент, вы нарисуете путь к контексту и добавьте градиент в контекст (см. Другие мои вопросы здесь), но проблема заключается в том, что вы не можете анимировать контент контекста, потому что когда он отображает это просто растровое изображение. Поэтому я не уверен, как объединить две отдельные вещи в одном –