{"id":13725261,"url":"https://github.com/svga/SVGAPlayer-Web","last_synced_at":"2025-05-07T19:33:35.580Z","repository":{"id":37532871,"uuid":"86666460","full_name":"svga/SVGAPlayer-Web","owner":"svga","description":"Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web.  使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。","archived":true,"fork":false,"pushed_at":"2023-02-06T06:34:16.000Z","size":7321,"stargazers_count":955,"open_issues_count":60,"forks_count":239,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-10-29T21:25:37.205Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://svga.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-30T06:21:06.000Z","updated_at":"2024-10-27T18:39:58.000Z","dependencies_parsed_at":"2023-02-19T05:01:30.467Z","dependency_job_id":null,"html_url":"https://github.com/svga/SVGAPlayer-Web","commit_stats":null,"previous_names":["yyued/svgaplayer-web"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svga%2FSVGAPlayer-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svga%2FSVGAPlayer-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svga%2FSVGAPlayer-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svga%2FSVGAPlayer-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svga","download_url":"https://codeload.github.com/svga/SVGAPlayer-Web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645286,"owners_count":17346111,"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-03T01:02:17.486Z","updated_at":"2024-11-14T15:31:02.093Z","avatar_url":"https://github.com/svga.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Archived\n\n本仓库已经停止维护，你仍然继续阅读源码及创建分叉，但本仓库不会继续更新，也不会回答任何 issue。\n\nThis repo has stopped maintenance, you can still continue to read the source code and create forks, but this repo will not continue to be updated, nor will it answer any issues.\n\n# SVGAPlayer-Web\n\nLanguage: [中文](README.zh.md)\n\nSVGAPlayer 现已支持在微信小程序播放动画，详情请[参阅](https://github.com/yyued/SVGAPlayer-Web/tree/mp)。\n\n## 支持本项目\n\n1. 轻点 GitHub Star，让更多人看到该项目。\n\n## News\n\n* **[Lite Version](https://github.com/svga/SVGAPlayer-Web-Lite)**\n* 2.3.0 - Add audio support.\n\n## Can I Use\n\nSVGAPlayer 2.0.0 only supports below browsers.\n\n* Edge / IE 6+\n* Safari / Chrome\n* iOS 6.0+ / Android 4.0+\n\nSVGAPlayer 2.0.0 also supports below Game Engines.\n\n* CreateJS [Usage](CreateJS.README.md)\n* LayaBox [Usage](LayaBox.README.md)\n\n## Install\n\n### Prebuild JS\n\n1. Add ```\u003cscript src=\"https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js\"\u003e\u003c/script\u003e``` to your.html\n\n### NPM\n\n1. ```npm install svgaplayerweb --save```\n2. Add ``` require('svgaplayerweb') ``` to ```xxx.js```\n\n### IE6 ~ IE9\n\n* IE6+ only supports 2.x format.\n* You couldn't use npm to install SVGA library.\n\n1. Add [SVGAPlayerWeb.swf](https://github.com/yyued/SVGAPlayer-Web/blob/master/tests/SVGAPlayerWeb.swf) to your.html locate directory.\n2. Add following code to your.html\n\n```\n\u003c!--[if lt IE 10]\u003e \n    \u003cscript src=\"../build/svga.ie.min.js\"\u003e\u003c/script\u003e\n\u003c![endif]--\u003e\n\u003c!--[if gte IE 10]\u003e\u003c!--\u003e\n    \u003cscript src=\"../build/svga.min.js\"\u003e\u003c/script\u003e\n\u003c!--\u003c![endif]--\u003e\n```\n\n### Audio support\n\nIf your need to play audios, add ```howler.min.js``` to your html.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js\"\u003e\u003c/script\u003e\n```\n\nNotice: audio plays needs browser support, some browser requires user interaction before playing.\n\n### SVGA-Format 1.x support\n\nBoth Prebuild \u0026 NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.\n\n```html\n\u003cscript src=\"//s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Load Animation Mannally\n\nYou may create Player and Parser by yourself.\n\n1. Add Div Tag.\n\n```html\n\u003cdiv id=\"demoCanvas\" style=\"styles...\"\u003e\u003c/div\u003e\n```\n\n2. Load Animation\n\n```js\nvar player = new SVGA.Player('#demoCanvas');\nvar parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+\nparser.load('rose_2.0.0.svga', function(videoItem) {\n    player.setVideoItem(videoItem);\n    player.startAnimation();\n})\n```\n\n### Load Animation Automatically\n\nAssign canvas element properties as below.\n\n```html\n\u003cdiv src=\"rose_2.0.0.svga\" loops=\"0\" clearsAfterStop=\"true\" style=\"styles...\"\u003e\u003c/div\u003e\n```\n\nAnimation will play after Web-Page onload.\n\n### Replace Animation Images Dynamically\n\nYou can replace specific image by yourself, ask your designer tell you the ImageKey.\n\n```\nplayer.setImage('http://yourserver.com/xxx.png', 'ImageKey');\n```\n\n### Add Text on Animation Image Dynamically\n\nYou can add text on specific image, ask your designer tell you the ImageKey.\n\n```\nplayer.setText('Hello, World!', 'ImageKey');\n```\n\n```\nplayer.setText({ \n    text: 'Hello, World!', \n    family: 'Arial',\n    size: \"24px\", \n    color: \"#ffe0a4\",\n    offset: {x: 0.0, y: 0.0}\n}, 'ImageKey'); // customize text styles.\n```\n\n## Classes\n\n### SVGA.Player\n\nYou use SVGA.Player controls animation play and stop.\n\n#### Properties\n\n* int loops; - Animation loop count, defaults to 0 means infinity loop.\n* BOOL clearsAfterStop; - defaults to true, means player will clear all contents after stop.\n* string fillMode; - defaults to Forward，optional Forward / Backward，fillMode = Forward，Animation will pause on last frame while finished，fillMode = Backward , Animation will pause on first frame.\n\n#### Methods\n\n* constructor (canvas); - first params could be '#id' or CanvasHTMLElement\n* startAnimation(reverse: boolean = false); - start animation from zero frame.\n* startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - start animation in [location, location+length] frame range.\n* pauseAnimation(); - pause animation on current frame.\n* stopAnimation(); - stop animation, clear contents while clearsAfterStop === true\n* setContentMode(mode: \"Fill\" | \"AspectFill\" | \"AspectFit\"); - Specific Scale Mode\n* setClipsToBounds(clipsToBounds: boolean); - Clips if image render out of box.\n* clear(); - force clear contents.\n* stepToFrame(frame: int, andPlay: Boolean); - stop to specific frame, play animation while andPlay === true\n* stepToPercentage(percentage: float, andPlay: Boolean); - stop to specific percentage, play animation while andPlay === true\n* setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - Replace Animation Images Dynamically, transform is optional, transform could adjust replacing image.\n* setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - Add Text on Animation Image Dynamically\n* clearDynamicObjects(); - clear all dynamic objects.\n\n#### Callback Method\n* onFinished(callback: () =\u003e void): void; - call after animation stop.\n* onFrame(callback: (frame: number): void): void; - call after animation specific frame rendered.\n* onPercentage(callback: (percentage: number): void): void; - call after animation specific percentage rendered.\n\n### SVGA.Parser\n\nYou use SVGA.Parser load VideoItem from remote or Base64 string.\n\nOnly Cross-Domain allow files could be loaded.\n\nIf you eager to load resources from Base64 or File, deliver as ```load(File)``` or ```load('data:svga/2.0;base64,xxxxxx')```.\n\n#### Methods\n\n* constructor();\n* load(url: string, success: (videoItem: VideoEntity) =\u003e void, failure: (error: Error) =\u003e void): void;\n\n## Issues\n\n### Android 4.x Breaks\n\nAs known, some Android OS lack Blob support, add Blob Polyfill by yourself.\n\n```\n\u003cscript src=\"//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js\"\u003e\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvga%2FSVGAPlayer-Web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvga%2FSVGAPlayer-Web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvga%2FSVGAPlayer-Web/lists"}