Как создавать необычные усложнения для часов на Wear OS

Привет! Меня зовут Виктория, я Android/KMP разработчик. Несколько лет назад у меня был проект по разработке циферблата для Wear OS, и с тех пор я люблю в свободное время собирать необычные часы в Watch Face Studio.

Watch Face Studio (далее WFS) — визуальный no‑code редактор для создания циферблатов под Wear OS, его разрабатывает Samsung совместно с Google. Циферблаты поддерживают Watch Face Format (WFF) — это декларативный формат на основе XML и с января 2026-го года это гугловский стандарт для загрузки в Google Play.

Другие инструменты

Помимо WFS, есть Watch Face Designer (Плагин для Figma), Facer, Android Studio (используйте шаблон проекта «Empty Wear App») и другие инструменты. Но в данной статье и в своих часовых экспериментах я использую Watch Face Studio, так как, по моему мнению, он удачно совмещает плюсы визуального редактора с возможностью использовать условные выражения, логические операторы и математические функции.

Усложнение часов — это любой элемент, который информирует пользователя о чем‑то, кроме времени. В механических часах усложнения делают производство дороже и сложнее, так как требуют дополнительных модулей — зубчатых колес, рычагов, дисков, пружин и так далее. В циферблатах Wear OS многие усложнения уже есть в системе или в качестве готовых компонентов в редакторе — например, заряд батареи (вместо запаса хода) или календарь. Но есть такие усложнения, которые и в цифре требуют дополнительной разработки.

В механических часах усложнения когда‑то были значительным преимуществом, а сегодня это способ для бренда заявить о своем мастерстве и приобщиться к высокому часовому искусству. В цифре это, скорее, дань традициям или интеллектуальный вызов — понять работу механизма и воспроизвести с помощью формул. И, конечно, в любом формате такая кастомизация выделяет часы и привлекает к ним внимание. Для меня это такое guilty pleasure, мне интересно залипать в процесс подбора формул.

В статье я рассмотрю 3 усложнения — ретроградная индикация, лунный календарь и блуждающий час.

Сетап

1. Для создания циферблата понадобится только одна программа Watch Face Studio, в работе она не перегружает компьютер так, как это может делать Android Studio. Вот такие требования называет Samsung:

• Windows 10 или новее, macOS 11 или новее. Официальной версии Watch Face Studio для Linux нет.

• Оперативная память: от 2 гб.

• Процессор: от 2 Ггц, от 2 ядер.

• Свободная память на диске: от 1 гб.

2. Скачиваем ^[1] Watch Face Studio.
Чтобы работать с WFF‑стандартом, нужно использовать версию 1.8.7 и выше.
Вам не понадобятся для тестирования физические часы на Wear OS, основной функционал можно проверить в программном превью. Но если физические часы в наличии, инструкция ^[2]по их настройке.

Ретроградная индикация

Да, название интересное. Ретроградный Меркурий и противники прогресса здесь ни при чем.

Мы привыкли, что циферблат — это круг из 12 делений. Однако существуют еще ретроградная индикация, идущая по дуге. Стрелка движется по дуге, а достигнув конца шкалы, мгновенно возвращается в исходное положение. Из‑за этого характерного «прыжка» назад и пошло название — слово «ретроградный» происходит от латинского retrogradus, буквально — шаг назад.

Механизм ретрограда состоит из улитки (спиральный кулачок), рычага, гребенки (зубчатый рычаг) и пружины, обеспечивающей возвратное движение. Рычаг одним концом скользит по поверхности улитки, а другим связан с осью стрелки через зубчатую гребенку. Улитка медленно заводит пружину через рычаг, а когда рычаг падает с её вершины, пружина мгновенно возвращает стрелку в исходное положение. Всё это происходит без участия дополнительного мотора.

Ретроград в механике может показывать запас хода, часы, минуты, секунды, дни недели, даты и даже второй часовой пояс. Впервые такие часы создал Авраам‑Луи Бреге в конце 18 века для отображения даты. Сейчас их продолжают выпускать известные швейцарские, японские и китайские бренды. Ретроград можно реализовать с помощью формул в WFS и бонус этого усложнения для цифры — остается еще много места на часах для даты, погоды, шагов и других виджетов.

