[web-animations-2] Allow keyframe to specify multiple offsets

[birtles]

From @notoriousb1t on July 21, 2016 14:21

As an analog to CSS keyframes, I think offset should be able to be expressed as array of offsets that indicate the keyframe should be repeated at each of those offsets. Take the following example from animate.css:

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
     animation: shake 1000ms;
}

It would be compact and easy to understand to be able to code:

element.animate([
    { offset: [0, 1], transform: 'translate3d(0, 0, 0)' },
    { offset: [.1, .3, .5, .7, .9], transform: 'translate3d(-10px, 0, 0)' },
    { offset: [.2, .4, .6, .8], transform: 'translate3d(10px, 0, 0)' }
], { duration: 1000 });

And the behavior would be the same as

element.animate([
    { offset: 0, transform: 'translate3d(0, 0, 0)' },
    { offset: .1, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .2, transform: 'translate3d(10px, 0, 0)' },
    { offset: .3, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .4, transform: 'translate3d(10px, 0, 0)' },
    { offset: .5, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .6, transform: 'translate3d(10px, 0, 0)' },
    { offset: .7, transform: 'translate3d(-10px, 0, 0)' },
    { offset: .8, transform: 'translate3d(10px, 0, 0)' },
    { offset: .9, transform: 'translate3d(-10px, 0, 0)' },
    { offset: 1, transform: 'translate3d(0, 0, 0)' }
], { duration: 1000 })

That would allow the keyframes to be reused, and I think it would improve livability of code.

Copied from original issue: w3c/web-animations#159

[birtles]

Discussed this with @shans and we agree this is a reasonable request but it will take some care to spec/implement since we'd need to consider how it interacts with the check that keyframes are loosely sorted by offset. In particular, how would this mix with keyframes that doesn't supply an offset?

We will look into this as part of level 2.

[birtles]

From @notoriousb1t on November 11, 2016 3:46

I haven't figured that out yet. In Just Animate, I implemented this feature, but I haven't gotten it to work unless all keyframes have offsets specified.

http://codepen.io/notoriousb1t/pen/0a7f8478e7e7172ac9d5122bf01a5861?editors=0010

just.animate({
   targets: '.box',
   to: '1.6s',
   css: [
      { 
         y: '200px', 
         offset: .5 
      },
      { 
         y: 0, 
         offset: [0, 1] 
      }
   ],
   iterations: Infinity,
   easing: 'ease'
});

In that example, removing the offset of .5 completely breaks it. Here is my (naive) approach that doesn't requires them to be specified for all if offset arrays are used

/**
 * copies keyframs with an offset array to separate keyframes
 * 
 * @export
 * @param {waapi.IKeyframe[]} keyframes
 */
export function expandOffsets(keyframes: ja.ICssKeyframeOptions[]): void {
    const len = keyframes.length;
    for (let i = len - 1; i > -1; --i) {
        const keyframe = keyframes[i];

        if (!isArray(keyframe.offset)) {
            continue;
        }

        keyframes.splice(i, 1);

        const offsets = keyframe.offset as number[];
        const offsetLen = offsets.length;

        for (let j = 0; j < offsetLen; j++) {
            const newKeyframe = deepCopyObject(keyframe);
            newKeyframe.offset = offsets[j];
            keyframes.splice(i, 0, newKeyframe);
        }
    }

    // resort by offset    
    keyframes.sort(keyframeOffsetComparer);
}

I do have an idea on how it could be distributed that would make sense most of the time.

• copy/move offset 0 into index 0 if it exists
• copy/move offset 1 into index length-1 if it exists
• assign index 0 to offset 0
• assign index length-1 to offset 1
• copy remaining offset arrays next to each other in order
• the remaining offsets are subdivided evenly between the known offsets
• then the keyframes are sorted by offset ascending

So:

element.animate({
    keyframes: [
        { opacity: 0  },
        { opacity: 1, offset: [1, .6, .3, 0] },
        { opacity: 0  }
    ]
});

turns into

element.animate({
    keyframes: [
        { opacity: 1, offset: 0  },
        { opacity: 0, offset: .15 },
        { opacity: 1, offset: .3 },
        { opacity: 1, offset: .6 },
        { opacity: 0, offset: .8  },
        { opacity: 1, offset: 1  },
    ]
});

That is kind of what I think would work if trying to respect the intent of loosely timed keyframes.

[birtles]

From @Martin-Pitt on November 22, 2017 17:21

I feel like as if array-based offsets are quite explicit that they should be skipped and merged later in via a second pass. Rather than trying to figure out a complex algorithm that would weave them in-between implicit keyframes.

Kinda like how in css a position: relative/absolute element is rendered after all the position: static elements.

So, given an original keyframe list of:

var input = [
        { opacity: 1, offset: [.2, .4, .6, 1] },
        { opacity: .2, offset: [.3, .7] },
        { opacity: 0  },
        { opacity: .5  },
        { opacity: 0  }
];

We'd compute following keyframes: (picking up all the non-array and implicit keyframes)

var first = [
        { opacity: 0, offset: 0 },
        { opacity: .5, offset: .5 },
        { opacity: 0, offset: 1 }
];

Generate the keyframes of the array-based offsets:

var second = [
        { opacity: 1, offset: .2 },
        { opacity: .2, offset: .3 },
        { opacity: 1, offset: .4 },
        { opacity: 1, offset: .6 },
        { opacity: .2, offset: .7 },
        { opacity: 1, offset: 1 }
];

Then merge the two arrays to get the following computed keyframes:

var computed = [
        { opacity: 0, offset: 0 },
        { opacity: 1, offset: .2 },
        { opacity: .2, offset: .3 },
        { opacity: 1, offset: .4 },
        { opacity: .5, offset: .5 },
        { opacity: 1, offset: .6 },
        { opacity: .2, offset: .7 },
        { opacity: 1, offset: 1 }
];

This seems more mechanically easier to reason about in my opinion, but I'd like to hear your thoughts?