- From: Brian Birtles <bbirtles@mozilla.com>
- Date: Tue, 15 Jan 2013 16:24:55 +0900
- To: "public-fx@w3.org" <public-fx@w3.org>
Web animations minutes, 14 / 15 January 2013 Etherpad: https://etherpad.mozilla.org/ep/pad/view/ro.ZifIQh4$Cm5/latest Present: Tab Atkins, Steve Block, Shane Stephens, Douglas Stockwell, Brian Birtles Agenda: 1. Status update 2. New time for meetings 3. Spring timing function 4. Interface options: reworking time sources 5. Interface options: with or without Timing object 6. Extensions to Document and Element interfaces 7. targetElement 1. STATUS UPDATE ================ Brian: - spring timing function fiddle: http://jsfiddle.net/CZ3Kn/11/ Shane: - timing approach document - spring timing functions - more length support in polyfill (all units now supported) Doug: - rect, font-weight, integer support in polyfill Steve: - TimeSources in polyfill 2. NEW TIME FOR MEETINGS ======================== The next three meetings are as follows: Thurs Jan 17, 17:30 PST / Fri 18 Jan 12:30 AEDST / Fri 18 Jan 10:30 JST Tues Jan 22, 16:00 PST / Wed 23 Jan 11:00 AEDST / Wed 23 Jan 9:00 JST Thurs Jan 24, 17:30 PST / Fri 25 Jan 12:30 AEDST / Fri 25 Jan 10:30 JST Following that: Week of 28 Jan: no meetings Week of 4 Feb: SVG F2F + CSS F2F, no Web Animations meetings Week of 11 Feb: Web Animations F2F -- decide meeting time going forward 3. SPRING TIMING FUNCTION ======================== Discussed spring timing functions. Brian prefers a parameterisation in terms of an overshoot parameter plus perhaps one more: elasticity? http://jsfiddle.net/CZ3Kn/11/ Shane: by "elasticity" you mean the number of bounces? Brian: Not really sure. Perhaps more the amount of time it takes to settle. Sydney team to investigate reparamterisation of physical spring systems in these terms. 4. INTERFACE OPTIONS: REWORKING TIME SOURCES ============================================= Deferred until Friday Possible APIs to investigate as data points: QML, raphael, CA, JQuery, android, DirectAnimation, WPF, d3, mathBox (http://acko.net/blog/making-mathbox/), HTML > Tab to check what Hixie thinks about the HTML MediaController API. Is it a pattern we should avoid or is it ok? 5. INTERFACE OPTIONS: WITH OR WITHOUT Timing OBJECT ================================================= Deferred until Friday 6. EXTENSIONS TO Document AND Element INTERFACES ============================================== (Brian) I've added Element.animate but I wonder if we need other extensions to get the animations produced by content. Use cases: a) Provide debugging timeline of all active (i.e. running or scheduled to run in the future) animations We could address this in two stages. Version 1: Document.getActiveAnimations() -- gets the list of active animations and you just have to keep polling > DO IT! Version 2: A mutation observer-like API that lets you know when new animations are added / removed > Shane to get input on event mechanism in specification b) Remove all animations on an element before serializing Element.getActiveAnimations() -- returns a non-live sequence (array) of animations on the element so you can cycle over them and call cancel on them all > DO IT! c) Make sure all animations on an element are complete before removing it from the DOM e.g. you might be doing an opacity fade and shrink transform on a UI widget to indicate it is disappearing and you want to be sure both have finished before removing it. In fact, you might have any number of CSS transitions / animations defined on the item and you want to be sure they're all finished. You can register for animationend / transitionend events but how do you know when they're all done. getActiveAnimations() would let you do this as follows: elem.onanimationend = function(evt) { if (evt.target.getActiveAnimations().length === 0) { evt.target.parentNode.removeChild(evt.target); } }; I'm struggling to think of a real-world use case where you would want to trigger an animation with CSS and then get at the *specific* Animation object it generated and modify it. I'm sure they exist, but none come to mind just yet. Shane: Polyfilling advanced timing functions, etc. before CSS engines have caught up? Brian: Maybe a repeating animation that causes the text, "Bid now" to glow and swell. You want to define it using CSS to save programming, but then as the auction draws near to an end, rather than setting another style, just use script to find the animation and set the playbackRate to 2. Doing so would avoid jumps but there's not much other advantage of using script to do this--it could be done just by exposing animation-playback-rate to CSS and setting a class. So, still not really compelling use cases for getting a specific animation back. Should we add: Document.getActiveAnimations(), and Element.getActiveAnimations() for now? > Yes, sounds good. Need to think about whether or not 'active' is the most appropriate term. Agreed that in most use cases you probably want not only animations that are currently running (i.e. current time falls inside in the active interval) but also those scheduled to run in the future. 7. targetElement ============ (Brian) Previously we talked about the possibility of either making clone() take a list of target elements or alternatively allowing Animations to refer to a list of target elements. There seemed to be a preference for the latter? If that's the case I think we could do the following: v1: * Rename targetElement to simply 'target' * Add a note that AnimationTarget may represent other types in the future so content should test the type of arbitrary targets before using (When you're explicitly creating the Animations yourself, obviously you don't need to test the type) v2: * Extend the AnimationTarget typedef to by a union such as: (Element or PseudoElement or sequence<Element>) v3: * Introduce a live list of nodes that matches a selector as a target type? Maybe this will be already defined elsewhere in the Web platform by then? Or maybe if you want to do that you should just use CSS? Thoughts? > DO IT Also discussed how the Animation would behave when targetting a list of elements. If you add an element to the list whilst the animation is running does it start from the beginning or catch up? > Agreed it catches up. Everything is in strict synchronisation. If you want the behaviour where it starts from the beginning you need a different mechanism like CSS. Next meeting: Thurs Jan 17, 17:30 PST / Fri 18 Jan 12:30 AEDST / Fri 18 Jan 10:30 JST @ https://etherpad.mozilla.org/XMPWaj6Ks9 Past meetings: http://www.w3.org/Graphics/fx/wiki/Web_Animations/Meetings
Received on Tuesday, 15 January 2013 07:25:23 UTC