WIP rough implementation of anchoring and inferred duration for parallel timelines

[nickschot]

proof of concept/experimentation for #172

TODO:

• anchoring (center, end)
• inferred duration from longest known duration in the parallel timeline
• sort motion definitions in parallel timeline by presence of duration (be it implicit like a Spring, or explicit)
• fill behavior (currently inferred durations are "fill")
• sort by duration as well, so longest is 1st and can be used for fill reference
• decide about fill overriding defined durations on MotionDefinitions if they're not the longest animation.
• tests
• do a 2nd (sort) pass after the springs are resolved (if there are multiple) so their durations are known and can be taken into account

Example with the current API

The border animation will take the duration of the Spring movement animation, since that is the longest animation. The background animation keeps it duration as it has a more specific anchor: center set on it's MotionDefinition. It is centered to the middle of the duration of the entire parallel timeline.

{
      timeline: {
        type: 'parallel',
        anchor: 'fill',
        animations: [
          {
            sprites: keptSprites,
            properties: {
              border: {},
            },
            timing: {
              behavior: new TweenBehavior(),
              duration: 100, // TODO: this is currently overwritten if "fill" is specified on the Timeline.
            },
          },
          {
            sprites: keptSprites,
            properties: {
              translateX: {},
              translateY: {},
              width: {},
              height: {},
            },
            timing: {
              behavior: new SpringBehavior(),
            },
          },
          {
            sprites: keptSprites,
            properties: {
              backgroundColor: {},
            },
            timing: {
              behavior: new TweenBehavior(),
              duration: 1000,
              anchor: 'center',
            },
          },
        ],
      },
    }

[nickschot]

Example with video:

Screen.Recording.2023-01-27.at.15.47.45.mov

timeline: {
        type: 'parallel',
        animations: [
          {
            sprites: keptSprites,
            properties: {
              x: {},
              y: {},
              width: {},
              height: {},
            },
            timing: {
              behavior: new TweenBehavior(),
              duration: 2000,
            },
          },
          {
            sprites: keptSprites,
            properties: {
              backgroundColor: {},
            },
            timing: {
              behavior: new TweenBehavior(),
              duration: 300,
              anchor: 'center',
            },
          },
          {
            sprites: keptSprites,
            properties: {
              border: {},
            },
            timing: {
              behavior: new TweenBehavior(),
              anchor: 'fill',
            },
          },
        ],
      }

[backspace]

🎉

[backspace]

I appreciate the clarity of these unit tests 🤩

[lukemelia]

Closing due to inactivity