Re: [web-animations] Should default time function be "ease"?

On 2015/02/10 18:47, Glen Huang wrote:
> Both css transition and css animations use “ease” as the default timing function. Why web-animations use “linear” instead?
>

Hi Glen,

Thanks for your mail. I like the idea of aligning better with CSS 
however there is a slight difference in the way Web Animations and CSS 
work in this area.

For CSS, the animation-timing-function is always applied between each 
pair of keyframes. As a result, the following animation will slow-down 
in the middle.

   animation: fade-out 3s;

   @keyframes fade-out {
     from { opacity: 1; }
     50%  { opacity: 0.5; }
     100% { opacity: 0; }
   }

The (default) "ease" timing function is applied to each segment 
individually.

In Web Animations, however, the following will behave differently.

   elem.animate(
     [ { opacity: 1 },
       { opacity: 0.5 },
       { opacity: 0 } ],
     { duration: 3000,
       easing: 'ease' });

In this case the easing is applied across the whole 3s so there is no 
slow-down in the middle. The equivalent to the CSS animation above would be:

   elem.animate(
     [ { opacity: 1, easing: 'ease' },
       { opacity: 0.5, easing: 'ease' },
       { opacity: 0 } ], 3000);

We could make 'ease' the default for *either* individual keyframes or 
for the effect as a whole.

1) If we make Keyframe.easing default to "ease" then to ease the effect 
as a whole it would be necessary to set the easing on each keyframe to 
"linear" to avoid easing twice.

2) If we make AnimationTimingProperties.easing default to "ease" then it 
be necessary to set the easing on the animation to "linear" in order to 
do per-keyframe easing. Also, when we introduce groups we would not want 
them to use "ease" so we would need to add an "auto" keyword that uses 
"linear" for groups.

(2) seems better than (1) but still a little complicated. What do you think?

Best regards,

Brian

Received on Thursday, 12 February 2015 01:03:14 UTC