wukongyang / taro-svga

taro使用svga动画

taro-svga

Supporting platforms

weapp h5 tt rn

Installing

yarn add taro-svga

Extra Installing For React Native

Based on svgaplayer-rn

you best do

yarn add svgaplayer-rn

android

react-native link svgaplayer-rn

OR auto link

Go to your ios folder and run:

pod install

Basic 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>