Плавное движение
Настраиваемый
Нет зависимостей
Быстрый, легкий и без изображений
Использует requestAnimationFrame
Работает с React Native Web.
Использование npm: npm install react-native-typing-animation --save
Использование Yarn: yarn add react-native-typing-animation
import React from "react";import { TypingAnimation } из "react-native-typing-animation";Пример класса расширяет React.Component { render() {return <TypingAnimation />; }}
import React from "react";import { TypingAnimation } из "react-native-typing-animation";Пример класса расширяет React.Component { render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />); }}
style
(Объект) — Стили контейнера; по умолчанию — {}
dotColor
(String) — Цвет точки; по умолчанию — #000
(черный).
dotStyles
(Объект) — Стили точек; по умолчанию – {}
dotRadius
(Целое число) - Радиус точки; по умолчанию 2.5
dotMargin
(Целое число) — Точечное поле, пространство между точками; по умолчанию 3
dotAmplitude
(Целое число) — Амплитуда точки; по умолчанию 3
dotSpeed
(Integer) — Скорость точки, скорость просмотра всей анимации; по умолчанию 0.15
dotY
(Целое число) — Точка y, начальная координата y; по умолчанию 6
dotX
(Целое число) — Точка x, координата x центральной точки; по умолчанию 12
show
(Boolean) — Видимость, отображается ли весь вид анимации или нет; по умолчанию true
Библиотека работает с React Native Web. Вы можете увидеть рабочий пример здесь, а исходный код доступен здесь. Если вы используете create-react-app, возможно, стоит скопировать исходные файлы библиотеки в ваше приложение вместо того, чтобы устанавливать его в качестве зависимости, чтобы избежать проблем с псевдонимами, связанными с реагированием. Посмотрите каталог /example-rn-web
чтобы понять, что я имею в виду.
Массачусетский технологический институт
Не стесняйтесь задавать мне вопросы в Твиттере @icookandcode!
Работа основана на замечательной статье Нэша Вейла «Как использовать простую тригонометрию для создания лучших загрузчиков».
Деннис Мюраж
Отправьте PR, чтобы внести свой вклад :)
Переход от requestAnimationFrame
к Animated
с помощью useNativeDriver
(рекомендуются PR)
Интеграция с Gifted Chat
Модульные тесты (PR приветствуются)
Мы используем release-it
, для выпуска делаем следующее:
yarn run release:dry yarn run release
Разрешить настройку скорости анимации
Разрешить настройку видимости представления # 22