sprite-timeline

Custom timelines for manipulate sprite animation.

Showing:

Popularity

Downloads/wk

324

GitHub Stars

103

Maintenance

Last Commit

7mos ago

Contributors

3

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

Sprite Timeline

npm status build status dependency status Maintainability Test Coverage

Custom timelines for manipulate sprite animation.

Installation

npm install sprite-timeline

Usage

in browser

<script src="https://s3.ssl.qhres.com/!670d1b37/sprite-timeline.min.js"></script>

Demos

DEMO 1

const T = 2000
let timeline

requestAnimationFrame(function update() {
  if(!timeline) timeline = new Timeline()
  const rotation = 360 * timeline.currentTime / T
  ball.style.transform = `rotate(${rotation}deg)`
  requestAnimationFrame(update)
})

speedUp.onclick = function(){
  if(timeline) timeline.playbackRate += 0.2
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

speedDown.onclick = function(){
  if(timeline) timeline.playbackRate -= 0.2
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

reverse.onclick = function(){
  if(timeline) timeline.playbackRate = -timeline.playbackRate
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

pause.onclick = function(){
  if(timeline) timeline.playbackRate = 0
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

DEMO 2

const T = 2000
let timeline = new Timeline()

timeline.setInterval(function update() {
  ball.innerHTML = Math.round(timeline.currentTime / 100)
  if(timeline.playbackRate < 0){
    ball.style.backgroundColor = 'green'
  } else {
    ball.style.backgroundColor = 'red'
  }
}, {entropy: 100})

speedUp.onclick = function(){
  if(timeline) timeline.playbackRate += 0.2
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

speedDown.onclick = function(){
  if(timeline) timeline.playbackRate -= 0.2
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

reverse.onclick = function(){
  if(timeline) timeline.playbackRate = -timeline.playbackRate
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

pause.onclick = function(){
  if(timeline) timeline.playbackRate = 0
  rate.innerHTML = timeline.playbackRate.toFixed(1)
}

API

Properties
Methods

constructor

new Timeline({originTime, playbackRate})

Create a new timeline. If the originTime is set, currentTime is -originTime (see. currentTime) and entropy is -originTime (see. entropy).

If 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.

properties

currentTime

Get or set the currentTime of the timeline according to the lastest playbackRate(see. playbackRate).

const timeline = new Timeline({originTime: 500})

let i = 0
const timerID = setInterval(() => {
  console.log(Math.round(timeline.currentTime / 100))
  if(++i >= 10){
    clearInterval(timerID)
  }
}, 100)

//output: -4,-3,-2,-1,0,1,2,3,4,5

entropy

Both 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.

const timeline = new Timeline({originTime: 500})

let i = 0
const timerID = setInterval(() => {
  console.log([Math.round(timeline.currentTime / 100), Math.round(timeline.entropy / 100)])
  if(++i >= 10){
    clearInterval(timerID)
  }
}, 100)

setTimeout(() => {
  timeline.playbackRate = -timeline.playbackRate
}, 500)

//output: -4,-4,-3,-3,-2,-2,-1,-1,0,0,-1,1,-2,2,-3,3,-4,4,-5,5

playbackRate

Speed up or slow down the time-lapse. If playbackRate set to negative the time go backwards.

const timeline = new Timeline({playbackRate: -2})

const startTime = timeline.globalTime

timeline.setTimeout(() => {
  console.log(timeline.currentTime, timeline.globalTime - startTime)
}, -2000)

//output: -2000, 1000

globalTime

readonly

Return performance.now() or fallback to Date.now() if no performance API.

methods

setTimeout

Create a timer according to timeline.playbackRate.

const timeline = new Timeline({playbackRate: 2})

const startTime = timeline.globalTime

timeline.setTimeout(() => {
  console.log(timeline.currentTime, timeline.globalTime - startTime)
}, 1000)

//output: 1000, 500

Note: If you change the playbackRate before timeout, the timer will be adjust to the new playbackRate.

const timeline = new Timeline({playbackRate: 1})

const startTime = timeline.globalTime

timeline.setTimeout(() => {
  console.log(timeline.currentTime, timeline.globalTime - startTime)
}, 1000)

setTimeout(() => {
  timeline.playbackRate = 2
}, 200)

//output: 1000, 600

set entropy timer

You can set timers by entropy.

const timeline = new Timeline({playbackRate: 1})

const startTime = timeline.globalTime

timeline.setTimeout(() => {
  console.log(timeline.currentTime, timeline.globalTime - startTime)
}, 1000)

timeline.setTimeout(() => {
  console.log(timeline.currentTime, timeline.globalTime - startTime)
}, {entropy: 1000})

setTimeout(() => {
  timeline.playbackRate = -2
}, 200)

//output: 200, 200
//output: -600, 600

setInterval

Similar with setTimeout.

clearTimeout

Clear the timer according to the corresponding timerID.

const timeline = new Timeline({playbackRate: 1})

let i = 0
const timerID = timeline.setInterval(function(){
  console.log(++i)
  if(!(i % 10)){
    timeline.playbackRate ++
  }
  if(!(i % 100)){
    timeline.clearTimeout(timerID)
  }
}, 1000)

clearInterval

The same as clearTimeout

fork

Fork a new timeline based on current timeline.

const baseTimeline = new Timeline()

const timeline1 = baseTimeline.fork(),
      timeline2 = baseTimeline.fork({playbackRate: 2})

...

baseTimeline.playbackRate = 2 // Should speed up all forked timelines.

seekLocalTime

Seek localTime by entropy.

seekGlobalTime

Seek globalTime by entropy.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

gst
gantt-schedule-timeline-calendarGantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]
User RatingN/A
Top Feedback
2Highly Customizable
1Easy to Use
GitHub Stars
1K
Weekly Downloads
627
frappe-ganttOpen Source Javascript Gantt
User Rating
4.7/ 5
3
Top Feedback
2Great Documentation
1Easy to Use
1Highly Customizable
GitHub Stars
3K
Weekly Downloads
7K
chr
chronolinechronoline.js is a library for making a chronology timeline out of events on a horizontal timescale.
User RatingN/A
Top Feedback
N/A
GitHub Stars
589
Weekly Downloads
1
the
theatrejsMotion design editor for the web
User RatingN/A
Top Feedback
N/A
GitHub Stars
5K
Weekly Downloads
7
aframe-animation-timeline-component:package: A super collection of A-Frame components.
User Rating
4.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Performant
GitHub Stars
1K
Weekly Downloads
114
See 13 Alternatives

Tutorials

No tutorials found
Add a tutorial