Web Animations, minutes 14 / 15 August 2012

Web Animations, minutes 14 / 15 August 2012

Etherpad: https://etherpad.mozilla.org/IW8zT9yCin
Present: Dmitry Baranovskiy, Alex Danilo, Shane Stephens, Brian Birtles

Agenda:
1. Status update
2. Tidying up the Timing/TimedItem interface
3. Pause behaviour
4. Suggestions from public-fx, www-style
5. Group templates
6. More thoughts on templates
7. Constructors for Anim etc.

1. STATUS UPDATE
================

Dmitry:
  - Sequence group and delay diagram
Brian
  - Template / liveness changes
  - Ctors for Anim etc.
Shane
  - Emulator work, playing around with "resolutionStrategy" for group 
templates

2. TIDYING UP THE Timing/TimedItem INTERFACE
============================================

I (Brian) think some renaming might be in order.

In general:

duration -> dur
animation -> anim
function -> func

e.g. AnimFunction -> AnimFunc
iterationDuration -> iterationDur

Shane, Alex: Ok
Dmitry: I don't care

Also to align with HTMLMediaElement::

speed -> playbackRate

Shane, Alex: Ok
Dmitry: I'm fine [with that]

Current pause methods:
pause()
unpause()
getPauseState()
isPaused()

Replace with:
   attribute boolean pauseState;
   readonly attribute boolean paused; // takes into account parents' 
pause state
   pause(); // Sets pauseState to true -- for compatibility with 
HTMLMediaElement

Shane: what about localPauseState? Need to differentiate more between 
paused and pauseState.
Brian: too long!
Alex: OK, makes sense

pause() ► play()?

What about play()?
   In HTMLMediaElement, play() unpauses if paused. If it has finished, 
it also does a seek, but if it's playing it does nothing... I think
   http://dev.w3.org/html5/spec/media-elements.html#dom-media-play

Shane: Can we do something like play(boolean seekToStartIfFinished=true)?
Dmitry: No way! No boolean attributes please.
Brian: Let's make play always seek if finished (like HTMLMediaElement) 
and if you don't want that then just change localPauseState.

Alternatives to localPauseState:

Brian: itemPaused, localPause ?!
Shane, Alex: locallyPaused

 > Go with locallyPaused for now and add an issue

Another alternative

    attribute boolean paused;
    readonly attribute boolean effectivelyPaused; ?? notMoving?? 
asGoodAsPaused ?? aintGonnaPlay ??

Ok, maybe not.

Rename:
   iterationDuration -> duration // matches HTMLMediaElement / CSS / SVG
Shane: NOOOOOO
   iterationTime -> currentTime // matches HTMLMediaElement
Shane: NOOOOOO
       // currentTime is writeable in HTMLMediaElement ... make it 
writeable??
   itemTime -> ??
   itemDuration -> ??

