Re: [csswg-drafts] [web-animations-2] Allow keyframe to specify multiple offsets

_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

``` js
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

``` ts


/**
 * 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:

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

turns into 

``` js
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.


-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2060#issuecomment-349193681 using your GitHub account

Received on Tuesday, 5 December 2017 04:41:31 UTC