{"id":18340496,"url":"https://github.com/datav-team/transition","last_synced_at":"2025-04-06T05:32:38.244Z","repository":{"id":34068068,"uuid":"166018321","full_name":"DataV-Team/Transition","owner":"DataV-Team","description":"基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线","archived":false,"fork":false,"pushed_at":"2022-12-12T18:51:19.000Z","size":5072,"stargazers_count":23,"open_issues_count":23,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T03:50:05.894Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://transition.jiaminghi.com","language":"JavaScript","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/DataV-Team.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}},"created_at":"2019-01-16T10:09:20.000Z","updated_at":"2024-12-30T08:00:56.000Z","dependencies_parsed_at":"2023-01-15T04:30:36.832Z","dependency_job_id":null,"html_url":"https://github.com/DataV-Team/Transition","commit_stats":null,"previous_names":["jiaming743/transition"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FTransition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FTransition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FTransition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FTransition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DataV-Team","download_url":"https://codeload.github.com/DataV-Team/Transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247440805,"owners_count":20939223,"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-11-05T20:22:44.365Z","updated_at":"2025-04-06T05:32:35.656Z","avatar_url":"https://github.com/DataV-Team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ENGLISH](./README_EN.md)\n\n\u003ch1 align=\"center\"\u003eTransition\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/DataV-Team/transition\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/com/DataV-Team/transition.svg\" alt=\"Travis CI\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/DataV-Team/transition/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/DataV-Team/transition.svg\" alt=\"LICENSE\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@jiaminghi/transition\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@jiaminghi/transition.svg\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Transition 是什么?\n\n- 它是一个基于**贝塞尔曲线**的动效插件。\n- 它提供常用的**缓动曲线**。\n- 支持**自定义**缓动曲线。\n\n### 动画是如何产生的?\n\n- 获取一帧动画数据\n- 根据动画数据渲染图像\n- 重复...\n\n我们可以使用三组数据去描述一段动画（**动画起始状态**、**动画结束状态**、**缓动曲线**），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**_Transition_**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。\n\n### npm 安装\n\n```shell\n$ npm install @jiaminghi/transition\n```\n\n### 使用\n\n```javascript\nimport { transition, injectNewCurve } from '@jiaminghi/transition'\n\n// do something\n```\n\n### 快速体验\n\n```html\n\u003c!--调试版--\u003e\n\u003cscript src=\"https://unpkg.com/@jiaminghi/transition/dist/index.js\"\u003e\u003c/script\u003e\n\u003c!--压缩版--\u003e\n\u003cscript src=\"https://unpkg.com/@jiaminghi/transition/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { transition, extendCurves, createAnimator } = window.transition\n  // do something\n\u003c/script\u003e\n```\n\n详细文档及示例请移步[HomePage](http://transition.jiaminghi.com).\n\n- [注解](#注解)\n- [示例](#示例)\n- [扩展新曲线](#扩展新曲线)\n- [缓动曲线表](#缓动曲线表)\n\n---\n\n\u003ch3 align=\"center\"\u003e注解\u003c/h3\u003e\n\n```typescript\n/**\n * @description 基于缓动曲线及起止状态获取若干帧动画状态\n * @param {EaseCurve} easeCurve 缓动曲线名或数据\n * @param {T} startState        动画起始状态\n * @param {T} endState          动画结束状态\n * @param {Number} frameNum     动画过渡帧数\n * @param {Boolean} deep        是否启用递归模式\n * @return {T[]} 过渡帧数据\n */\ntype transition = \u003cT\u003e(\n  easeCurve: EaseCurve,\n  startState: T,\n  endState: T,\n  frameNum = 30,\n  deep = false\n) =\u003e T[]\n```\n\n\u003ch3 align=\"center\"\u003e示例\u003c/h3\u003e\n\n**Transition** 支持三种数据类型以描述动画状态.\n\n- [Number](#Number)\n- [Array](#Array)\n- [Object](#Annotation)\n- [Recursive](#Recursive)\n\n#### Number\n\n```typescript\nimport transition from '@jiaminghi/transition'\n\nconst start = 0\nconst end = 100\nconst frameNum = 10\nconst easeCurve = 'linear'\n\ntransition(easeCurve, start, end, frameNum)\n/**\n * [\n *    0, 11.111111111111112, 22.222222222222225,\n *    33.333333333333336, 44.44444444444445, 55.55555555555556,\n *    66.66666666666667, 77.77777777777779, 88.8888888888889, 100\n * ]\n */\n```\n\n#### Array\n\n```typescript\nimport transition from '@jiaminghi/transition'\n\nconst start = [10, 20, 30]\nconst end = [100, 200, 300]\nconst frameNum = 3\nconst easeCurve = 'linear'\n\ntransition(easeCurve, start, end, frameNum)\n/**\n * [\n *    [10, 20, 30],\n *    [55, 110, 165],\n *    [100, 200, 300]\n * ]\n */\n```\n\n#### Object\n\n```typescript\nimport transition from '@jiaminghi/transition'\n\nconst start = { x: 0, y: 20 }\nconst end = { x: 100, y: 200 }\nconst frameNum = 3\nconst easeCurve = 'linear'\n\ntransition(easeCurve, start, end, frameNum)\n/**\n * [\n *    { x: 0, y: 20 },\n *    { x: 50, y: 110 },\n *    { x: 100, y: 200 }\n * ]\n */\n```\n\n#### Deep\n\n启用递归模式以计算`Array`或`Object`中的深层数据.\n\n```typescript\nimport transition from '@jiaminghi/transition'\n\nconst start = { x: 0, y: 20, radius: [10, 20, { z: 30 }] }\nconst end = { x: 100, y: 200, radius: [50, 90, { z: 10 }] }\nconst frameNum = 3\nconst easeCurve = 'linear'\nconst deep = true\n\ntransition(easeCurve, start, end, frameNum, deep)\n/**\n * [\n *    { x: 0, y: 20, radius: [10, 20, { z: 30 }] },\n *    { x: 50, y: 110, radius: [30, 55, { z: 20 }] },\n *    { x: 100, y: 200, radius: [50, 90, { z: 10 }] },\n * ]\n */\n```\n\n**Notice**\n\n- 非数值的属性或元素不参与计算过程.\n- 起始状态与结束状态的数据类型（包括属性及元素的数量）必须保持一致.\n\n\u003ch3 align=\"center\"\u003e扩展新曲线\u003c/h3\u003e\n\n如果你想扩展新的缓动曲线，你可以使用`Transition`提供的`extendCurves`方法去扩展。\n\n```javascript\nimport { extendCurves } from '@jiaminghi/transition'\n\nconst curveName = 'linear'\n\n// 可以使用绘制工具获得\nconst bezierCurve = [[[0, 1]], [[1, 0]]]\n\nextendCurves(curveName, bezierCurve)\n```\n\n[缓动曲线绘制工具](http://transition.jiaminghi.com/draw/)\n\n\u003ch3 align=\"center\"\u003e缓动曲线表\u003c/h3\u003e\n\n- [linear](#linear)\n- [easeInSine](#easeInSine)\n- [easeOutSine](#easeOutSine)\n- [easeInOutSine](#easeInOutSine)\n- [easeInQuad](#easeInQuad)\n- [easeOutQuad](#easeOutQuad)\n- [easeInOutQuad](#easeInOutQuad)\n- [easeInCubic](#easeInCubic)\n- [easeOutCubic](#easeOutCubic)\n- [easeInOutCubic](#easeInOutCubic)\n- [easeInQuart](#easeInQuart)\n- [easeOutQuart](#easeOutQuart)\n- [easeInOutQuart](#easeInOutQuart)\n- [easeInQuint](#easeInQuint)\n- [easeOutQuint](#easeOutQuint)\n- [easeInOutQuint](#easeInOutQuint)\n- [easeInBack](#easeInBack)\n- [easeOutBack](#easeOutBack)\n- [easeInOutBack](#easeInOutBack)\n- [easeInElastic](#easeInElastic)\n- [easeOutElastic](#easeOutElastic)\n- [easeInOutElastic](#easeInOutElastic)\n- [easeInBounce](#easeInBounce)\n- [easeOutBounce](#easeOutBounce)\n- [easeInOutBounce](#easeInOutBounce)\n\n#### linear\n\n![linear](/exampleImg/linear.gif)\n\n#### easeInSine\n\n![linear](/exampleImg/easeInSine.gif)\n\n#### easeOutSine\n\n![linear](/exampleImg/easeOutSine.gif)\n\n#### easeInOutSine\n\n![linear](/exampleImg/easeInOutSine.gif)\n\n#### easeInQuad\n\n![linear](/exampleImg/easeInQuad.gif)\n\n#### easeOutQuad\n\n![linear](/exampleImg/easeOutQuad.gif)\n\n#### easeInOutQuad\n\n![linear](/exampleImg/easeInOutQuad.gif)\n\n#### easeInCubic\n\n![linear](/exampleImg/easeInCubic.gif)\n\n#### easeOutCubic\n\n![linear](/exampleImg/easeOutCubic.gif)\n\n#### easeInOutCubic\n\n![linear](/exampleImg/easeInOutCubic.gif)\n\n#### easeInQuart\n\n![linear](/exampleImg/easeInQuart.gif)\n\n#### easeOutQuart\n\n![linear](/exampleImg/easeOutQuart.gif)\n\n#### easeInOutQuart\n\n![linear](/exampleImg/easeInOutQuart.gif)\n\n#### easeInQuint\n\n![linear](/exampleImg/easeInQuint.gif)\n\n#### easeOutQuint\n\n![linear](/exampleImg/easeOutQuint.gif)\n\n#### easeInOutQuint\n\n![linear](/exampleImg/easeInOutQuint.gif)\n\n#### easeInBack\n\n![linear](/exampleImg/easeInBack.gif)\n\n#### easeOutBack\n\n![linear](/exampleImg/easeOutBack.gif)\n\n#### easeInOutBack\n\n![linear](/exampleImg/easeInOutBack.gif)\n\n#### easeInElastic\n\n![linear](/exampleImg/easeInElastic.gif)\n\n#### easeOutElastic\n\n![linear](/exampleImg/easeOutElastic.gif)\n\n#### easeInOutElastic\n\n![linear](/exampleImg/easeInOutElastic.gif)\n\n#### easeInBounce\n\n![linear](/exampleImg/easeInBounce.gif)\n\n#### easeOutBounce\n\n![linear](/exampleImg/easeOutBounce.gif)\n\n#### easeInOutBounce\n\n![linear](/exampleImg/easeInOutBounce.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatav-team%2Ftransition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatav-team%2Ftransition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatav-team%2Ftransition/lists"}