Crazy idea:
   -- consistently named, match core concepts
   iterationDuration / iterationTime
   itemDuration / itemTime
   animDuration / animTime (maybe don't worry about these)

   -- aliases for "consistency"
   currentTime (=iterationTime)
   duration (=iterationDuration)

Other options

   time.iteration
   time.anim
   time.item
   dur.iteration
   dur.anim
   dur.item

Or

   timing.iteration.time
   timing.iteration.dur
   timing.iteration.index
   timing.anim.time
   timing.anim.dur
   timing.item.time
   timing.item.dur

Dmitry, Shane, Alex: we like this a lot

Need to rename timing to something else though since we already have a 
timing property.

Dmitry: s/timing/realtime/ s/timing/current/?
s/timing/now/ ?
s/timing/officiallyDesignedByCommittee_TM_/

 > Brian to decide

3. PAUSE BEHAVIOUR
==================

If you pause an animation 25% of  the way through, then extend the 
startDelay, do you expect the paused  animation to jump to, e.g. 10% of 
  the way through? Or stay fixed at  25%?

 > Answer is: 10%, i.e. pausing, in effect, remembers the item time, not 
the animation time.

Shane: In future, we can provide a version that remembers the animation time

4. SUGGESTIONS FROM public-fx, www-style
========================================

* François REMY in particular has been very helpful in discussing 
integration with media.
(See thread starting here: 
http://lists.w3.org/Archives/Public/public-fx/2012JulSep/0006.html )
Some suggestions:
  - Liveness  proposal A from last time
 > Already adopted

  - Factor out a common TimeSource interface that MediaElements could 
implement as well as TimedItem. I haven't really looked into it too much.
 > Needs more thought

   - Renaming some of our properties to line up with MediaElements would 
help here (e.g. speed -> playbackRate)
 > Already agreed to this

- Also possibly reworking timelineStart to follow the autoplay mechanism
 > Needs more thought.

- Rather than making the effects timeline not seekable, make it a 
property of all groups that they can be seekable / not-seekable.
Shane: thinks this is worse for web devs (harder to reason about) and 
worse for implementors (harder to optimise)

   - I would prefer if the “animate” and “animateLive” functions were 
called “createInstance(s)” and “createLinkedInstance(s)”
 > No longer relevant in light of changes made to templates / liveness

- Rename “animate*WithParent(el,group)” in to 
“create*Instance(s)InGroup(el,group)”
 > No longer relevant once we redo AnimGroupTemplate?

- There are some comments about sorting within the global animation 
stack that I (Brian) suggested Shane could follow up on

*   Julien Dorra has proposed a :time pseudo class originally for lining 
   things up with media items but is probably more generally applicable
See thread: http://lists.w3.org/Archives/Public/www-style/2012Jul/0703.html
and http://lists.w3.org/Archives/Public/www-style/2012Aug/0079.html

e.g.
div.welcome:time(3000) {
    display: none;
}

(Probably want to use seconds instead of milliseconds however)

I   suggest the time could be interpreted based on the time space of the 
   target element. e.g. if the div was a child of a <par> group the 
3000 would be taken as being in the time space of the <par> group.

That would be one avenue for putting CSS animations inside time containers?

e.g.

<par>
    <div class="welcome">
</par>

div.welcome:time(3) {
     animation: ...
}

?

Not sure how that works for <seq> containers however where the start 
time is ignored.

If you define <video> etc. as establishing their own time space   (i.e. 
make them "animation groups", so to speak) then you can sync with   video.

You can also do this:

<video id="video">
   <animate begin="3s" dur="2s" attributeName="filter" ...></animate>
</video>

 > General sentiment that this looks interesting

*   There was also a suggestions somewhere about making the result of 
animate(document.querySelectorAll(".zombie")) live--i.e. as new 
elements  get added with that class, spawning animations to them.

AI: Shane will look into whether this is currently the "more natural" 
result anyway.

5. GROUP TEMPLATES
==================

Shane showed some good ideas about how group templates might make use of 
a selection strategy for items to target different children of the group.

Below, is just some thinking out-loud about how it might map to SVG.

<svg>
  <g>
   <g class="foo">
    <rect/>
    <rect/>
   <g>
    <circle/>
   </g>
   <g>
    <circle/>
   </g>
  </g>
  <defs>
  <par select=".foo" id="complex-anim">
    <animate select="rect:nth-child(2)" ... />
    <par select="g">
     <animate select="circle" ... />
     <animate ... />
    </par>
   </par>
  </defs>
</svg>

Some discussion about what the default scoping was for <par 
select=".foo"> and it seems to be agreed it would be that of the parent 
element.

AI: Shane to specify this and add as an issue Brian's suggestion of 
attaching the resolutionStrategy to the group rather than the element.

6. MORE THOUGHTS ON TEMPLATES
=============================

interface Anim {
     readonly attribute Timing timing;
     attribute AnimFunc animFunc;
}

Thinking of making timing writeable. Should it also be shareable? We 
*can* define it so that setting it automatically makes a copy. SVG does 
that a lot so it's not unusual. Or we can make it shareable.

Likewise for AnimFunc. One difference here is that if we allow AnimFunc 
to potentially be user-defined, we are kind of forced into allowing 
sharing??

Update: I've (Brian) made Anim.func writeable and shareable as well as 
Anim.template. I'll make Anim.timing writeable and shareable soon too I 
expect.

7. CONSTRUCTORS ON Anim etc.
============================

See changes to spec.

Currently looking at an interface like so:

   var anim = new Anim(elem, { dur: 3, height: '100px' })

Shane:
   //also allow
   var anim = new Anim(elem, new Timing(...));

Brian: We already support,
   var anim = new Anim(elem, { timing: new Timing(...), animFunc: new 
KeyframesAnimFunc(...) } )
   var anim = new Anim(elem, { dur: 3, animFunc: new 
KeyframesAnimFunc(...) })
                  = new Anim(elem, { dur: 3, height: '100px', width: 
'200px' })

Shane: used to have it that:
   animate - bag o' properties
   constructor - pre-built objects
This isn't more complicated

Sent mail to public-script-coord about supporting this:
http://lists.w3.org/Archives/Public/public-script-coord/2012JulSep/0100.html

 > Need to revisit this next time

Next meeting: 21 Aug 18:20 PDT / 22 Aug 11:20 AEST / 22 Aug 10:20 JST @ 
https://etherpad.mozilla.org/IFCnsPoRSr

Received on Wednesday, 15 August 2012 07:54:50 UTC