Home

Awesome

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} />

img

Api

Props

属性是否必须类型说明
sourcestring动画资源
loopsboolean动画循环次数,0无限循环,默认0
clearsAfterStopboolean动画播放完是否清空画布
currentState"start"|"pause"|"stop"|"clear"当前状态
toFramenumber控制当前动画停靠在某帧,如果 currentState 值为 ‘play’,则跳到该帧后继续播放动画
toPercentagenumber控制当前动画停靠在某进度,如果 currentState 值为 ‘play’,则跳到该帧后继续播放动画
onFinishedFunction动画播放完的回调
onFrameFunction动画播放至某帧时,回调
onPercentageFunction动画播放至某进度时,回调
onLoadingEndFunction动画加载完时,回调

Ref

load(url:string)加载资源

startAnimation()开始动画

pauseAnimation()暂停动画

stopAnimation()停止动画

clearAnimation()清空动画

stepToFrame(toFrame: number, andPlay: boolean)渲染特定的帧,如果andPlay设置为true,则从该帧开始播放

stepToPercentage(toPercentage: number, andPlay: boolean)渲染特定百分比的帧,如果将percentage值设置为andPlaytrue,则该值应从0.0to到1.0该帧播放

Possible issues

Building an OSAtomicCompareAndSwapPtrBarrier error when using SVGA on the iOS

Build using xcode, locate the error file and add it at the top

#include <libkern/OSAtomic.h>