{"id":13604083,"url":"https://github.com/wukongyang/taro-svga","last_synced_at":"2025-04-11T22:32:32.318Z","repository":{"id":212003920,"uuid":"730469069","full_name":"wukongyang/taro-svga","owner":"wukongyang","description":"taro使用svga动画","archived":false,"fork":false,"pushed_at":"2023-12-13T04:00:18.000Z","size":455,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T11:38:04.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wukongyang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-12T01:57:21.000Z","updated_at":"2023-12-12T05:41:27.000Z","dependencies_parsed_at":"2024-11-07T08:44:04.333Z","dependency_job_id":null,"html_url":"https://github.com/wukongyang/taro-svga","commit_stats":null,"previous_names":["wukongyang/taro-svga"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wukongyang%2Ftaro-svga","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wukongyang%2Ftaro-svga/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wukongyang%2Ftaro-svga/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wukongyang%2Ftaro-svga/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wukongyang","download_url":"https://codeload.github.com/wukongyang/taro-svga/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489868,"owners_count":21112652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T19:00:39.575Z","updated_at":"2025-04-11T22:32:28.472Z","avatar_url":"https://github.com/wukongyang.png","language":"TypeScript","funding_links":[],"categories":["第三方库和组件"],"sub_categories":["Taro1"],"readme":"# taro-svga\n\n## Supporting platforms\n\n**weapp h5 tt rn**\n\n## Installing\n\n```\nyarn add taro-svga\n```\n\n### Extra Installing For React Native\n\n\u003e Based on [svgaplayer-rn](https://github.com/wukongyang/SVGAPlayer-rn)\n\nyou best do\n\n```\nyarn add svgaplayer-rn\n```\n\nandroid\n\n```\nreact-native link svgaplayer-rn\n```\n\nOR\nauto link\n\nGo to your ios folder and run:\n\n```\npod install\n```\n\n## Basic Usage\n\n```tsx\nimport SvgaPlayer, { SvgaPlayerRefs } from \"taro-svga\";\nimport { useRef } from \"react\";\n\nconst App = () =\u003e {\n  const SvgaRef = useRef\u003cSvgaPlayerRefs\u003e();\n  return (\n    \u003cSvgaPlayer\n      ref={SvgaRef}\n      src=\"https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga\"\n    /\u003e\n  );\n};\n```\n\n![img](./angle.gif)\n\n## Component API\n\n\u003e Based on [taro-svga](https://github.com/wukongyang/taro-svga)\n\n|       Prop       |               Description                | Default | Platform |\n| :--------------: | :--------------------------------------: | :-----: | :------: |\n|     **src**      |           Animation Resources            |         |   all    |\n|  **initState**   |          Initialization status           | `pause` |   all    |\n|    **loops**     |             Number of cycles             |   `0`   |   all    |\n|    **width**     |                  width                   |  `400`  |   all    |\n|    **loops**     |                  height                  |  `400`  |   all    |\n|    **style**     |               style sheet                |         |   all    |\n|  **onFinished**  |  Callback function for ending animation  |         |   all    |\n| **onPercentage** |  Callback function for progress changes  |         |   all    |\n|   **onFrame**    | Callback function for frame rate changes |         |   all    |\n| **onLoadingEnd** |     Load completed callback function     |         |   all    |\n\n## Component Refs\n\n\u003e Based on [taro-svga](https://github.com/wukongyang/taro-svga)\n\n|                                                               |                                  |\n| :-----------------------------------------------------------: | :------------------------------: |\n|                       **start(): void**                       |         Start animation          |\n|                       **pause(): void**                       |         Pause animation          |\n|                       **clear(): void**                       |         Clear animation          |\n|      **stepToFrame(frame: number, play: boolean): void**      | Jump to the specified frame rate |\n| **stepToPercentage(percentage: number, play: boolean): void** |    Jump to specified progress    |\n\n## Possible issues\n\n**Building an OSAtomicCompareAndSwapPtrBarrier error when using SVGA on the iOS**\n\nBuild using xcode, locate the error file and add it at the top\n\n```\n#include \u003clibkern/OSAtomic.h\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwukongyang%2Ftaro-svga","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwukongyang%2Ftaro-svga","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwukongyang%2Ftaro-svga/lists"}