Мобильная версияЯ новичок в анимации в React Native. Я реализовал анимацию в разных частях своего приложения двумя способами: один — с помощью библиотеки act-native-animable, а другой — с помощью собственной Animated от React Native.
Проблема, с которой я столкнулся, заключается в следующем: при плавном появлении анимации на устройствах iOS и симуляторах анимация работает без каких-либо проблем, и даже когда плавное появление изображений за анимационным представлением не видно, однако на устройствах Android и в эмуляторах анимированные виды становятся несколько полупрозрачными, поэтому, если за ними есть какие-либо виды, они становятся несколько видимыми на время анимации. После завершения анимации все становится нормально.
Это происходит с обоими методами анимации, которые я использовал в своем приложении.
Пример кода приведен ниже. Я использую этот компонент для рендеринга пузырька чата в виде представления для определенной цели, однако в Android, пока этот пузырь анимируется/затухает, «пузырь» выглядит полупрозрачным, а часть представление «хвост», которое должно скрываться за представлением «пузырь», становится видимым на время анимации, тогда как в iOS даже при затухании части «хвоста», которая должна находиться за «пузырем», этого не происходит. не станет видимым.
{replaceKeys(text)} константные стили = StyleSheet.create({ контейнер: { гибкий: 1, flexDirection: 'строка', }, пузырь: { BackgroundColor: 'rgba(247,247,248,1)', бордюрРадиус: умеренныйМасштаб (30), отступ: умеренныйScale(15), МаржаБоттом: умеренныйМасштаб(20), }, текст: { Семейство шрифтов: Fonts.regular, Размер шрифта: умеренныйМасштаб (16), цвет: 'rgba(0,0,0,1)', }, хвостправый: { ширина: 20, // Регулируем длину хвоста height: 10, // Регулируем высоту хвоста borderTopWidth: умеренный масштаб (10), borderTopColor: 'rgba(120, 198, 216, 1)', borderRightWidth: умеренный масштаб (10), borderRightColor: 'прозрачный', преобразование: [{rotate: '50deg'}], позиция: «абсолютная», внизу: 0, правильно: 0, МаржаБоттом: умеренныйМасштаб(20), }, TailLeft: {[введите описание изображения здесь](
) ширина: 20, // Регулируем длину хвоста height: 10, // Регулируем высоту хвоста границаBottomWidth: 10, borderBottomColor: 'rgba(247,247,248,1)', границаRightWidth: 10, borderRightColor: 'прозрачный', преобразование: [{rotate: '120deg'}], позиция: «абсолютная», внизу: 1, left: 0, // Регулируем левое положение хвоста МаржаБоттом: умеренныйМасштаб(20), }, }); Я прикрепил изображения, чтобы лучше показать, что происходит. Андроид iOS