成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

跳起來：你不知道的CSS Animation新的Steps()值

高勝山 / 2669人閱讀

摘要：通過從到位移的改變，將一組動(dòng)畫幀組成一個(gè)連續(xù)的動(dòng)畫。其余的動(dòng)畫幀將均勻的分部在兩個(gè)狀態(tài)的中間。例如會(huì)將整個(gè)動(dòng)畫平均分配為三個(gè)動(dòng)畫幀，即，和。

CSS動(dòng)畫中有一個(gè)animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個(gè)steps()階躍函數(shù)，這篇文章我們來討論steps()函數(shù)新增的四種取值。到目前為止，這新增的幾個(gè)取值僅在Firefox 65+中可用，也就是說在其他瀏覽器實(shí)現(xiàn)之前，演示只能在Firefox中實(shí)現(xiàn)。

steps()函數(shù)中新增的四個(gè)值是：

jump-start

jump-end

jump-both

jump-none


這些新增的值與已有的值有什么區(qū)別？它們適合在什么時(shí)候使用？下面的內(nèi)容將詳細(xì)介紹。

Easings和steps()函數(shù)

首先，我們后退一步，看一看animation-timing-function屬性中easings取值和steps()函數(shù)的傳統(tǒng)取值。

Easings可以改變一個(gè)transition或者animation或者Web Animations API中動(dòng)畫的節(jié)奏，這個(gè)節(jié)奏是連續(xù)性的。

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}

@keyframes move {
  100% {
    transform: translateX(200px);
  }
}

通過一個(gè)linear easing，元素會(huì)以均勻的速度移動(dòng)。如果我們改變?yōu)閑ase-in，元素的移動(dòng)節(jié)奏就會(huì)變?yōu)閯傞_始慢，到動(dòng)畫快結(jié)束時(shí)加速變快。

Steps則不同，我們可以將動(dòng)畫劃分為特定數(shù)量的動(dòng)畫幀，所以，如果改變easing為steps(2)，那么動(dòng)畫將只有兩個(gè)動(dòng)畫幀，開始幀和結(jié)束幀。

steps()函數(shù)的第二個(gè)（可選）參數(shù)指定在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化。之前支持start和end兩個(gè)值，現(xiàn)在又增加了四個(gè)新值。

Start和End

在新增的四個(gè)值中，其中有兩個(gè)其實(shí)是原來start和end的代替值：

jump-start === start

jump-end === end

jump前綴幫助我們更有效地解釋單詞start和end。當(dāng)我們使用start或jump-start時(shí)，我們告訴動(dòng)畫跳過起始位置。同樣的，使用end或jump-end時(shí)，我們希望跳過結(jié)束位置。

你可以將steps(n)理解為一個(gè)linear均速移動(dòng)的動(dòng)畫元素按照指定的時(shí)間間隔進(jìn)行快照截取，動(dòng)畫的過程就是一個(gè)快照接著一個(gè)快照顯示的過程。當(dāng)我們指定一個(gè)動(dòng)畫為steps(4, jump-start)時(shí)，意味著將一個(gè)平滑的動(dòng)畫過程平均劃分為四部分，然后取每個(gè)部分的開始狀態(tài)進(jìn)行快照截取，并將這些快照顯示出來。同樣的，steps(5, jump-end)意味將一個(gè)平滑動(dòng)畫平均劃分為五個(gè)部分，取每個(gè)部分的結(jié)束狀態(tài)進(jìn)行快照截取，最后將這些快照顯示出來。

旋轉(zhuǎn)

當(dāng)我們想到時(shí)鐘上的秒針時(shí)，就可以更清楚的認(rèn)識(shí)到start和end兩個(gè)值的作用 - 秒針需要運(yùn)行60秒旋轉(zhuǎn)一圈（從0度到360度），也就是steps(60)。無論使用jump-start/start還是jump-end/end都可以實(shí)現(xiàn)一圈又一圈的連續(xù)旋轉(zhuǎn)，但是，如果jump-start/start和jump-end/end都顯示每個(gè)動(dòng)畫幀的起始狀態(tài)和結(jié)束狀態(tài)，那么秒針就會(huì)在最頂部0度的位置停留兩次，這明顯是不符合常規(guī)的。

雪碧圖

steps()另一個(gè)重要的應(yīng)用是雪碧圖動(dòng)畫。通過從translateX(0)到translate(-100%) 位移的改變，將一組動(dòng)畫幀組成一個(gè)連續(xù)的動(dòng)畫。

