react native typing animation

特徴

• スムーズな動き

• カスタマイズ可能

• 依存関係なし

• 高速、軽量、画像なし

• requestAnimationFrameを使用します

• React Native Web と連携

インストール

• npm の使用: npm install react-native-typing-animation --save

• 糸の使用: yarn add react-native-typing-animation

例

import React from "react";import { TypingAnimation } from "react-native-typing-animation";class 例 extends React.Component {
  render() {return <TypingAnimation />;
  }}

高度な例

import React from "react";import { TypingAnimation } from "react-native-typing-animation";class 例 extends React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

小道具

• style (オブジェクト) - コンテナのスタイル。デフォルトは{}です

• dotColor (文字列) - ドットの色。デフォルトは#000 (黒)

• dotStyles (オブジェクト) - ドット スタイル。デフォルトは{}です

• dotRadius (整数) - ドットの半径。デフォルトは2.5です

• dotMargin (整数) - ドットマージン、ドット間のスペース。デフォルトは3です

• dotAmplitude (整数) - ドットの振幅。デフォルトは3です

• dotSpeed (整数) - ドット速度、アニメーション ビュー全体の速度。デフォルトは0.15です

• dotY (整数) - ドット y、開始 y 座標。デフォルトは6です

• dotX (整数) - ドット x、中心ドットの x 座標。デフォルトは12です

• show (ブール値) - アニメーション ビュー全体が表示されるかどうかの可視性。デフォルトはtrueです

ネイティブウェブに反応する

このライブラリは React Native Web で動作します。動作例はここで見ることができ、ソースコードはここで入手できます。 create-react-app を使用している場合は、react-native エイリアスの問題を回避するために、ライブラリ ソース ファイルを依存関係としてインストールするのではなく、アプリにコピーする価値があるかもしれません。私の言っている意味については、 /example-rn-webディレクトリを参照してください。

ライセンス

• マサチューセッツ工科大学

著者

Twitter @icookandcode でお気軽に質問してください。

クレジット

この作業は、Nash Vail による素晴らしい記事「シンプルな三角法を使用してより良いローダーを作成する方法」に基づいています。

貢献者

• デニス・ムラゲ

貢献するには PR を送信してください :)

ロードマップ

• requestAnimationFrameからuseNativeDriverを使用したAnimatedへの移行 (PR 歓迎)

• Gifted Chat との統合

• 単体テスト (PR 歓迎)

リリース

release-it使用して、リリースするには次の操作を行います。

yarn run release:dry
yarn run release

変更履歴

• アニメーション速度を設定可能にする

• ビューの可視性を設定可能にする #22