Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wukongyang/taro-svga
taro使用svga动画
https://github.com/wukongyang/taro-svga
Last synced: 2 months ago
JSON representation
taro使用svga动画
- Host: GitHub
- URL: https://github.com/wukongyang/taro-svga
- Owner: wukongyang
- License: mit
- Created: 2023-12-12T01:57:21.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-13T04:00:18.000Z (about 1 year ago)
- Last Synced: 2024-09-23T07:17:46.619Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 444 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-taro - taro-svga Taro 使用svga动画库（资源体积更小、更高效、跨平台），支持weapp、h5 、tt、rn
README
# taro-svga
## Supporting platforms
**weapp h5 tt rn**
## Installing
```
yarn add taro-svga
```
### Extra Installing For React Native
> Based on [svgaplayer-rn](https://github.com/wukongyang/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
```tsx
import SvgaPlayer, { SvgaPlayerRefs } from "taro-svga";
import { useRef } from "react";
const App = () => {
const SvgaRef = useRef();
return (
);
};
```
## Component API
> Based on [taro-svga](https://github.com/wukongyang/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](https://github.com/wukongyang/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
```