react native typing animation

特徵

• 運動平穩

• 可客製化

• 無依賴關係

• 快速、輕量且無影像

• 使用requestAnimationFrame

• 與 React Native Web 一起使用

安裝

• 使用 npm： npm install react-native-typing-animation --save

• 使用紗線： yarn add react-native-typing-animation

例子

從“react”導入React;從“react-native-typing-animation”導入{TypingAnimation};類別範例擴充React.Component {
  渲染（）{返回<TypingAnimation />;
  }}

進階範例

從“react”導入React;從“react-native-typing-animation”導入{TypingAnimation};類別範例擴充React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

道具

• style (Object) - 容器樣式；預設為{}

• dotColor (String) - 點顏色；預設為#000 （黑色）

• dotStyles (Object) - 點樣式；預設為{}

• dotRadius (Integer) - 點半徑；預設值為2.5

• dotMargin (Integer) - 點邊距，點之間的空間；預設值為3

• dotAmplitude (Integer) - 點幅度；預設值為3

• dotSpeed (Integer) - 點速度，整個動畫視野的速度；預設值為0.15

• dotY (Integer) - 點 y，起始 y 座標；預設值為6

• dotX (Integer) - 點x，中心點的x座標；預設值為12

• show (Boolean) - 可見性，是否顯示整個動畫視圖；預設為true

反應本機網絡

該程式庫與 React Native Web 配合使用。您可以在此處查看工作範例，並在此處提供原始程式碼。如果您使用 create-react-app ，可能值得將程式庫來源檔案複製到您的應用程式中，而不是將其安裝為依賴項，以避免反應本機別名問題。請參閱/example-rn-web目錄了解我的意思。

執照

• 麻省理工學院

作者

請隨時在 Twitter @icookandcode 上向我提問！

製作人員

工作基於 Nash Vail 撰寫的精彩文章“如何使用簡單的三角學來創建更好的裝載機”

貢獻者

• 丹尼斯·穆拉奇

提交 PR 來做出貢獻:)

路線圖

• 使用useNativeDriver從requestAnimationFrame移到Animated （歡迎 PR）

• 與天才聊天集成

• 單元測試（歡迎 PR）

發布

我們使用release-it來發布，執行以下操作：

yarn run release:dry
yarn run release

變更日誌

• 允許配置動畫速度

• 允許視圖的可見性可配置 #22