[web-animations] Web Animations minutes, 15 / 16 Aug 2013

Web Animations minutes, 15 / 16 Aug 2013

Present: Doug, Shane, Brian, Steve
Etherpad: https://etherpad.mozilla.org/ep/pad/view/ro.oKI$3v12NpS/latest

Agenda:

1. Status updates
2. Discrete animation
3. Path Animations
4. Animating 'class'


1. STATUS UPDATES
=================

Brian:
  * Renamed the following members of the Timing interface and 
TimingInput dictionary:
    * iterationDuration → duration
    * startDelay → delay
    * fillMode → fill
    * iterationCount → iterations
    * timingFunction → easing
  * Introduced an auto value for FillMode and made it the default value 
for fill on TimingInput.
  * Added wording to say that not all timing functions can be used with 
all types of timed items (e.g. paced timing functions)
  * Incorporated timing function syntax directly into Web Animations in 
preparation for merging chained timing functions
  * Working on timing function chains. Yet to be landed.

Sydney team:
  * Polyfill work
    * Removal of players after they've completed
    * bug fixes
    * Caching property-specific keyframes in polyfill
  * Some discussion / thinking about timing functions on groups

Doug:
  * Working on CSS Animations applying before !important, snapshotting 
after in Blink


2. PER-FRAME EASING
===================

Background:
* We need to support 'discrete' animation for doing things like:
    color: [red, yellow, green];
  and
    { color: red, offset: 0.3 }, { color: yellow, offset: 0.7 }, { 
color: green, offset: 1 }
  (The so-called "Traffic Light Use Case")

* We currently are working on chained timing functions that let you do
     easing: "ease-in ease-out linear" etc.
   There's a parallel array of positions saying how those functions get 
distributed in time.
   If that parallel array is not provided we synthesise one using the 
keyframe offsets if we're attached to an animation with a keyframe 
effect, otherwise we just auto-space (I guess)

The trouble with doing discrete animation is I want to be able to do:

a) easing: cubic-bezier(....) -> Eases the whole effect, i.e. across all 
keyframes

but also:

b) easing: step-end -> Applies to each keyframe individually so I can do 
traffic lights

(Note that using step timing functions doesn't meet the traffic light 
use case since they produce evenly spaced steps but the keyframes might 
not be evenly spaced.)

This is really an API question. The model allows both. For (a) you just 
specify the one function. For (b) you just repeat step-end, once for 
each keyframe.

But from the API point-of-view, it would be really really nice if you 
didn't have to repeatedly specify the same timing function.

CSS "solves" this by always just doing (b). You can specify the timing 
function once and it gets inherited by all keyframes (which can then 
override it).

SVG solves this by separating timing functions from calc modes. So you 
can do (b) using calcMode="discrete".

(Note that neither in CSS or SVG actually let you apply a timing 
function across the whole animation or switch timing functions at points 
other than keyframe boundaries (with the exception of keyPoints for 
motion on a path in SVG). How much do we need this?)

I'm not sure how to address this from our API. How, can we cover (a) and 
(b). Some options:

i) Exploit list-length matching semantics. i.e. if I say "step-end 
step-end" then I'm using a chained timing function and in that case if 
there are not enough items in the list just repeat the last one to fill. 
This means if you write:
   easing: "step-end step-end"
  You get discrete timing. Although it's not very nice.
ii) Use notation to represent when we're using a list, e.g. easing: 
chain(step-end)
iii) Separate chains out into a separate property
iv) Maintain only per-keyframe timing on Animations, and relegate use 
case (a) to timing functions on TimingGroups.
v) Special syntax for a step timing function that aligns perfectly with 
the keyframes,
e.g. step-offsets, step-auto, step-matched, discrete

Discussion centred around three points:
* (v) seems the most attractive option. Not sure how it would interact 
with chained timing functions since they are both trying to do magic 
based on the attached keyframe effect.
* Why did we get rid of timing functions on keyframes? (Answer: because 
we wanted them to be part of the timing model not the animation model 
and because putting them on keyframes can lead to odd behaviour like 
illustrated below.)
* If we had timing functions on keyframes would we need keyframe 
animations at all?

Here is the CSS case that is a bit surprising:

@keyframes abc {
     0% {
         top: 100px;
         left: 100px;
         timing-function: ease;
     }
     33% {
         top: 200px;
         timing-function: ease;
     }
     66% {
         left: 300px;
         timing-function: ease;
     }
     100% {
         top: 400px;
         left: 400px;
         timing-function: ease;
     }
}

We agreed that we should think about this :)


3. PATH ANIMATIONS
==================

As currently specced, Path Animations create transform values that mix 
in order into the transform composition list. The transform value 
created by a Path Animation is always a translation defined entirely by 
the path, followed by a rotation value.

So for example, a path that starts at (100, 50) will always create a 
transform with a translation component that is (100, 50) at the start of 
the path. The Rotation always applies after the translation, and is a 
rotation about (0, 0).

SVG animateMotion works quite differently. One difference is that the 
rotation seems to apply before the translation. Another is that 
animateMotion applies out-of-order to the CTM.

We're going to need to reconcile these :)

In SVG, if you have an element that is being influenced by animateMotion 
_and_ has a non-zero x and y position, then the x and y position has to 
be applied as if it were a translate(x, y) _after_ the effect of the 
animateMotion.

In CSS, all transforms always apply relative to the laid out position. 
You can never apply any positional changes on top of a transform.


4. ANIMATING 'CLASS'
====================

I think we need to support this use case:

   <set attributeName="class" to="active" begin="2s" dur="3s"/>

(SVG does this using className.animVal)

When you do this:
* Do .active rules that trigger an animation start within the same 
sample? Does this matter?
* Does this mean we have to apply attribute animations first?

Can we make this additive? i.e. additive="sum" means classList.add()

-> How to use a declarative animation to remove a class? i.e. subtraction?

Agreed that while useful, subtractive animation for classes case could 
probably wait until a later version.

What does this mean:
new Animation(target, [{class: 'foo'}, {class: 'bar', composite: 
'add'}], 1);
Steps at 50%?


Next meeting: Thurs Aug 22 18:00 PDT / Fri 23 Aug 11:00 AEST / Fri 23 
Aug 10:00 JST @ https://etherpad.mozilla.org/NyaQY8jIYb

Past meetings: http://www.w3.org/Graphics/fx/wiki/Web_Animations/Meetings

Received on Friday, 16 August 2013 05:16:40 UTC