diff options
Diffstat (limited to 'files/zh-cn/conflicting/web/css/easing-function/index.html')
| -rw-r--r-- | files/zh-cn/conflicting/web/css/easing-function/index.html | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html new file mode 100644 index 0000000000..1e53f47c6d --- /dev/null +++ b/files/zh-cn/conflicting/web/css/easing-function/index.html @@ -0,0 +1,267 @@ +--- +title: <timing-function> +slug: conflicting/Web/CSS/easing-function +tags: + - CSS + - timing-function +translation_of: Web/CSS/easing-function +translation_of_original: Web/CSS/timing-function +original_slug: Web/CSS/timing-function +--- +<p>{{ CSSRef() }}</p> + +<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong><timing-function></strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p> + +<p>这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p> + +<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p> + +<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p> + +<h2 class="cleared" id="定时函数">定时函数</h2> + +<div style="width: 100%;"> +<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p> + +<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3> + +<table class="withoutBorder"> + <tbody> + <tr> + <td> + <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p> + </td> + <td> + <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p> + + <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p> + + <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p> + + <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p> + + <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h4 id="语法">语法</h4> + +<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code> +</pre> + +<p>其中，</p> + +<dl> + <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt> + <dd style="margin-left: 40px;">Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd> +</dl> + +<h4 id="示例">示例</h4> + +<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p> + +<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1) </code>The canonical Bézier curve with four <number> in the [0,1] range. +cubic-bezier(0, 0, 1, 1) Using <integer> is valid as any <integer> is also a <number>. +cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects. +cubic-bezier(0.1, 4, 0.6, 2.45) Values > 1.0 for ordinates are also valid.</pre> + +<p>像这些贝塞尔曲线的定义是无效的：</p> + +<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios. +cubic-bezier(-0.2, 0.6, -0.1, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. +cubic-bezier(0.3, 2.1) The two points must be defined, there is no default value. +cubic-bezier(1.1, 0, 4, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. +</pre> + +<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3> + +<table class="withoutBorder"> + <tbody> + <tr> + <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td> + <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"> + <table class="withoutBorder"> + <tbody> + <tr> + <td></td> + <td rowspan="2"> + <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p> + </td> + </tr> + </tbody> + </table> + </td> + <td rowspan="2"></td> + </tr> + <tr style="text-align: center;"> + <td style="white-space: nowrap;"><code>steps(2, start)</code></td> + <td><code>steps(4, end)</code></td> + </tr> + </tbody> +</table> + +<h4 id="Syntax">Syntax</h4> + +<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code> +</pre> + +<p>where :</p> + +<dl> + <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt> + <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.</dd> + <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt> + <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>: + <ul> + <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li> + <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li> + </ul> + </dd> +</dl> + +<h4 id="Examples">Examples</h4> + +<p>These timing functions are valid :</p> + +<pre>steps(5, end) There is 5 treads, the last one happens right before the end of the animation. +steps(2, start) A two-step staircase, the first one happening at the start of the animation. +</pre> + +<p>These timing function are invalid :</p> + +<pre>steps(2.0, end) The first parameter must be an <a title="integer"><integer></a> and cannot be a real value, even if it is equal to one. +steps(-3, start) The amount of steps must be non-negative. +steps(0, end) There must be at least one step. +steps(2) The second parameter is not optional. +steps(start, 3) Though of different types, the order of parameter is important. +step(1, end) Even if there is one step, the function name is steps, with the plural 's' +steps(3 end) The two parameters must be separated with a comma; one or several spaces is not enough. +</pre> + +<h3 id="常用定时函数关键字">常用定时函数关键字</h3> + +<h4 id="linear"><code>linear</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease"><code>ease</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td> + <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td> + </tr> + </tbody> +</table> + +<h4 id="ease-in"><code>ease-in</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease-in-out"><code>ease-in-out</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td> + <td> + <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="ease-out"><code>ease-out</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td> + <td> + <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="step-start"><code>step-start</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr> + <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td> + <td></td> + </tr> + </tbody> +</table> + +<h4 id="step-end"><code>step-end</code></h4> + +<table class="withoutBorder"> + <tbody> + <tr style="vertical-align: top;"> + <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td> + <td> + <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defined anonymously</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Defined anonymously, says to see definition in the CSS Transitions Module</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("css.types.timing-function", 2)}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> + <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li> +</ul> |