- From: Brian Birtles <bbirtles@mozilla.com>
- Date: Fri, 16 Aug 2013 14:16:09 +0900
- To: "public-fx@w3.org" <public-fx@w3.org>
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