[web-animations] Is compounding easing functions really useful?

I find it to be pretty hard to predict the result of compounding two non-linear easing functions:

```
new KeyframeEffect(target, [{
	left: 100px
}, {
	left: 200px, easing: "ease"
}, {
	left: 300px
}], {
	duration: 1000, easing: "ease"
})
```

Depending on which keyframe has the non-linear easing, the animation will be played out very differently if the keyframe effect already has a non-linear easing function. I doubt this kind of compound will be wildly used in real world situations, as you have to remember three things to remember the result easing effect: the compounded easing function, the compounding easing function, and the time portion being compounded.

I want to proposal an alternative way of applying easing function to keyframes:

Firstly, easing functions can never be compounded. Keyframes inherit easing functions from the animation effect.

So

```
new KeyframeEffect(target, [{
	left: 100px
}, {
	left: 200px
}, {
	left: 300px
}], {
	duration: 1000, easing: "ease"
})
```

is equivalent to

```
new KeyframeEffect(target, [{
	left: 100px, easing: "ease"
}, {
	left: 200px, easing: "ease"
}, {
	left: 300px, easing: "ease"
}], {
	duration: 1000
})
```

Second, adjacent keyframes using the same easing function have the easing function apply to them as a whole. That means with

```
new KeyframeEffect(target, [{
	left: 100px
}, {
	left: 200px, easing: "ease"
}, {
	left: 300px, easing: "ease"
}], {
	duration: 1000
})
```

There will be no slow down in the third keyframe.

Third, if the slow down effect is desired, use a new attribute like "disjoint: true"

```
new KeyframeEffect(target, [{
	left: 100px
}, {
	left: 200px, easing: "ease"
}, {
	left: 300px, easing: "ease", disjoint: true
}], {
	duration: 1000
})
```

Finally, If you really want to compound easing functions, you should use cubic-bezier().

I think this should behave more intuitively, and it also has the ability of applying continuous easing function to a portion of keyframes, which is currently impossible.

Thoughts?

Received on Thursday, 23 April 2015 04:40:40 UTC