Как записать и показать нажатия на экран в App Previews для iOS

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

Все остальные требования к видео-превью для вашего приложения и рекомендации от Apple вы можете найти в гайдах от Apple.

Итак, сначала надо определиться с тем, как можно показывать в видео клики и нажатия.

Вот что говорят по этому поводу гайды от Apple.

Add graphic elements, such as touch hotspots, when necessary to demonstrate how navigation or interaction works within the app. Don’t overlay animated hands simulating gestures.

Т.е. в качестве элемента нажатий нельзя использовать изображения рук. Можно просто использовать элемент касания на экран. Например, вот такую картинку (можете смело брать эту картинку и использовать в своих видео, мы её сделали для вас):

Далее в заметке хотим показать 4 способа отображения кликов.

Способ №1. Наложить имитацию кликов и движения в видео редакторе

Берём картинку нажатия и исходное видео. Накладываем траекторию движения и анимацию клика. Результат на картинках ниже.

Пример анимации движения и нажатий из приложения Грудное вскармливание для iOS

Достоинства — вы полностью контролируете зону нажатий, можно точно позиционировать нажатия и делать любую анимацию движения.

К недостаткам стоит отнести трудоёмкость такого процесса.

Способ №2. Сделать программную поддержку нажатий в приложении

Можно написать обработку нажатий самому или использовать стороннюю библиотеку.

Вот наиболее интересные решения с GitHub:

• Fingertips
• TouchVisualizer
• COSTouchVisualizer
• Touchpose

Результат будет примерно такой:

Пример отображения нажатий на экран с помощью библиотеки Fingertips в приложении Mr.Pillster — напоминание о приёме лекарств и демонстрация работы Fingertips

Достоинства — просто и удобно, особенно когда нужно показать много взаимодействий с экраном (клики, перетягивания, жесты, касания несколькими пальцами).

Но не забудьте отключить отображения нажатий в релизной версии приложения :)

Способ №3. Включить отображение кликов в эмуляторе

Для это нужно:

• Открыть терминал и запустить команду defaults write com.apple.iphonesimulator ShowSingleTouches 1
• Перезапустить iOS эмулятор

Пример отображения нажатий в эмуляторе iOS

Достоинства — быстро и удобно

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

Способ №4. Включить отображение нажатий на устройстве

Вот в этом видео подробно показано и рассказано как это сделать:

Достоинства — можно делать запись на устройстве и быстро включается.

К минусам такого способа стоит отнести постоянно висящую на экране курсор и вспомогательную кнопку, а также необходимость включения отображения курсора в каждом приложении.

Заключение

Вы можете использовать любые способы, чтобы показать в своём видео нажатий на экран и различные жесты. Главное, что теперь вы знаете, как это сделать.

Мы в своей работе обычно используем 1 и 2 варианты.

Олег Демьянов, руководитель Whisper Arts — мы создаем полезные приложения, которые помогают пользователям каждый день