{"id":22105214,"url":"https://github.com/zhangyu1818/easy-tweening","last_synced_at":"2025-03-24T02:44:53.522Z","repository":{"id":57218729,"uuid":"254408622","full_name":"zhangyu1818/easy-tweening","owner":"zhangyu1818","description":"简单进行动画","archived":false,"fork":false,"pushed_at":"2020-09-17T03:44:42.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T17:39:51.646Z","etag":null,"topics":["animation","tweening"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zhangyu1818.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":"2020-04-09T15:26:01.000Z","updated_at":"2020-10-20T12:24:18.000Z","dependencies_parsed_at":"2022-08-28T21:40:39.038Z","dependency_job_id":null,"html_url":"https://github.com/zhangyu1818/easy-tweening","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Feasy-tweening","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Feasy-tweening/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Feasy-tweening/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Feasy-tweening/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhangyu1818","download_url":"https://codeload.github.com/zhangyu1818/easy-tweening/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245200675,"owners_count":20576673,"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":["animation","tweening"],"created_at":"2024-12-01T06:39:51.701Z","updated_at":"2025-03-24T02:44:53.496Z","avatar_url":"https://github.com/zhangyu1818.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easy-tweening\n\n- 仅1kb(gzipped)的补间动画库\n- 支持多种缓动算法\n- 使用Typescript编写，自动推断类型\n\n## 安装\n\n```sh\n$ npm install easy-tweening\n```\n\n## 使用说明\n\n| 参数     \t| 描述                     \t| 类型                          \t| 默认值 \t|\n|----------\t|--------------------------\t|-------------------------------\t|--------\t|\n| duration \t| 动画持续时间（毫秒）     \t| number                        \t| -      \t|\n| easing   \t| 缓动动画                 \t| 见下方                        \t    | linear \t|\n| value    \t| 需要计算的值             \t| number\\|number[]               \t| -      \t|\n| yoyo    \t| 是否循环               \t| boolean                          \t| -      \t|\n| onChange \t| 每帧计算后调用的回调函数 \t| (value:number\\|number[])=\u003evoid \t| -      \t|\n\neasing类型：`linear`\n           | `easeInQuad`\n           | `easeOutQuad`\n           | `easeInOutQuad`\n           | `easeInCubic`\n           | `easeOutCubic`\n           | `easeInOutCubic`\n           | `easeInQuart`\n           | `easeOutQuart`\n           | `easeInOutQuart`\n           | `easeInQuint`\n           | `easeOutQuint`\n           | `easeInOutQuint`;\n\n**基本使用**\n\n```javascript\nimport tweening from \"easy-tweening\";\n\nconst element = document.querySelector(\".box\");\ntweening({\n  duration: 3000,\n  easing: \"easeInOutQuad\",\n  yoyo: true,\n  value: [0, 200],\n  onChange(x) {\n    element.style.transform = `translateX(${x}px)`;\n  },\n})\n```\n\n**计算多个值**\n\n```javascript\nimport tweening from \"easy-tweening\";\n\nconst element = document.querySelector(\".box\");\ntweening({\n  duration: 3000,\n  easing: \"easeInOutQuad\",\n  value: [\n    [0, 100],\n    [200, 500],\n  ],\n  onChange([x, y]) {\n    element.style.transform = `translate(${x}px,${y}px)`;\n  },\n});\n```\n\n**补间动画完成后调用**\n\n本质上返回的是一个`Promise`，在动画执行完后会调用`resolve`\n\n```javascript\nimport tweening from \"easy-tweening\";\n\nconst element = document.querySelector(\".box\");\ntweening({\n  duration: 3000,\n  easing: \"easeInOutQuad\",\n  value: [0, 1],\n  onChange(opacity) {\n    element.style.opacity = String(opacity);\n  },\n}).then(() =\u003e {\n  console.log(\"completed\");\n});\n```\n\n**停止动画**\n\n传入参数`key`，`key`可以为任何值，元素、字符串、数字、对象,`tweening`会寻找`key`相同的元素，将其移出动画队列，所以确保`key`的唯一\n\n```javascript\nimport tweening, { stop } from \"easy-tweening\";\n\nconst element = document.querySelector(\".box\");\ntweening({\n  key: element,\n  duration: 3000,\n  easing: \"easeInOutQuad\",\n  value: [0, 1],\n  onChange(opacity) {\n    element.style.opacity = String(opacity);\n  },\n});\n\nstop(element);\n```\n\n**清空动画**\n\n```javascript\nimport { clear } from \"easy-tweening\";\n\nclear();\n```\n\n## 使用许可\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangyu1818%2Feasy-tweening","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhangyu1818%2Feasy-tweening","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangyu1818%2Feasy-tweening/lists"}