{"id":29926560,"url":"https://github.com/ecomfe/saber-run","last_synced_at":"2025-08-02T12:42:10.276Z","repository":{"id":11554119,"uuid":"14040044","full_name":"ecomfe/saber-run","owner":"ecomfe","description":"移动端动画效果支持","archived":false,"fork":false,"pushed_at":"2014-11-03T10:12:24.000Z","size":312,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-07-22T05:16:49.225Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/ecomfe.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","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":"2013-11-01T09:51:58.000Z","updated_at":"2015-08-22T09:38:20.000Z","dependencies_parsed_at":"2022-08-30T20:01:00.995Z","dependency_job_id":null,"html_url":"https://github.com/ecomfe/saber-run","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ecomfe/saber-run","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fsaber-run","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fsaber-run/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fsaber-run/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fsaber-run/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecomfe","download_url":"https://codeload.github.com/ecomfe/saber-run/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fsaber-run/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268392110,"owners_count":24243297,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-08-02T12:42:00.016Z","updated_at":"2025-08-02T12:42:10.241Z","avatar_url":"https://github.com/ecomfe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"saber-run [![Build Status](https://travis-ci.org/ecomfe/saber-run.png?branch=master)](https://travis-ci.org/ecomfe/saber-run)\n===\n\n移动端动画效果支持\n\n## Installation\n\n通过 [edp](https://github.com/ecomfe/edp) 引入模块：\n\n```sh\nedp import saber-run\n```\n\n## Usage\n\n```js\nvar runner = require('saber-run');\nvar ele = document.getElmentById('saber');\n\nvar animation = runner.animation(ele);\n\nanimation\n    // x、y轴各移动10像素\n    .move(10, 10)\n    // 设置动画时长为700ms\n    .duration(0.7)\n    // 同时再旋转60度\n    .rotate(60)\n    // 跑起来～\n    .run()\n    // 动画完后再干点啥\n    .finish(function () {\n        alert('Surprise')\n    })\n    // 再来一次 歪个脖\n    .skew(10)\n    .run();\n```\n\n## API\n\n* [Methods](#methods)\n* [Classes](#classes)\n\n### Methods\n\n#### animation(ele[, options])\n\n创建动画对象, 返回[Animation](doc/animation.md)实例\n\n* **ele** `{HTMLElement}` 需要进行动画的DOM元素\n* **options** `{Object=}` 默认动画配置参数\n    * **duration** `{number=}` 默认动画时长\n    * **delay** `{number=}` 默认动画延时\n    * **ease** `{string=}` 默认缓动效果\n* _return_ `{Animation}` [Animation](doc/animation.md)动画对象\n\n缓动效果如下 参考[move.js](https://github.com/visionmedia/move.js)：\n\n```js\n{\n    'default': 'ease',\n    'in': 'ease-in',\n    'out': 'ease-out',\n    'in-out': 'ease-in-out',\n    'snap': 'cubic-bezier(0,1,.5,1)',\n    'linear': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',\n    'ease-in-quad': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n    'ease-in-cubic': 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n    'ease-in-quart': 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n    'ease-in-quint': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n    'ease-in-sine': 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n    'ease-in-expo': 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n    'ease-in-circ': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n    'ease-in-back': 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n    'ease-out-quad': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n    'ease-out-cubic': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n    'ease-out-quart': 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n    'ease-out-quint': 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n    'ease-out-sine': 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n    'ease-out-expo': 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n    'ease-out-circ': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n    'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n    'ease-in-out-quad': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n    'ease-in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n    'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n    'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n    'ease-in-out-sine': 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n    'ease-in-out-expo': 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n    'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n    'ease-in-out-back': 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'\n}\n```\n\n#### transition(ele, properties, options)\n\n设置元素transition效果\n\n* **ele** `{HTMLElement}` DOM元素\n* **properties** `{Object}` 变化的样式属性\n* **options** `{Object=}` 配置参数\n    * **duration** `{number=}` 时长\n    * **delay** `{number=}` 延时\n    * **ease** `{string=}` 缓动效果\n* _return_ `{Promise}` 表示transition结果的[Promise](https://github.com/ecomfe/saber-promise)对象\n\n#### stopTransition(ele)\n\n停止元素的transition效果，所有属性立即变为最终值\n\n* **ele** `{HTMLElement}` DOM元素\n\n#### onTransitionEnd(ele, callback[, useCapture])\n\n监听transitionend事件\n\n* **ele** `{HTMLElement}` DOM元素\n* **callback** `{Function}` 回调函数\n* **useCapture** `{boolean=}` 是否启用捕获，默认为`false`\n\n#### unTransitionEnd(ele, callback[, useCapture])\n\n取消监听transitionend事件\n\n* **ele** `{HTMLElement}` DOM元素\n* **callback** `{Function}` 回调函数\n* **useCapture** `{boolean}` 是否启用捕获，默认为`false`\n\n#### oneTransitionEnd(ele, callback[, useCapture])\n\n只监听一次transitionend事件\n\n* **ele** `{HTMLElement}` DOM元素\n* **callback** `{Function}` 回调函数\n* **useCapture** `{boolean}` 是否启用捕获，默认为`false`\n\n#### requestAnimationFrame(callback)\n\n添加动画帧\n\n* **callback** `{Function}` 回调函数\n* _return_ `{number}` 动画帧标示\n\n#### cancelAnimationFrame(idenity)\n\n取消已添加的动画帧\n\n* **idenity** `{number}` 动画帧标示，由[requestAnimationFrame()](#requestanimationframecallback)返回\n\n### Classes\n\n* [Animation](doc/animation.md) 动画对象\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fsaber-run","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecomfe%2Fsaber-run","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fsaber-run/lists"}