npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sprite-timeline

v1.10.2

Published

Custom timelines for manipulate sprite animation.

Downloads

2,146

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