1. Запускаем Watch Face Studio, создаем проект «Retrograde Watch», размер стандартный 450×450.

В новом проекте мы видим холст — пустой циферблат посередине. Слева от него сейчас пустая панель слоев‑элементов на циферблате Normal и Always-On. Справа от циферблата панель Run — для динамического превью циферблата. Справа от превью панель Properties и Style, где настраивается выбранный элемент.

2. Нам нужно добавить фон циферблата, стрелки и индексы. Нажимаем кнопку Add Component, выбираем Preset Image. В открывшемся окне видим ресурсы, установленные вместе с программой. Выбираем любое цветное изображение с префиксом «image_». В этой же папке хранятся изображения индикации с префиксом «index_», но для ретрограда нам они не подойдут — это готовые картинки, а нам нужны программируемые индикаторы.

4. Поэтому в Add Component в разделе Time&Date выбираем Index и в открывшемся окне нужно выбрать любое отображение индексов — палочки, круги, кинжалы и так далее. Выберем индексы из группы «small». Пока индексы автоматически расставились по кругу.

5. Добавим стрелки. Есть несколько вариантов добавить аналоговые стрелки на циферблат — самый простой это Analog Clock, он создает группу из 3 стрелок сразу. Чтобы механизм не выглядел слишком запутанно, предлагаю сделать только часовую и минутную стрелку, создать их отдельно тоже можно. В Add Component выбираем More → Radial Indicator. В открывшемся окне будут файлы для всех типов стрелок, выбираем одну с префиксом «hour_», и вторую с префиксом «min_».

Swap Media

Уже выбранные ресурсы можно менять без потери логики: выбираем любой элемент в списке в левой панели Normal, кликаем по нему правой кнопкой мыши и выбираем Swap Media. Открывается окно с ресурсами.

6. Обе стрелки сейчас содержат встроенную логику хода «Hour in Day». Выберите элемент стрелки, найдите в панели Properties раздел Radial Indicator. Нам нужно выключить чекбокс Apply Rotation Properties для обеих стрелок.

7. Необходимо выбрать элемент индексов в левой панели Normal и в панели Properties найти раздел Index Setting → Range. По умолчанию задан диапазон от 0 до 360 градусов. Если сейчас мы выберем диапазон от -90 до 90, то получим такой результат:

WFS при отрисовке дуги считает количество промежутков, а не делений. Чтобы последнее деление не обрезалось, нужно сдвинуть конечный угол на один шаг.

Вот как определить величину сдвига. Если дуга имеет размах L, и количество промежутков между делениями N, то  шаг = L / N. Наша дуга сейчас 180°, промежутков 11, нам нужно добавить примерно 16°. Итоговый диапазон составит от -90 до 106.

8. Теперь программируем ход стрелок.
Нам нужно выбрать элемент часовой стрелки и найти в Properties раздел Rotate, нажать на поле Angle и на кнопку Tags. Откроется окно ввода выражений.

Теги (Tag Expressions) в WFS это основной инструмент для связывания элементов циферблата с динамическими данными. Для создания новой логики часовой и минутной стрелок нам понадобятся два тега: 

• MIN_SEC— возвращает минуты с секундами (0.0 — 59.999).

• HOUR_0_11 — возвращает текущий час, в 12-часовом формате (0 — 11). Для удобного чтения времени будем использовать дискретное отображение.

• SEC_MSEC — возвращает текущую секунду с миллисекундами, (0.0 — 59.999).

Начнем с часовой стрелки. В формуле нужно использовать:

• C — начальный угол дуги

• X — текущее значение (HOUR_0_11)

• N — максимальное значение, которое может принять тег

• L — размах дуги

Тогда для часовой стрелки: -90 + ([HOUR_0_11] / 11) * 180.
Для минутной стрелки, если мы хотим, чтобы за час она проходила дугу один раз:
-90 + ([MIN_SEC] / 60) * 180 (N округлим до 60).

