Как создать флип-таймер в React Native

Вступление

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

В этой статье будет продемонстрировано построение Flip Timer в React Native с использованием его открытых API и без дополнительных зависимостей.

Проблемы, которые нужно преодолеть

Реализуйте свойство transform-origin, используя методы матриц вашего курса математики колледжа, поскольку оно не поддерживается в React Native. Поворот вокруг центрированной исходной точки (по умолчанию) прост, но нам нужно переместить исходную точку и повернуть ее по краям.
Реализация компонента Flip Number.
Решите overflow: hidden проблему в Android, поскольку она не работает с элементами с абсолютным позиционированием.

СОДЕРЖАНИЕ

Реализовать компонент числа отражения
Реализовать FoldView

Базовый макет
Преодоление проблемы
Добавление преобразований
Добавление анимации

3. Обновить компонент таймера

4. Окончательный результат

5. Ссылки

Реализовать компонент числа флипов

Базовый макет

Базовый макет состоит из двух карточек - верхней и нижней, соединенных вместе так, что вид выглядит как таймер переворота.

Карточка с цифрами

Это базовый макет, состоящий из обертки и двух карточек - нижней, верхней.

Примечание. К нижней карточке добавлен предыдущий номер. Его использование будет раскрыто, когда мы дойдем до реализации FoldView.

Карта

На обертке карты есть overflow: hidden, и мы переводим ее элементы (количество) в зависимости от типа карты (верхний или нижний).

Реализовать FoldView

Базовый макет

Для создания FoldView нам нужны две FlipCards, похожие на NumberCards, но с абсолютным позиционированием, чтобы они находились над NumberCards, когда Применяются флип-анимации.

Карточка с цифрами

Добавление компонента FlipCard к компоненту NumberCard.

Флип-карта

Компонент FlipCard - это анимированная оболочка с абсолютным позиционированием, используемая при применении анимации отражения.

Задача (часть 2 и часть 3): overflow: hidden с абсолютным позиционированием вызывает серьезные проблемы в android. Используя этот пост StackOverflow, можно решить эту проблему, используя контейнер переполнения внутри элемента с абсолютным позиционированием.

Конечный результат

Преодоление проблемы

Теперь самое сложное. Нам нужно добавить складку компонента FlipCard по краям.

Поскольку React Native не поддерживает свойство transform-origin, нам нужно найти другой способ сдвинуть начало вращения на нижнем краю.

К счастью, есть один способ решить эту проблему. Согласно этой замечательной статье и чтению документации MDN для свойства transform-origin, это можно реализовать с помощью матриц.

Утилиты

React Native предоставляет несколько матричных операций в MatrixMath.js. Важные из них, которые нам требуются:

Матрица идентичности: она возвращает матрицу идентичности 4 * 4 [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

Умножение матрицы: этот служебный метод генерирует выходные данные на основе умножения 4 * 4 матриц a и b, предоставленных в качестве входных.

Повернуть матрицу. Это настраиваемый служебный метод, который принимает матрицу 4 * 4 и степень поворота, чтобы затем умножить ее на исходную матрицу и вернуть сгенерированный результат.

Матрица перспективы: этот служебный метод позволит нам использовать стиль перспективы для React Native, а затем умножить на исходную матрицу 4 * 4.