svgaplayer-rn
react native 使用 svga 動畫争涌，兼容android、ios
安裝
yarn add svgaplayer-rn
Android:
react-native link svgaplayer-rn
Or
auto link
iOS:
cd ios
run pod install
使用
import { SVGAView } from "svgaplayer-rn";
<SVGAView source={src} />
daka.gif
Api
Props
| 屬性 | 是否必須 | 類型 | 說明 |
|---|---|---|---|
| source | 是 | string |
動畫資源 |
| loops | 否 | boolean |
動畫循環(huán)次數(shù)，0無限循環(huán)，默認(rèn)0 |
| clearsAfterStop | 否 | boolean |
動畫播放完是否清空畫布 |
| currentState | 否 | "start"｜"pause"｜"stop"｜"clear" |
當(dāng)前狀態(tài) |
| toFrame | 否 | number |
控制當(dāng)前動畫停靠在某幀张漂，如果 currentState 值為 ‘play’，則跳到該幀后繼續(xù)播放動畫 |
| toPercentage | 否 | number |
控制當(dāng)前動畫徒髂龋靠在某進(jìn)度航攒，如果 currentState 值為 ‘play’，則跳到該幀后繼續(xù)播放動畫 |
| onFinished | 否 | Function |
動畫播放完的回調(diào) |
| onFrame | 否 | Function |
動畫播放至某幀時趴梢，回調(diào) |
| onPercentage | 否 | Function |
動畫播放至某進(jìn)度時漠畜，回調(diào) |
| onLoadingEnd | 否 | Function |
動畫加載完時，回調(diào) |
Ref
load(url:string)加載資源
startAnimation()開始動畫
pauseAnimation()暫停動畫
stopAnimation()停止動畫
clearAnimation()清空動畫
stepToFrame(toFrame: number, andPlay: boolean)渲染特定的幀坞靶，如果andPlay設(shè)置為true憔狞，則從該幀開始播放
stepToPercentage(toPercentage: number, andPlay: boolean)渲染特定百分比的幀，如果將percentage值設(shè)置為andPlaytrue彰阴，則該值應(yīng)從0.0to到1.0該幀播放