10.Смотрим как работает циферблат.

На панели Run находим кнопку Preview Watch face. В открывшемся окне можно выбрать Show Device, запустить и остановить время.

Но сейчас на превью мы не увидим динамику хода часов, так как нужно настроить скорость отображения. Под холстом расположен ползунок времени и параметр скорости хода. Давайте установим 1H/sec.

Теперь на превью можно будет оценить, как работает ретроград наглядно. 

11. Циферблат кажется пустым, и можно добавить секундную индикацию и дополнительную стрелку. Добавить новые индексы можно через Add Component → Index, ставим range = -90..106, можно их уменьшить и переместить. Найдите в Properties параметр Inner Pivot X и следите за тем, чтобы там было значение 225, если хотите, чтобы индексы остались в середине циферблата по горизонтали. С секундной стрелкой нужно проделать тоже самое — добавить, отключить Apply Rotation Properties, переместить и уменьшить. Важно — пивоты секундной индексации и секундной стрелки должны идеально совпадать на холсте. Проще всего этого добиться так: для каждого элемента находим раздел Placement, выбираем Align Center. После этого выделяем оба элемента на панели слоев, вызываем контекстное меню, нажимаем Group. Теперь два элемента мы можем перемещать как группу.

Формула для секундной стрелки будет похожа на минутную, отличается только тег. Если, по примеру Blancpain Villeret, мы используем дугу, как половину пути стрелки, то Y — остаток от деления на 30 (значение от 0 до 29.999) и секундную стрелку можно описать так:

-90 + (([SEC_MSEC] % 30) / 30) * 180
Она будет проходить дугу дважды в минуту, на 30 секундах прыгать назад в начало дуги.

Чтобы сделать циферблат более читаемым, добавим индексацию минут отдельно. Готовые индексы нам не подойдут, потому что в библиотеке ресурсов есть только круговые. Я подготовила простой дизайн для минут в Figma ^[3].

Добавьте его на панель слоев в формате .png (WFS не поддержит .svg) поверх фона.

12. На левой панели слоев есть вкладка Always-On. В этом режиме секунды не отображаются и нам лучше скрыть элемент группы с секундами. Также нужно оптимизировать фон. Проще всего скрыть фоновую картинку, потому что принцип тут — чем темнее дисплей, тем меньше он потребляет энергии. По встроенному в редактор Always‑On Display (AOD) анализатору мы увидим, насколько оптимизирована картинка. Нам нужно добиться того, чтобы показатель Current on Pixel Ratio был не больше 15% ^[4].

Лунный календарь

Одно из самых красивых усложнений механических часов — это индикатор фаз Луны. У этого усложнения очень богатая история — от Антикитерского механизма 2 века до нашей эры, до знаменитого «Астрариума» Джованни де Донди в 14 веке и первых карманных часов с лунным календарем Франсуа Пижона в 17 веке.

Сейчас это, скорее, элемент дизайна, но раньше такие часы были полезны для мореплавания и земледелия.

Устройство лунного календаря на физических часах состоит из зубчатого колеса (на нем находится 59 зубьев — это количество почти совпадает с протяженностью двух лунных циклов — по 29.5 каждый). На колесе закреплён диск с двумя изображениями Луны, расположенными друг напротив друга. Основной часовой механизм через систему передаточных колёс медленно вращает это колесо. Он медленно накапливает погрешность — так как реальный лунный цикл длится 29 суток 12 часов 44 минуты и 2,8 секунды, то погрешность примерно составляет 44 минуты каждые 2 цикла, что дает ~1 день за 3 года.

Самые точные

Andreas Strehler Sauterelle à Lune Perpétuelle 2M — механические часы с самым точным лунным календарем — погрешность в 1 день в них накопится за 2 млн лет.

Как устроены часы? Дуговое окошко с вращающимся диском — самый распространённый вариант. В окошке видно изображение Луны, которое проходит путь от новолуния (Луна не просматривается) через растущий месяц (Луна видна с левой стороны) и полнолуние (Луна целиком в центре) к убывающей Луне (Луна видна с правой стороны). В цифре нам нужны те же элементы — циферблат с выемкой и диск с двумя Лунами. Вместо колеса у нас будет формула для поворота диска.

