tweenjs / tween.js

JavaScript/TypeScript animation engine
https://tweenjs.github.io/tween.js/
Other
9.81k stars 1.41k forks source link

`Timeline` feature #647

Open trusktr opened 1 year ago

trusktr commented 1 year ago

The Tween class is doing a lot. Maybe it is starting to grow out of scope for what a Tween is. For example, we can chain, yoyo, repeat tweens, etc. Maybe it would be better to have a cleaner separation of concerns and introduce a new Timeline class (maybe convert Group with Timeline) that would be generally more robust for this.

What could this Timeline API looks like? How would Tween play with Timeline? Perhaps Tweens are added to Timelines.

This comment has some ideas: https://github.com/tweenjs/tween.js/issues/560#issuecomment-752838191

Food for thought:

const track1 = new Sequence([
  new Empty(300),
  new Tween(mesh.rotation).to(..., 1000),
  new Tween(mesh.position).delay(500).to(..., 1000),
])

const track2 = new Tween(otherThing).to(2000)

const timeline = new Timeline([ // parallel
  // tracks for the timeline
  track1,
  track2
])

const anim = new Animation([timeline]).start() // start/stop/repeat/etc similar to current Tween perhaps

requestAnimationFrame(function loop() {
  anim.update()
  requestAnimationFrame(loop)
})

const timeline2 = new Timeline([
  timeline, // this timeline
  new Tween(...).to(...), // will play in parallel to this tween
])

const anim2 = new Animation([timeline2])

// etc
cuixiping commented 10 months ago

Group and .chain() can be enhanced to cover the cases. Group should have all methods of tween instance. .chain() should can be chained more times.