jump-none

與jump-start，jump-end只是命名方式的改變不同，這是一個(gè)新增的steps取值。

有時(shí)候我們并不需要跳過動(dòng)畫的任何一個(gè)狀態(tài)。新的取值jump-none就支持同時(shí)保留動(dòng)畫的起始狀態(tài)和結(jié)束狀態(tài)。對于一個(gè)包含至少2幀的動(dòng)畫來說，起始狀態(tài)和結(jié)束狀態(tài)都將會(huì)顯示出來。其余的動(dòng)畫幀將均勻的分部在兩個(gè)狀態(tài)的中間。例如steps(3, jump-none)會(huì)將整個(gè)動(dòng)畫平均分配為三個(gè)動(dòng)畫幀，即0%，50%和100%。

移動(dòng)一個(gè)元素

一個(gè)簡單的例子就是在屏幕上移動(dòng)一個(gè)元素，讓它以steps階躍的方式從A點(diǎn)移動(dòng)到B點(diǎn)。以前我們只能跳過開始狀態(tài)或者結(jié)束狀態(tài)，并沒有一種簡單的方法讓動(dòng)畫同時(shí)顯示兩種狀態(tài)。而現(xiàn)在我們有了jump-none：

使用steps()方法之前的取值，仍然能夠?qū)崿F(xiàn)這一點(diǎn)，但是需要做一些額外的數(shù)學(xué)計(jì)算。現(xiàn)在則變得簡單了，因?yàn)槟阒绖?dòng)畫的起始狀態(tài)和結(jié)束狀態(tài)都會(huì)被顯示。

Opacity

不透明度Opacity屬性的動(dòng)畫同樣可以從新的取值jump-none中受益，假如我們需要實(shí)現(xiàn)一個(gè)不透明度Opacity從0到1階躍重復(fù)變化的動(dòng)畫（即閃爍效果），使用start或end值，將永遠(yuǎn)看不到完全不透明或完全透明的狀態(tài)。但是jump-none則不會(huì)出現(xiàn)這種問題，一個(gè)被設(shè)置為steps(2, jump-none)的動(dòng)畫會(huì)實(shí)現(xiàn)類似on/offk的效果：

jump-both

我們可以跳過階躍動(dòng)畫的起始狀態(tài)，可以跳過結(jié)束狀態(tài)，可以兩個(gè)狀態(tài)都不跳，那么就剩下jump-both了，它表示起始和結(jié)束的兩個(gè)狀態(tài)都跳過。

我還沒有想到適合這個(gè)取值的用途，如果你想到了可以在下面評論告訴我。

瀏覽器支持

Webkit和EdgeHTML內(nèi)核的瀏覽器到目前為止還不支持新增的steps函數(shù)值，所以我們僅僅是用于學(xué)習(xí)實(shí)驗(yàn)，不要將它們使用在實(shí)際項(xiàng)目中。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104367.html

相關(guān)文章

  • 跳起來：你不知道的CSS Animation新的Steps()值

    摘要：通過從到位移的改變，將一組動(dòng)畫幀組成一個(gè)連續(xù)的動(dòng)畫。其余的動(dòng)畫幀將均勻的分部在兩個(gè)狀態(tài)的中間。例如會(huì)將整個(gè)動(dòng)畫平均分配為三個(gè)動(dòng)畫幀，即，和。 CSS動(dòng)畫中有一個(gè)animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個(gè)steps()階躍函數(shù)，這篇文章我們來討論steps()函數(shù)新增的四種取值。到目前為止，這新增的幾...

    mingde 評論0 收藏0

  • 跳起來：你不知道的CSS Animation新的Steps()值

    摘要：通過從到位移的改變，將一組動(dòng)畫幀組成一個(gè)連續(xù)的動(dòng)畫。其余的動(dòng)畫幀將均勻的分部在兩個(gè)狀態(tài)的中間。例如會(huì)將整個(gè)動(dòng)畫平均分配為三個(gè)動(dòng)畫幀，即，和。 CSS動(dòng)畫中有一個(gè)animation-timing-function屬性，它的取值除了ease，linear，cubic-bezier之外，還有一個(gè)steps()階躍函數(shù)，這篇文章我們來討論steps()函數(shù)新增的四種取值。到目前為止，這新增的幾...

    willin 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Jackwoo 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Bryan 評論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    fai1017 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<