{"id":22342644,"url":"https://github.com/aircloud/frame-animation-canvas","last_synced_at":"2025-09-04T04:36:22.376Z","repository":{"id":57144413,"uuid":"97369968","full_name":"aircloud/frame-animation-canvas","owner":"aircloud","description":"A Frame Animation implementation Based on HTML5 Canvas","archived":false,"fork":false,"pushed_at":"2017-12-06T16:44:49.000Z","size":16,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T08:37:07.389Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aircloud.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-16T08:20:21.000Z","updated_at":"2024-11-20T07:12:08.000Z","dependencies_parsed_at":"2022-09-07T23:13:20.505Z","dependency_job_id":null,"html_url":"https://github.com/aircloud/frame-animation-canvas","commit_stats":null,"previous_names":["aircloud/frameanimationcanvas"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aircloud%2Fframe-animation-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aircloud%2Fframe-animation-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aircloud%2Fframe-animation-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aircloud%2Fframe-animation-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aircloud","download_url":"https://codeload.github.com/aircloud/frame-animation-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245630914,"owners_count":20647171,"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-12-04T08:13:18.024Z","updated_at":"2025-03-26T09:42:21.319Z","avatar_url":"https://github.com/aircloud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##  一种基于canvas的帧动画实现\n\n*beta*\n\n\u003eThe English edition of instruction is edited and is to be published soon\n\n### 使用\n\n```\nnpm i frame-animation-canvas --save\n```\n\n然后可以直接:\n\n```\nvar frameAnimationCanvas = require(\"frame-animation-canvas\");\n\n//...\nvar ani = frameAnimationCanvas(\"frameResult.png\",$theDomNode,ArrayFromJsonResult,60);\nani.begin();\n```\n\n\u003e注意：直接给canvas的dom指定width和height即可，无需另外传参数\n\n默认引入的是babel编译好的ES5版本，无需进行编译即可使用。\n\n源文件在src文件夹下，也可以直接拷贝源文件进行使用。\n\n另外值得注意的是，素材需要由[Egret Texture Merger](http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/manual/index.html)这个工具生成，也可参考[这里](https://zhuanlan.zhihu.com/p/27915958)\n\n### 构造函数参数列表\n\n| 属性 | 是否必须 | 默认值 | 描述 | 类型 |\n| ------| ------ | ------ | ------ | ------ | \n| imgSrc | 必须 | null | 所有帧的合成图片地址 | png/jpg |\n| canvasDom | 必须 | null | canvas对应的实际dom元素 | DOM |\n| positionInfo | 必须 | null | [Egret Texture Merger](http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/manual/index.html)生成的结果frames属性内容(转化成array) | array |\n| interFrameTime | 必须 | null | 帧间隔 | Number |\n\n\u003e注意：由于之前的scale参数可能会出现问题，现在已经删除scale参数，建议直接控制canvas的大小来实现缩放功能。\n\n### 方法列表\n\n* begin(index)\n\n开始方法，传入index可以指定从那一帧开始，默认从第0帧开始\n\n* stop()\n\n暂停动画\n\n* recover()\n\n恢复动画执行\n\n* end()\n\n结束动画 \t\n\n### 协议\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faircloud%2Fframe-animation-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faircloud%2Fframe-animation-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faircloud%2Fframe-animation-canvas/lists"}