{"id":19014238,"url":"https://github.com/spritejs/sprite-timeline","last_synced_at":"2025-04-13T06:36:24.943Z","repository":{"id":23752229,"uuid":"99763157","full_name":"spritejs/sprite-timeline","owner":"spritejs","description":"Custom timelines for manipulate sprite animation.","archived":false,"fork":false,"pushed_at":"2023-03-01T19:40:39.000Z","size":2805,"stargazers_count":107,"open_issues_count":10,"forks_count":8,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-12T23:05:29.529Z","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/spritejs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-09T03:56:13.000Z","updated_at":"2024-06-18T18:43:17.669Z","dependencies_parsed_at":"2024-06-18T18:42:42.711Z","dependency_job_id":"f6de1b55-0ae7-4442-b521-f5bdd881c1bc","html_url":"https://github.com/spritejs/sprite-timeline","commit_stats":{"total_commits":76,"total_committers":4,"mean_commits":19.0,"dds":"0.11842105263157898","last_synced_commit":"a20bac4cee2d7089e4d98d7fe86ecf2d4da674ec"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675302,"owners_count":21143763,"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-08T19:28:27.730Z","updated_at":"2025-04-13T06:36:24.907Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sprite Timeline\n\n[![npm status](https://img.shields.io/npm/v/sprite-timeline.svg)](https://www.npmjs.org/package/sprite-timeline)\n[![build status](https://api.travis-ci.org/spritejs/sprite-timeline.svg?branch=master)](https://travis-ci.org/spritejs/sprite-timeline) \n[![dependency status](https://david-dm.org/spritejs/sprite-timeline.svg)](https://david-dm.org/spritejs/sprite-timeline)\n[![Maintainability](https://api.codeclimate.com/v1/badges/7882da6c1cbac6283ffd/maintainability)](https://codeclimate.com/github/spritejs/sprite-timeline/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/7882da6c1cbac6283ffd/test_coverage)](https://codeclimate.com/github/spritejs/sprite-timeline/test_coverage)\n\nCustom timelines  for manipulate sprite animation.\n\n## Installation\n\n```bash\nnpm install sprite-timeline\n```\n\n## Usage\n\nin browser\n\n```html\n\u003cscript src=\"https://s3.ssl.qhres.com/!670d1b37/sprite-timeline.min.js\"\u003e\u003c/script\u003e\n```\n\n## Demos\n\n[DEMO 1](https://code.h5jun.com/mit/edit?js,output)\n\n```js\nconst T = 2000\nlet timeline\n\nrequestAnimationFrame(function update() {\n  if(!timeline) timeline = new Timeline()\n  const rotation = 360 * timeline.currentTime / T\n  ball.style.transform = `rotate(${rotation}deg)`\n  requestAnimationFrame(update)\n})\n\nspeedUp.onclick = function(){\n  if(timeline) timeline.playbackRate += 0.2\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\nspeedDown.onclick = function(){\n  if(timeline) timeline.playbackRate -= 0.2\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\nreverse.onclick = function(){\n  if(timeline) timeline.playbackRate = -timeline.playbackRate\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\npause.onclick = function(){\n  if(timeline) timeline.playbackRate = 0\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n```\n\n[DEMO 2](https://code.h5jun.com/qosi/edit?js,output)\n\n```js\nconst T = 2000\nlet timeline = new Timeline()\n\ntimeline.setInterval(function update() {\n  ball.innerHTML = Math.round(timeline.currentTime / 100)\n  if(timeline.playbackRate \u003c 0){\n    ball.style.backgroundColor = 'green'\n  } else {\n    ball.style.backgroundColor = 'red'\n  }\n}, {entropy: 100})\n\nspeedUp.onclick = function(){\n  if(timeline) timeline.playbackRate += 0.2\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\nspeedDown.onclick = function(){\n  if(timeline) timeline.playbackRate -= 0.2\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\nreverse.onclick = function(){\n  if(timeline) timeline.playbackRate = -timeline.playbackRate\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n\npause.onclick = function(){\n  if(timeline) timeline.playbackRate = 0\n  rate.innerHTML = timeline.playbackRate.toFixed(1)\n}\n```\n\n## API\n\n* [constructor({originTime = 0, playbackRate = 1.0})](#constructor)\n\n##### Properties\n\n* [currentTime](#currenttime)\n* [entropy](#entropy)\n* [playbackRate](#playbackRate)\n* **readonly** [globalTime](#globaltime)\n\n##### Methods\n\n* [setTimeout(func, delay)](#settimeout)\n* [setInterval(func, delay)](#setinterval)\n* [clearTimeout(id)](#cleartimeout)\n* [clearInterval(id)](#clearinterval)\n* [fork(options)](#fork)\n* [seekLocalTime(entropy)](#seeklocaltime)\n* [seekGlobalTime(entropy)](#seekglobaltime)\n\n### constructor\n\n**new Timeline({originTime, playbackRate})**\n\nCreate a new timeline. If the **originTime** is set, currentTime is -originTime (see. [currentTime](#currentTime)) and entropy is -originTime (see. [entropy](#entropy)).\n\nIf the **playbackRate** is set to 1.0(by default), the time-lapse rate is normal. And if the playbackRate is set to 2.0, the time-laspe rate should be double. And if the playbackRate is set to -1.0, the time-laspe go backwards.\n\n### properties\n\n#### currentTime\n\nGet or set the currentTime of the timeline according to the lastest playbackRate(see. [playbackRate](#playbackRate)).\n\n```js\nconst timeline = new Timeline({originTime: 500})\n\nlet i = 0\nconst timerID = setInterval(() =\u003e {\n  console.log(Math.round(timeline.currentTime / 100))\n  if(++i \u003e= 10){\n    clearInterval(timerID)\n  }\n}, 100)\n\n//output: -4,-3,-2,-1,0,1,2,3,4,5\n```\n\n#### entropy\n\nBoth currentTime and entropy should be influenced by playbackRate. If current playbackRate is negative, the currentTime should go backwards while the entropy remain to go forwards. Both currentTime and entropy's initial values should be -originTime.\n\n```js\nconst timeline = new Timeline({originTime: 500})\n\nlet i = 0\nconst timerID = setInterval(() =\u003e {\n  console.log([Math.round(timeline.currentTime / 100), Math.round(timeline.entropy / 100)])\n  if(++i \u003e= 10){\n    clearInterval(timerID)\n  }\n}, 100)\n\nsetTimeout(() =\u003e {\n  timeline.playbackRate = -timeline.playbackRate\n}, 500)\n\n//output: -4,-4,-3,-3,-2,-2,-1,-1,0,0,-1,1,-2,2,-3,3,-4,4,-5,5\n```\n\n#### playbackRate\n\nSpeed up or slow down the time-lapse. If playbackRate set to negative the time go backwards.\n\n```js\nconst timeline = new Timeline({playbackRate: -2})\n\nconst startTime = timeline.globalTime\n\ntimeline.setTimeout(() =\u003e {\n  console.log(timeline.currentTime, timeline.globalTime - startTime)\n}, -2000)\n\n//output: -2000, 1000\n```\n\n#### globalTime\n\n**readonly** \n\nReturn performance.now() or fallback to Date.now() if no performance API.\n\n### methods\n\n#### setTimeout\n\nCreate a timer according to timeline.playbackRate.\n\n```js\nconst timeline = new Timeline({playbackRate: 2})\n\nconst startTime = timeline.globalTime\n\ntimeline.setTimeout(() =\u003e {\n  console.log(timeline.currentTime, timeline.globalTime - startTime)\n}, 1000)\n\n//output: 1000, 500\n```\n\n**Note**: If you change the playbackRate before timeout, the timer will be adjust to the new playbackRate. \n\n```js\nconst timeline = new Timeline({playbackRate: 1})\n\nconst startTime = timeline.globalTime\n\ntimeline.setTimeout(() =\u003e {\n  console.log(timeline.currentTime, timeline.globalTime - startTime)\n}, 1000)\n\nsetTimeout(() =\u003e {\n  timeline.playbackRate = 2\n}, 200)\n\n//output: 1000, 600\n```\n\n**set entropy timer**\n\nYou can set timers by entropy.\n\n```js\nconst timeline = new Timeline({playbackRate: 1})\n\nconst startTime = timeline.globalTime\n\ntimeline.setTimeout(() =\u003e {\n  console.log(timeline.currentTime, timeline.globalTime - startTime)\n}, 1000)\n\ntimeline.setTimeout(() =\u003e {\n  console.log(timeline.currentTime, timeline.globalTime - startTime)\n}, {entropy: 1000})\n\nsetTimeout(() =\u003e {\n  timeline.playbackRate = -2\n}, 200)\n\n//output: 200, 200\n//output: -600, 600\n```\n\n#### setInterval\n\nSimilar with setTimeout.\n\n#### clearTimeout\n\nClear the timer according to the corresponding timerID.\n\n```js\nconst timeline = new Timeline({playbackRate: 1})\n\nlet i = 0\nconst timerID = timeline.setInterval(function(){\n  console.log(++i)\n  if(!(i % 10)){\n    timeline.playbackRate ++\n  }\n  if(!(i % 100)){\n    timeline.clearTimeout(timerID)\n  }\n}, 1000)\n```\n\n#### clearInterval\n\nThe  same as clearTimeout\n\n#### fork\n\nFork a new timeline based on current timeline.\n\n```js\nconst baseTimeline = new Timeline()\n\nconst timeline1 = baseTimeline.fork(),\n      timeline2 = baseTimeline.fork({playbackRate: 2})\n\n...\n\nbaseTimeline.playbackRate = 2 // Should speed up all forked timelines.\n```\n\n#### seekLocalTime\n\nSeek localTime by entropy.\n\n#### seekGlobalTime\n\nSeek globalTime by entropy.\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-timeline/lists"}