1. Ресурсы

Subtract/intersect функционал отсутствует в WFS, поэтому нужно подготовить циферблат с выемкой заранее. Я взяла за основу Appella как референс и подготовила ресурсы в Figma ^[5].

Нам нужно скачать два циферблата и лунный диск. Один циферблат будем использовать для обычного мода, а другой — для Always-On.

2. Создаем новый проект «Moon Phase Watch».

3. Добавляем наши картинки перетаскиванием или через иконку Add Component → Preset Image. Так как панель элементов работает как слои, внизу списка должен быть диск с двумя Лунами. Расположите его так, чтобы одна Луна была полностью видна по центру выемки.

4. Дважды добавим через Add Component → Analog Clock готовую группу стрелок. Важно, что в этой группе уже настроено отображение секундной стрелки только в режиме Normal. Однако для белого циферблата у нас будут темные стрелки, а для темного — светлые, цвет меняется на панели Properties. Нажмите на значок глаза возле элемента, чтобы изменить его видимость в каждом режиме, Normal и Always-On.

5. Циферблат почти готов, теперь нужна формула для поворота диска. Она будет очень похожа на то, что мы делали для ретроградного хода.

На этот раз нам понадобится тег MOON_PO — возвращает текущую позицию Луны, дробное число от 0 до 28.
Сейчас для наглядности мы расположили диск так, чтобы одна из Лун была в центре выемки. Но в начале лунного цикла во время новолуния нам нужно повернуть диск на 90 градусов, чтобы обе Луны скрылись за циферблатом. Мы добавим этот поворот в формулу.
На панели элементов выбираем Spin circle, находим на панели Properties раздел Rotate, кликаем на поле Angle и кнопку Tags.

Попробуем создать формулу.

• с — калибровочная константа для поворота в новолуние

• X — текущий возраст Луны

• N — кол‑во дней в синодическом месяце (от новолуния до новолуния)

• L — максимальный угол поворота изображения Луны.

Итого: 90 + ([MOON_PO] / 29.5 * 180)

Формула неплохо работает, это можно проверить, введя в правой панели Run дату и время ближайшего полнолуния. Я тестировала на 26 сентября 2026 года, 19:49. Визуально заметно, что Луна не совсем посередине в это время, и формула оказывается не совсем точной из‑за того, что MOON_POв момент полнолуния отдает значение 14, по формуле 90 + (14 / 29.5 * 180) = 175.42. А нам нужен результат в 180 градусов. Пусть N = 28, тогда 90 + (14 / 28 * 180) = 180°.

О накоплении погрешности

Watch Face Studio не получает данные о фазах из какого‑то внешнего API.MOON_PO рассчитывается с помощью астрономических формул на базе текущих даты и времени, поэтому погрешность в нем не должна накапливаться, равно как и в нашей формуле. Диапазон 0–28 — это условность, которую приняли разработчики WFS, поскольку, видимо, более точный синодический месяц не требуется в большинстве случаев.

Блуждающий час

Это менее распространенное усложнение. Было изобретено в 17 веке римскими мастерами специально для папы Александра VII, которому мешало тиканье и бой традиционных часов. Затем на смену блуждающему пришел час прыгающий: в обиход вошло усложнение с окошком, в котором «прыгает» — мгновенное сменяется значение.

Популярность блуждающего часа вернулась вместе с моделью Audemars Piguet Starwheel и сейчас такие часы производят многие бренды.

Роль стрелки в механизме выполняют диски с нанесенными на них числами, которые вращаются по циферблату, складываясь в текущее время. В механизме используется центральный ротор и рычаги, на которых находятся диски. Могут использоваться от 1 до 3 дисков. Интересно, как группируются числа. Например, в Audemars Piguet Starwheel каждый диск несет по 4 часа от 1 до 12, 1-4-7-10, 2-5-8-11, 3-6-9-12 — схема обеспечивает непрерывную смену показаний: в то время как один диск уходит со своим числом, следующий диск уже заходит на шкалу. В DWISS RW1 wandering hour используется 2 диска: первый диск несет нечетные часы, другой — четные.

