Привет всем, несколько недель назад мы уже отреагировали на Facebook с помощью Flutter здесь.
Сегодня мы сделаем это снова, но с React Native. Тогда мы узнаем, чем отличается реализация одного и того же во Flutter и React Native, и какая платформа в этом случае работает лучше. А теперь приступим!
Когда мы закончим, получим такой результат, как это видео:
Вы также устанавливаете скорость на главном экране, чтобы замедлить анимацию для более четкого просмотра.
Попробуйте проанализировать анимацию, которую получили эти эффекты (если вы уже видели эту статью с версией Flutter, просто пропустите этот шаг)
1.При быстром прикосновении к кнопке лайк сменится с серой границы с прозрачным фоном на синий, и текст лайк рядом со смайликом тоже будет таким же. . И анимация в этом случае представляет собой как смайлик наклон вправо, затем наклон влево и, наконец, обратно в исходное положение, уменьшение текста, затем увеличение, а затем снова уменьшение, чтобы вернуться к исходному размеру.
2. Если вы долго касаетесь кнопки, она будет работать в другом направлении. Кнопка как смайлик в немного наклонится влево, а текст уменьшится. При этом появляется поле группы, смайлы и выдвигается шесть смайлов. Обратите внимание, что смайлы будут сдвинуты вверх по порядку, и увеличивайте масштаб, пока они не выровняются аккуратно. И если пользователь никуда не перетащит, а просто отпустит, кнопка вернется в исходное состояние.
3. Однако, если вы перетащите пальцы, смайлик, на котором вы фокусируетесь, увеличится примерно в 3/2 раза по сравнению с исходной точкой, а другие - немного уменьшатся (и поле также будет увеличено). Кроме того, в верхней части смайлика появится краткое описание, которое сопровождает смайлик.
4. Вы должны заметить, что область перетаскивания не безгранична. Если вы перетащите слишком далеко от поля, смайлик потеряет фокус и размер вернется к исходному значению, когда они будут перемещены вверх. А если вы вернетесь в область перетаскивания, вы снова сфокусируете смайлик.
5.После долгого касания, если вы отпустите пальцы, не выбрав ни одного смайлика, поле исчезнет, а смайлы будут располагаться в меньшем порядке (в обратном порядке со временем, когда они были сдвинуты вверх). Если вы не выбрали ни одного смайлика, кнопка как смайлик будет наклонена влево, а текст будет увеличиваться до исходного положения / размера.
6. Но если вы сосредоточитесь на определенном смайле и отпустите, этот смайлик переместится к кнопке с дугой и уменьшится, пока не исчезнет. При этом изменится цвет рамки, текста и смайлика в кнопке.
7. Наконец, последнее, что нам нужно сделать, это добавить звук, синхронизированный с каждой анимацией.
Здесь вы можете подумать, что все довольно просто, ……. Да, вы правы, но наша самая большая проблема заключается в том, как объединить каждую анимацию вместе и сделать ее максимально похожей, как это делает origin FB. Если вы хотите получить ответ, продолжайте, пожалуйста, сейчас 💪
Макет пользовательского интерфейса
красный квадрат обозначает область, которую можно перетаскивать.
зеленый квадрат представляет область для изогнутого смайлика перемещения (когда вы нажимаете на определенный смайлик и отпускаете его, он прыгает и перемещается влево к кнопке).
синий квадрат представляет собой обтекание текущего смайлика.
Во-первых, нам нужно найти компонент, который может поддерживать пользовательские жесты, и да, RN предоставит нам имя под названием PanResponder (https://facebook.github.io/react-native/docs/panresponder .html )
Собственно, мы делим этот UI на 4 части: рамка вокруг смайлов, группа содержит смайлы, группа содержит смайлы для прыжка, когда пользователь отпускает пальцы и кнопку.
Подробный код для них, пожалуйста, проверьте мой исходный код в конце этой статьи.
Обнаружение жеста пользователя
Во-первых, чтобы определить, когда пользователь нажимает и нажимает кнопку, мы должны использовать атрибуты onTouchStart и onTouchEnd. справиться с этим.
Затем используйте тайм-аут, чтобы определить, является ли пользователь быстрое или долгое касание кнопки для создания соответствующих эффектов. Когда пользователь нажимает кнопку и удерживает ее до тех пор, пока не будет достигнута заявленная нами продолжительность, мы сделаем подходящую анимацию для длительного касания, но если пользователь нажмет кнопку с продолжительностью меньше, чем мы заявляем (означает быстрое касание), мы отменим таймаут (чтобы отменить запуск анимации долгого касания), а затем анимировать эффект быстрого касания.
Во-вторых, мы хотим обнаружить перетаскивание пользователя. Перетаскивает ли пользователь между смайликами, перетаскивает ли он за пределы или внутри области и когда отпускает пальцы.
PanResponder предоставляет onPanResponderMove, который вызывается, когда пользователь перетаскивает на экран. Затем мы можем проверить положение Y, чтобы определить, находится ли положение пальца внутри или за пределами области, и положение X, чтобы узнать, какой смайлик фокусируется.
Выполните анимацию
Во-первых, нам нужно объявить начальные значения для этих анимаций, например:
… И играть в них
Когда требуется анимация, значения колеблются вверх и вниз или вращаются с градусом, мы используем интерполяцию:
И нужно несколько переменных, чтобы проверить, пора ли запускать этот эффект. Обратите внимание, что после назначения нового значения для этих переменных нам нужно setState, чтобы заставить систему повторно визуализировать пользовательский интерфейс, чтобы эти переменные, которые внутри функции визуализации действительно изменили значение, чтобы мы могли проверить их на выполнение подходящий эффект.
Это примеры, пожалуйста, ознакомьтесь с моим исходным кодом для подробностей. Я уже прокомментировал код, чтобы его было легче отследить.
Игра с изображениями и звуками
Нам нужны смайлики в формате GIF и короткие аудиозаписи, чтобы сделать эти анимации более живыми. Смайлик, который я нашел на некоторых сайтах, может быть, он немного отличается, потому что я не могу найти оригинальный смайлик из FB. Со звуком я записал с внешнего аудио, затем вырезал и усилил, так что он может быть не идеальным. Но в целом я думаю, что это очень похоже на происхождение.
Объявите эти изображения в отдельном файле для упрощения управления:
Что касается воспроизведения аудио, мы используем response-native-sound для воспроизведения локального файла. Поместите эти аудиофайлы в соответствующий каталог и внедрите его.
Некоторые трудности при реализации этой анимации (по сравнению с Flutter)
Собственно, я должен сказать, что реализовать эту анимацию с помощью React Native сложнее, чем с помощью Flutter. По крайней мере, по этим вопросам:
- Для обработки изображения GIF компонента Image недостаточно, когда RN конвертирует ваш код в собственный, android не поддерживает GIF по умолчанию, поэтому, если мы следуем документации RN, необходимо установить F resco чтобы разобраться с этими вещами. Но проблема в том, что когда я тестирую на Android, эффективность очень ужасная. Просто покажите третье изображение, смайлик GIF очень лагает и тормозит. Итак, наконец, я обнаружил react-native-fast-image и, кажется, все стало лучше.
- Что касается жестов в React Native, в настоящее время я должен использовать PanResponder (для перетаскивания), а для обработки касания вниз и касания события используйте onTouchStart и onTouchEnd в компоненте View. Проблема в том, что мы не можем связать событие между этими компонентами, например, когда я нажимаю кнопку и сразу же перетаскиваю пальцы к красному квадрату для выбора смайлика, я не могу, потому что в настоящее время Я все еще застреваю в событии кнопки, хотя мои пальцы находятся за пределами области кнопки. Но во Flutter это так, достаточно просто использовать GestureDetector (можно нажать кнопку вниз и зафиксировать перетаскивание, даже если это два виджета).
- О назначении значения некоторых переменных для проверки, чтобы определить, какая анимация должна воспроизводиться в то время. Поскольку мы проверяем эти переменные в функции рендеринга, но мы присваиваем им значение в другой функции, поэтому необходимо setState после присвоения значения, тогда эти переменные при рендеринге могут проверить реальное значение.
Прочтите мою статью о сравнении анимации между Flutter и React Native здесь:
для получения более подробной информации о подходе, производительности, сложности… если вам нужно.
Резюме
Итак, мы просто передаем основные вещи, чтобы сделать анимацию, как Facebook Reactions.
Если у вас есть вопросы, ребята. Пожалуйста, оставьте отзыв, чтобы мы могли обсуждать и улучшать друг друга.
Мой исходный код доступен по адресу
Версия Flutter здесь
До свидания и до новых встреч 👐
