- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 26 May 2011 21:34:00 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images In directory hutz:/tmp/cvs-serv12902 Modified Files: Overview.html Overview.src.html Log Message: Added special interpolating rules for cross-fade() to avoid nesting when possible. Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-images/Overview.html,v retrieving revision 1.106 retrieving revision 1.107 diff -u -d -r1.106 -r1.107 --- Overview.html 26 May 2011 16:44:03 -0000 1.106 +++ Overview.html 26 May 2011 21:33:57 -0000 1.107 @@ -237,7 +237,10 @@ <li><a href="#interpolating-images"><span class=secno>9.1. </span> Interpolating <i><image></i></a> - <li><a href="#interpolating-gradients"><span class=secno>9.2. </span> + <li><a href="#interpolating-image-combinations"><span class=secno>9.2. + </span> Interpolating <i><image-combination></i></a> + + <li><a href="#interpolating-gradients"><span class=secno>9.3. </span> Interpolating <i><gradient></i></a> </ul> @@ -2250,7 +2253,7 @@ and is set to a value that represents the progress through the transition, based on the duration of the transition, the elapsed time, and the timing function in use. For example, with a linear timing function and a 1s - duration, after .3s t is equal to .3.</p> + duration, after .3s t is equal to 30%.</p> <!-- ====================================================================== --> <h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a @@ -2264,9 +2267,27 @@ <p>In specific terms, at each point in the interpolation the image is equal to <code>cross-fade(<start image>, <end image>, t)</code>.</p> - <!-- ====================================================================== --> + <!-- ======================================================================= --> - <h3 id=interpolating-gradients><span class=secno>9.2. </span> Interpolating + <h3 id=interpolating-image-combinations><span class=secno>9.2. </span> + Interpolating <a + href="#ltimage-combination"><i><image-combination></i></a></h3> + + <p>Combinations of the same images at different progress points can be + smoothly animated by simply animating the progress. Theoretically, this + produces the same visual effect as the generic <image> interpolation + would; in practice, implementations may have slight differences due to how + they scale or rasterize images. Additionally, the generic <image> + interpolation produces nested cross-fade() functions, which is undesirable + if it can be avoided. + + <p>If both the starting and ending images are <image-combination>s with + the same image arguments, they must be interpolated by interpolating their + third argument, the percentage. Otherwise, they must be interpolated as + generic <image>s.</p> + <!-- ======================================================================= --> + + <h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating <a href="#ltgradient"><i><gradient></i></a></h3> <p>Gradient images can be interpolated directly in CSS transitions and Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-images/Overview.src.html,v retrieving revision 1.110 retrieving revision 1.111 diff -u -d -r1.110 -r1.111 --- Overview.src.html 26 May 2011 16:44:03 -0000 1.110 +++ Overview.src.html 26 May 2011 21:33:57 -0000 1.111 @@ -1773,7 +1773,7 @@ number which starts at 0% and goes to 100%, and is set to a value that represents the progress through the transition, based on the duration of the transition, the elapsed time, and the timing function in use. For example, with a linear - timing function and a 1s duration, after .3s t is equal to .3.</p> + timing function and a 1s duration, after .3s t is equal to 30%.</p> <!-- ====================================================================== --> @@ -1788,7 +1788,25 @@ <p>In specific terms, at each point in the interpolation the image is equal to <code>cross-fade(<start image>, <end image>, t)</code>.</p> -<!-- ====================================================================== --> +<!-- ======================================================================= --> + +<h3 id='interpolating-image-combinations'> +Interpolating <i><image-combination></i></h3> + + <p>Combinations of the same images at different progress points can be + smoothly animated by simply animating the progress. Theoretically, this + produces the same visual effect as the generic <image> interpolation + would; in practice, implementations may have slight differences due to + how they scale or rasterize images. Additionally, the generic <image> + interpolation produces nested cross-fade() functions, which is undesirable + if it can be avoided.</p> + + <p>If both the starting and ending images are <image-combination>s with the + same image arguments, they must be interpolated by interpolating their third + argument, the percentage. Otherwise, they must be interpolated as generic + <image>s.</p> + +<!-- ======================================================================= --> <h3 id='interpolating-gradients'> Interpolating <i><gradient></i></h3>
Received on Thursday, 26 May 2011 21:34:01 UTC