1. Создаем проект «Wandering Hour Watch».

2. Выбираем один из готовых фонов из библиотеки ресурсов в Add Component → Preset Image, я выбрала «image_space_dark», фон достаточно темный, чтобы его не пришлось оптимизировать для always‑on. Там же добавим индикацию — более наглядной для блуждающего часа будет индикация с минутами, файл называется «index_modern_3». Такая же индикация на референсе от Breguet.

3. Теперь добавим блуждающий элемент. Прыгающий час уже реализован в цифре — добавим через Add Component → Digital Clock → HH. Но к элементам группы Digital Clock нельзя применять теги, поэтому вызываем контекстное меню на элементе и объединяем его в группу. Теперь работаем с группой.

4. Для начала разместим группу в нулевых координатах на холсте. Это нужно, чтобы нам было проще работать с формулой во время движения элемента. На панели Properties найдем раздел Placement и в полях x, y укажем нулевые значения.

Там же нажимаем на поле x, на кнопку Tags. Для усложнения нам понадобится тег MIN — текущая минута, (0..59).

• X — координата X элемента

• Y — координата Y элемента

• CX — центр X (координата центра циферблата)

• CY — центр Y (координата центра циферблата)

• R — радиус траектории

• V — текущее значение тега

• 2π — полный круг в радианах (≈ 6.2832)

• OFFSET — дополнительный угол для поворота начальной точки (в радианах)

Пусть V / 60 — текущая доля часа. Преобразуем долю в радианы, домножая на 2π (полный круг). Чтобы получить координату на окружности, берем sin радианы для x и cos радианы для y. Далее находим R — радиус круга, по которому должен двигаться элемент. Диаметр всего циферблата 450, его радиус = 225. 225 не подойдет, нужно взять радиус меньше на 50-80 пикселей, чтобы элемент двигался внутри циферблата. Оптимально выглядит формула с радиусом 150.

Еще одно необходимое нам число — координаты центра циферблата. Для стандартного циферблата 450x450 это (225, 225), но они нам не подойдут, потому что элемент начнет отрисовываться от них и уйдет вправо и вниз от центра. Выберете группу и найдите на панели Properties раздел Dimension — в полях W (width) и H (height) вы увидите размеры группы.

Получаем следующую формулу:

Итоговая формулы для x и y:

x = 175 + 150 * sin([MIN]/60 * 2 * 3.141592)

y = 175 - 150 * cos([MIN]/60 * 2 * 3.141592)

5. Прокрутите ползунок под холстом, чтобы увидеть работу формул. Элемент двигается по кругу в течение часа.

6. Добавим блуждающую секунду, как на некоторых моделях DWISS. Добавим небольшой круг в центре циферблата через Add Component → Shape → Ellipse. На панели Properties в разделе Fill нажимаем на квадрат цвета, выбираем пипетку и наводим на циферблат, чтобы фигура не выделялась на фоне. В разделе Outline выбираем любой контрастный цвет, размер рамки и прозрачность.

7. Добавляем формулу для элемента «image_03». Формула такая же, как для группы блуждающего часа, только нужно учесть, что R на этот раз — это радиус круга меньше чем радиус «ellipse». Например, если вы не меняли размер «ellipse», то он по умолчанию вписан в квадрат 100х100, R = 50, для движения секунды можно взять R = 40. У элемента секунды W = 8, H = 8.

Итоговые формулы для image_03:

x = 221 + 40 * sin([SEC]/60 * 2 * 3.141592)

y = 221 - 40 * cos([SEC]/60 * 2 * 3.141592)

Итог

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

В Watch Face Studio все эти модели сводятся к одной и той же математике: взять значение тега, нормализовать его относительно диапазона и масштабировать под нужный угол поворота. Всё остальное — дело дизайна и фантазии.

Вот такое получилось путешествие в часовые премудрости. Буду рада комментариям, замечаниям и идеям!