drafts: changeset 8380:ae77d6a3ead3

[css-transitions] Note editing that needs to be done, and add reversing demo used for making decision.

     1.1 --- a/css-transitions/Overview.html	Sat Jun 08 00:22:16 2013 +0900
     1.2 +++ b/css-transitions/Overview.html	Sat Jun 08 11:18:20 2013 +0900
     1.3 @@ -10,7 +10,7 @@
     1.4     rel=dcterms.rights>
     1.5    <meta content="CSS Transitions" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-06-04 name=dcterms.date>
     1.8 +  <meta content=2013-06-08 name=dcterms.date>
     1.9    <meta content="L. David Baron" name=dcterms.creator>
    1.10    <meta content=W3C name=dcterms.publisher>
    1.11    <meta content="http://dev.w3.org/csswg/css3-transitions/"
    1.12 @@ -37,7 +37,7 @@
    1.13  
    1.14     <h1>CSS Transitions</h1>
    1.15  
    1.16 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 June 2013</h2>
    1.17 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 June 2013</h2>
    1.18  
    1.19     <dl>
    1.20      <dt>This version:
    1.21 @@ -988,7 +988,8 @@
    1.22     define the behavior in harder cases, such when transition properties are
    1.23     present on both ancestor and descendant. See <a
    1.24     href="http://lists.w3.org/Archives/Public/www-style/2013Mar/0297.html">description
    1.25 -   of issues and proposed model</a>.
    1.26 +   of issues and proposed model</a>. Working Group resolution from 2013-06-06
    1.27 +   needs to be edited.
    1.28  
    1.29    <h2 id=reversing><span class=secno>4. </span> Automatically reversing
    1.30     interrupted transitions</h2>
    1.31 @@ -1059,7 +1060,8 @@
    1.32     2012-05-09</a> (and <a
    1.33     href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>), <a
    1.34     href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes
    1.35 -   2012-10-30</a>.
    1.36 +   2012-10-30</a>, <a href=transition-reversing-demo>reversing demo</a>.
    1.37 +   Working Group resolution from 2013-06-07 needs to be edited.
    1.38  
    1.39    <h2 id=transition-events><span class=secno>5. </span><a
    1.40     id=transition-events-> Transition Events </a></h2>

     2.1 --- a/css-transitions/Overview.src.html	Sat Jun 08 00:22:16 2013 +0900
     2.2 +++ b/css-transitions/Overview.src.html	Sat Jun 08 11:18:20 2013 +0900
     2.3 @@ -973,6 +973,7 @@
     2.4          the behavior in harder cases, such when transition properties
     2.5          are present on both ancestor and descendant.  See
     2.6          <a href="http://lists.w3.org/Archives/Public/www-style/2013Mar/0297.html">description of issues and proposed model</a>.
     2.7 +        Working Group resolution from 2013-06-06 needs to be edited.
     2.8        </p>
     2.9  
    2.10        <h2 id="reversing">
    2.11 @@ -1054,7 +1055,9 @@
    2.12          <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
    2.13          Also see:
    2.14          <a href="http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0107.html">minutes 2012-05-09</a> (and <a href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>),
    2.15 -        <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes 2012-10-30</a>.
    2.16 +        <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes 2012-10-30</a>,
    2.17 +        <a href="transition-reversing-demo">reversing demo</a>.
    2.18 +        Working Group resolution from 2013-06-07 needs to be edited.
    2.19        </p>
    2.20  
    2.21        <h2 id="transition-events"><a id="transition-events-">

     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/css-transitions/transition-reversing-demo.html	Sat Jun 08 11:18:20 2013 +0900
     3.3 @@ -0,0 +1,406 @@
     3.4 +<!DOCTYPE HTML>
     3.5 +<title>Transition reversing demo</title>
     3.6 +<!-- L. David Baron <dbaron@dbaron.org>, 2013-06-07 -->
     3.7 +<style>
     3.8 +#demo {
     3.9 +    background: blue;
    3.10 +    width: 200px;
    3.11 +    height: 1em;
    3.12 +    padding: 2px;
    3.13 +}
    3.14 +#transitionable {
    3.15 +    position: relative;
    3.16 +    background: fuchsia;
    3.17 +    width: 100px;
    3.18 +    height: 1em;
    3.19 +    pointer-events: none;
    3.20 +}
    3.21 +p.algRadio { margin: 0 }
    3.22 +</style>
    3.23 +<script>
    3.24 +
    3.25 +var gDemo;
    3.26 +var gTransitionable;
    3.27 +
    3.28 +function start()
    3.29 +{
    3.30 +    var radios = document.getElementsByName("function");
    3.31 +    for (var idx = 0; idx < radios.length; ++idx) {
    3.32 +        var radio = radios[idx];
    3.33 +        radio.addEventListener("change", refresh_tfs, false);
    3.34 +    }
    3.35 +
    3.36 +    document.getElementsByName("x1")[0].addEventListener("change", refresh_tfs, false);
    3.37 +    document.getElementsByName("y1")[0].addEventListener("change", refresh_tfs, false);
    3.38 +    document.getElementsByName("x2")[0].addEventListener("change", refresh_tfs, false);
    3.39 +    document.getElementsByName("y2")[0].addEventListener("change", refresh_tfs, false);
    3.40 +
    3.41 +    gDemo = document.getElementById("demo");
    3.42 +    gDemo.addEventListener("mouseover", demo_mouseover, false);
    3.43 +    gDemo.addEventListener("mouseout", demo_mouseout, false);
    3.44 +    gTransitionable = document.getElementById("transitionable");
    3.45 +
    3.46 +    refresh_tfs();
    3.47 +
    3.48 +    var algs = document.getElementById("algorithms");
    3.49 +    for (var alg in gAlgorithms) {
    3.50 +        var radio = document.createElement("input");
    3.51 +        radio.setAttribute("type", "radio");
    3.52 +        radio.setAttribute("name", "algorithm");
    3.53 +        radio.setAttribute("value", alg);
    3.54 +        radio.addEventListener("change", refresh_algs, false);
    3.55 +        var t = document.createTextNode(alg);
    3.56 +        var label = document.createElement("label");
    3.57 +        label.appendChild(radio);
    3.58 +        label.appendChild(t);
    3.59 +        var p = document.createElement("p");
    3.60 +        p.className = "algRadio";
    3.61 +        p.appendChild(label);
    3.62 +        algs.appendChild(p);
    3.63 +    }
    3.64 +
    3.65 +    document.getElementsByName("algorithm")[0].checked = true;
    3.66 +    refresh_algs();
    3.67 +
    3.68 +    setInterval(tick, 20);
    3.69 +}
    3.70 +
    3.71 +function tick()
    3.72 +{
    3.73 +    var value = gCurrentAlgorithm.tick(Date.now());
    3.74 +    //gTransitionable.style.left = Math.round(value) + "px";
    3.75 +    var trans = "translateX(" + Math.round(value) + "px)";
    3.76 +    gTransitionable.style.webkitTransform = trans;
    3.77 +    gTransitionable.style.MozTransform = trans;
    3.78 +    gTransitionable.style.msTransform = trans;
    3.79 +    gTransitionable.style.OTransform = trans;
    3.80 +    gTransitionable.style.transform = trans;
    3.81 +}
    3.82 +
    3.83 +function refresh_algs(event)
    3.84 +{
    3.85 +    var alg = "";
    3.86 +
    3.87 +    var radios = document.getElementsByName("algorithm");
    3.88 +    for (var idx = 0; idx < radios.length; ++idx) {
    3.89 +        var radio = radios[idx];
    3.90 +        if (radio.checked) {
    3.91 +            alg = radio.value;
    3.92 +        }
    3.93 +    }
    3.94 +
    3.95 +    gCurrentAlgorithm = gAlgorithms[alg];
    3.96 +    gCurrentAlgorithm.construct();
    3.97 +}
    3.98 +
    3.99 +var gDuration = 4000; // ms
   3.100 +
   3.101 +var gAlgorithmData = null;
   3.102 +var gCurrentAlgorithm;
   3.103 +
   3.104 +var gAlgorithms = {
   3.105 +    "No Reversing Adjustment": {
   3.106 +        construct: function() {
   3.107 +            gAlgorithmData = {
   3.108 +                current:0,
   3.109 +                starttime: Date.now(),
   3.110 +                startpos: 0,
   3.111 +                endpos: 0,
   3.112 +            };
   3.113 +        },
   3.114 +        over: function() {
   3.115 +            var now = Date.now();
   3.116 +            gAlgorithmData.startpos = this.tick(now);
   3.117 +            gAlgorithmData.endpos = 100;
   3.118 +            gAlgorithmData.starttime = now;
   3.119 +        },
   3.120 +        out: function() {
   3.121 +            var now = Date.now();
   3.122 +            gAlgorithmData.startpos = this.tick(now);
   3.123 +            gAlgorithmData.endpos = 0;
   3.124 +            gAlgorithmData.starttime = now;
   3.125 +        },
   3.126 +        tick: function(t) {
   3.127 +            var time_portion = clamp((t - gAlgorithmData.starttime) / gDuration);
   3.128 +            var value_portion = gCurrentTF(time_portion);
   3.129 +            return value_portion * gAlgorithmData.endpos + (1 - value_portion) * gAlgorithmData.startpos;
   3.130 +        },
   3.131 +    },
   3.132 +    "2013-06-07 spec text on reversing (Apple proposal)": {
   3.133 +        construct: function() {
   3.134 +            gAlgorithmData = {
   3.135 +                current:0,
   3.136 +                starttime: Date.now(),
   3.137 +                startpos: 0,
   3.138 +                endpos: 0,
   3.139 +                reverse_tf: false,
   3.140 +            };
   3.141 +        },
   3.142 +        over: function() {
   3.143 +            var now = Date.now();
   3.144 +            var curpos = this.tick(now);
   3.145 +            if (curpos == gAlgorithmData.endpos) {
   3.146 +                gAlgorithmData.reverse_tf = false;
   3.147 +                gAlgorithmData.starttime = now;
   3.148 +            } else {
   3.149 +                gAlgorithmData.reverse_tf = !gAlgorithmData.reverse_tf;
   3.150 +                gAlgorithmData.starttime = now - ((gAlgorithmData.starttime + gDuration) - now);
   3.151 +            }
   3.152 +            gAlgorithmData.startpos = 0;
   3.153 +            gAlgorithmData.endpos = 100;
   3.154 +        },
   3.155 +        out: function() {
   3.156 +            var now = Date.now();
   3.157 +            var curpos = this.tick(now);
   3.158 +            if (curpos == gAlgorithmData.endpos) {
   3.159 +                gAlgorithmData.reverse_tf = false;
   3.160 +                gAlgorithmData.starttime = now;
   3.161 +            } else {
   3.162 +                gAlgorithmData.reverse_tf = !gAlgorithmData.reverse_tf;
   3.163 +                gAlgorithmData.starttime = now - ((gAlgorithmData.starttime + gDuration) - now);
   3.164 +            }
   3.165 +            gAlgorithmData.startpos = 100;
   3.166 +            gAlgorithmData.endpos = 0;
   3.167 +        },
   3.168 +        tick: function(t) {
   3.169 +            var time_portion = clamp((t - gAlgorithmData.starttime) / gDuration);
   3.170 +            if (gAlgorithmData.reverse_tf) {
   3.171 +                time_portion = 1.0 - time_portion;
   3.172 +            }
   3.173 +            var value_portion = gCurrentTF(time_portion);
   3.174 +            if (gAlgorithmData.reverse_tf) {
   3.175 +                value_portion = 1.0 - value_portion;
   3.176 +            }
   3.177 +            return value_portion * gAlgorithmData.endpos + (1 - value_portion) * gAlgorithmData.startpos;
   3.178 +        },
   3.179 +    },
   3.180 +    "dbaron proposal (implemented in Gecko)": {
   3.181 +        construct: function() {
   3.182 +            gAlgorithmData = {
   3.183 +                current:0,
   3.184 +                starttime: Date.now(),
   3.185 +                startpos: 0,
   3.186 +                endpos: 0,
   3.187 +                duration: gDuration,
   3.188 +            };
   3.189 +        },
   3.190 +        over: function() {
   3.191 +            var now = Date.now();
   3.192 +            var curpos = this.tick(now);
   3.193 +            if (curpos == gAlgorithmData.endpos) {
   3.194 +                gAlgorithmData.duration = gDuration;
   3.195 +            } else {
   3.196 +                gAlgorithmData.duration = gDuration * Math.abs(curpos - gAlgorithmData.startpos) / 100;
   3.197 +            }
   3.198 +            gAlgorithmData.startpos = curpos;
   3.199 +            gAlgorithmData.endpos = 100;
   3.200 +            gAlgorithmData.starttime = now;
   3.201 +        },
   3.202 +        out: function() {
   3.203 +            var now = Date.now();
   3.204 +            var curpos = this.tick(now);
   3.205 +            if (curpos == gAlgorithmData.endpos) {
   3.206 +                gAlgorithmData.duration = gDuration;
   3.207 +            } else {
   3.208 +                gAlgorithmData.duration = gDuration * Math.abs(curpos - gAlgorithmData.startpos) / 100;
   3.209 +            }
   3.210 +            gAlgorithmData.startpos = curpos;
   3.211 +            gAlgorithmData.endpos = 0;
   3.212 +            gAlgorithmData.starttime = now;
   3.213 +        },
   3.214 +        tick: function(t) {
   3.215 +            var time_portion = clamp((t - gAlgorithmData.starttime) / gAlgorithmData.duration);
   3.216 +            var value_portion = gCurrentTF(time_portion);
   3.217 +            return value_portion * gAlgorithmData.endpos + (1 - value_portion) * gAlgorithmData.startpos;
   3.218 +        },
   3.219 +    },
   3.220 +    "plinss proposal (jump to current point on reverse curve)": {
   3.221 +        construct: function() {
   3.222 +            gAlgorithmData = {
   3.223 +                current:0,
   3.224 +                starttime: Date.now(),
   3.225 +                startpos: 0,
   3.226 +                endpos: 0,
   3.227 +            };
   3.228 +        },
   3.229 +        over: function() {
   3.230 +            var now = Date.now();
   3.231 +            var curpos = this.tick(now);
   3.232 +            if (curpos == gAlgorithmData.endpos) {
   3.233 +                gAlgorithmData.starttime = now;
   3.234 +            } else {
   3.235 +				var time_portion = gCurrentInverseTF(1.0 - gCurrentTF(this.time_portion(now)))
   3.236 +                gAlgorithmData.starttime = now - time_portion * gDuration;
   3.237 +            }
   3.238 +            gAlgorithmData.startpos = 0;
   3.239 +            gAlgorithmData.endpos = 100;
   3.240 +        },
   3.241 +        out: function() {
   3.242 +            var now = Date.now();
   3.243 +            var curpos = this.tick(now);
   3.244 +            if (curpos == gAlgorithmData.endpos) {
   3.245 +                gAlgorithmData.starttime = now;
   3.246 +            } else {
   3.247 +				var time_portion = gCurrentInverseTF(1.0 - gCurrentTF(this.time_portion(now)))
   3.248 +                gAlgorithmData.starttime = now - time_portion * gDuration;
   3.249 +            }
   3.250 +            gAlgorithmData.startpos = 100;
   3.251 +            gAlgorithmData.endpos = 0;
   3.252 +        },
   3.253 +		time_portion: function(t) {
   3.254 +            return clamp((t - gAlgorithmData.starttime) / gDuration);
   3.255 +		},
   3.256 +        tick: function(t) {
   3.257 +            var value_portion = gCurrentTF(this.time_portion(t));
   3.258 +            return value_portion * gAlgorithmData.endpos + (1 - value_portion) * gAlgorithmData.startpos;
   3.259 +        },
   3.260 +    },
   3.261 +    "vhardy proposal (accumulation) (NOT YET IMPLEMENTED)": {
   3.262 +    },
   3.263 +}
   3.264 +
   3.265 +function demo_mouseover(event)
   3.266 +{
   3.267 +    if (event.target != gDemo) {
   3.268 +        return;
   3.269 +    }
   3.270 +
   3.271 +    gCurrentAlgorithm.over();
   3.272 +}
   3.273 +
   3.274 +function demo_mouseout(event)
   3.275 +{
   3.276 +    if (event.target != gDemo) {
   3.277 +        return;
   3.278 +    }
   3.279 +
   3.280 +    gCurrentAlgorithm.out();
   3.281 +}
   3.282 +
   3.283 +function clamp(v)
   3.284 +{
   3.285 +    if (v < 0) return 0;
   3.286 +    if (v > 1) return 1;
   3.287 +    return v;
   3.288 +}
   3.289 +
   3.290 +var gCurrentTF;
   3.291 +var gCurrentInverseTF;
   3.292 +var gX1, gY1, gX2, gY2;
   3.293 +var gCurrentInput, gCurrentOutput;
   3.294 +
   3.295 +function refresh_tfs()
   3.296 +{
   3.297 +    var func = "";
   3.298 +
   3.299 +    var radios = document.getElementsByName("function");
   3.300 +    for (var idx = 0; idx < radios.length; ++idx) {
   3.301 +        var radio = radios[idx];
   3.302 +        if (radio.checked) {
   3.303 +            func = radio.value;
   3.304 +        }
   3.305 +    }
   3.306 +
   3.307 +    var x1o = document.getElementById("x1");
   3.308 +    var y1o = document.getElementById("y1");
   3.309 +    var x2o = document.getElementById("x2");
   3.310 +    var y2o = document.getElementById("y2");
   3.311 +
   3.312 +    x1o.value = "";
   3.313 +    y1o.value = "";
   3.314 +    x2o.value = "";
   3.315 +    y2o.value = "";
   3.316 +
   3.317 +    var x1, y1, x2, y2;
   3.318 +    switch (func) {
   3.319 +        case "ease":
   3.320 +            x1 = 0.25; y1 = 0.10; x2 = 0.25; y2 = 1.00;
   3.321 +            break;
   3.322 +        case "linear":
   3.323 +            x1 = 0.00; y1 = 0.00; x2 = 1.00; y2 = 1.00;
   3.324 +            break;
   3.325 +        case "ease-in":
   3.326 +            x1 = 0.42; y1 = 0.00; x2 = 1.00; y2 = 1.00;
   3.327 +            break;
   3.328 +        case "ease-out":
   3.329 +            x1 = 0.00; y1 = 0.00; x2 = 0.58; y2 = 1.00;
   3.330 +            break;
   3.331 +        case "ease-in-out":
   3.332 +            x1 = 0.42; y1 = 0.00; x2 = 0.58; y2 = 1.00;
   3.333 +            break;
   3.334 +        case "cubic-bezier":
   3.335 +            x1 = clamp(Number(document.getElementsByName("x1")[0].value));
   3.336 +            y1 = Number(document.getElementsByName("y1")[0].value);
   3.337 +            x2 = clamp(Number(document.getElementsByName("x2")[0].value));
   3.338 +            y2 = Number(document.getElementsByName("y2")[0].value);
   3.339 +            break;
   3.340 +        default:
   3.341 +            return;
   3.342 +    }
   3.343 +
   3.344 +    x1o.innerHTML = x1.toFixed(2);
   3.345 +    y1o.innerHTML = y1.toFixed(2);
   3.346 +    x2o.innerHTML = x2.toFixed(2);
   3.347 +    y2o.innerHTML = y2.toFixed(2);
   3.348 +
   3.349 +    var tf = bezier(x1, y1, x2, y2);
   3.350 +    gX1 = x1; gY1 = y1; gX2 = x2; gY2 = y2;
   3.351 +    gCurrentTF = tf;
   3.352 +    gCurrentInverseTF = bezier(y1, x1, y2, x2);
   3.353 +}
   3.354 +
   3.355 +function bezier(x1, y1, x2, y2) {
   3.356 +    // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
   3.357 +    function x_for_t(t) {
   3.358 +        var omt = 1-t;
   3.359 +        return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
   3.360 +    }
   3.361 +    function y_for_t(t) {
   3.362 +        var omt = 1-t;
   3.363 +        return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
   3.364 +    }
   3.365 +    function t_for_x(x) {
   3.366 +        // Binary subdivision.
   3.367 +        var mint = 0, maxt = 1;
   3.368 +        for (var i = 0; i < 30; ++i) {
   3.369 +            var guesst = (mint + maxt) / 2;
   3.370 +            var guessx = x_for_t(guesst);
   3.371 +            if (x < guessx)
   3.372 +                maxt = guesst;
   3.373 +            else
   3.374 +                mint = guesst;
   3.375 +        }
   3.376 +        return (mint + maxt) / 2;
   3.377 +    }
   3.378 +    return function bezier_closure(x) {
   3.379 +        if (x == 0) return 0;
   3.380 +        if (x == 1) return 1;
   3.381 +        return y_for_t(t_for_x(x));
   3.382 +    }
   3.383 +}
   3.384 +
   3.385 +</script>
   3.386 +
   3.387 +<body onload="start()">
   3.388 +
   3.389 +<p>Choose a timing function:<br>
   3.390 +<label><input type="radio" name="function" value="ease" checked>ease</label>
   3.391 +<label><input type="radio" name="function" value="linear">linear</label>
   3.392 +<label><input type="radio" name="function" value="ease-in">ease-in</label>
   3.393 +<label><input type="radio" name="function" value="ease-out">ease-out</label>
   3.394 +<label><input type="radio" name="function" value="ease-in-out">ease-in-out</label>
   3.395 +<label><input type="radio" name="function" value="cubic-bezier" id="cbez">cubic-bezier</label>(<input type="text" size="4" name="x1" value="0.25">, <input type="text" size="4" name="y1" value="0">, <input type="text" size="4" name="x2" value="0.75">, <input type="text" size="4" name="y2" value="1">)
   3.396 +</p>
   3.397 +
   3.398 +<p>Cubic bezier curve with control points: (0, 0) &rarr;
   3.399 +(<span id="x1"></span>, <span id="y1"></span>) &rarr;
   3.400 +(<span id="x2"></span>, <span id="y2"></span>) &rarr;
   3.401 +(1, 1).  This function maps time to value.</p>
   3.402 +
   3.403 +<div id="algorithms">
   3.404 +</div>
   3.405 +
   3.406 +<p>Hover over the outer box:</p>
   3.407 +<div id="demo">
   3.408 +  <div id="transitionable"></div>
   3.409 +</div>

css-transitions/Overview.html		file \| annotate \| diff \| comparison \| revisions
css-transitions/Overview.src.html		file \| annotate \| diff \| comparison \| revisions
css-transitions/transition-reversing-demo.html		file \| annotate \| diff \| comparison \| revisions

Mercurial > drafts / changeset

changeset

[css-transitions] Note editing that needs to be done, and add reversing demo used for making decision.