1.0.2 • Published 5 months ago
taro-svga v1.0.2
taro-svga
Supporting platforms
weapp h5 tt rn
Installing
yarn add taro-svgaExtra Installing For React Native
Based on svgaplayer-rn
android
react-native link svgaplayer-rnOR auto link
Go to your ios folder and run:
pod installBasic Usage
import SvgaPlayer, { SvgaPlayerRefs } from "taro-svga";
import { useRef } from "react";
const App = () => {
const SvgaRef = useRef<SvgaPlayerRefs>();
return (
<SvgaPlayer
ref={SvgaRef}
src="https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga"
/>
);
};
Component API
Based on taro-svga
| Prop | Description | Default | Platform |
|---|---|---|---|
| src | Animation Resources | all | |
| initState | Initialization status | pause | all |
| loops | Number of cycles | 0 | all |
| width | width | 400 | all |
| loops | height | 400 | all |
| style | style sheet | all | |
| onFinished | Callback function for ending animation | all | |
| onPercentage | Callback function for progress changes | all | |
| onFrame | Callback function for frame rate changes | all | |
| onLoadingEnd | Load completed callback function | all |
Component Refs
Based on taro-svga
| start(): void | Start animation |
| pause(): void | Pause animation |
| clear(): void | Clear animation |
| stepToFrame(frame: number, play: boolean): void | Jump to the specified frame rate |
| stepToPercentage(percentage: number, play: boolean): void | Jump to specified progress |
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>