在知道有animation-play-state這個(gè)animation的參數(shù)時(shí)，我內(nèi)心是激動(dòng)的域庇。在得知iOS端并不支持時(shí)减响，一股涼意襲來(lái)
animation-play-state
先來(lái)介紹一下今天的主角animation-play-state
animation-play-state CSS 屬性定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停转晰。可以通過(guò)查詢它來(lái)確定動(dòng)畫是否正在運(yùn)行桐磁。另外悔耘，它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫的重放。
恢復(fù)一個(gè)已暫停的動(dòng)畫所意，將從它開始暫停的時(shí)候淮逊，而不是從動(dòng)畫序列的起點(diǎn)開始在動(dòng)畫。
在MDN文檔中了解到扶踊，這是一個(gè)實(shí)驗(yàn)中的功能泄鹏，但是其作用還是強(qiáng)大的。既可以控制/獲取元素的動(dòng)畫狀態(tài)（paused秧耗，running）
所以备籽，這個(gè)animation的參數(shù)用來(lái)控制動(dòng)畫的播放狀態(tài)再合適不過(guò)了。畫外音：你還沒考慮兼容性呢分井！對(duì)车猬！就是這個(gè)兼容性問題。在chrome上這個(gè)參數(shù)是可以支持的尺锚，但是iOS設(shè)備上就不支持了...嘆息珠闰。
在iOS上的處理
當(dāng)然不能因?yàn)榧嫒菪詥栴}就不用這個(gè)參數(shù)了，當(dāng)然不能讓每個(gè)iOS用戶去下載一個(gè)chrome瀏覽器瘫辩，當(dāng)然...
那我們?cè)趺唇鉀Q呢伏嗜？？伐厌？用JS
通過(guò)Window.getComputedStyle()方法承绸，我們可以獲取元素實(shí)時(shí)的style的CSSStyleDeclaration對(duì)象，這個(gè)對(duì)象表示CSS屬性鍵值對(duì)的集合挣轨。也就是說(shuō)我們使用這個(gè)方法可以獲取一個(gè)正在進(jìn)行動(dòng)畫的元素當(dāng)前的style值军熏。
PS:關(guān)于Window.getComputedStyle()方法的值可以在MDN上了解到，這里不展開敘述卷扮。給出一個(gè)語(yǔ)法的例子（摘自MDN）
let style = window.getComputedStyle(element, [pseudoElt]);
那么具體要怎么做呢荡澎？
實(shí)現(xiàn)
<p data-height="417" data-theme-id="light" data-slug-hash="ejeLJm" data-default-tab="js,result" data-user="luogao" data-pen-title="animation-play-state" class="codepen">See the Pen <a >animation-play-state</a> by luogao (<a >@luogao</a>) on <a >CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
代碼已經(jīng)在上面的codepen預(yù)覽中展示啦，如果現(xiàn)實(shí)不來(lái)請(qǐng)點(diǎn)這里??Roy Luo's codepen
大致解釋一下就是：
在元素的外層的包裹元素上添加獲取到的執(zhí)行動(dòng)畫的元素的style計(jì)算屬性晤锹，從而讓執(zhí)行動(dòng)畫的元素暫停下來(lái)衔瓮。
那么在微信小程序中又是如何呢？
其實(shí)抖甘，最先遇到這個(gè)問題是在做小程序的時(shí)候热鞍。一個(gè)播放器的界面，中間一張專輯圖片。在圓形的黑膠唱片邊框中旋轉(zhuǎn)薇宠。當(dāng)播放停止偷办，圖片也同時(shí)停止旋轉(zhuǎn)。停在當(dāng)前旋轉(zhuǎn)的位置
當(dāng)時(shí)看似簡(jiǎn)單的一個(gè)需求澄港，使用了animation-play-state并且與預(yù)期一樣達(dá)到了效果椒涯，在模擬器中。
沒錯(cuò)回梧，洋洋得意的以為完成了需求废岂，結(jié)果真機(jī)（iOS）上一測(cè)試，原形畢露狱意。
當(dāng)時(shí)看到小程序的官方社區(qū)中提到說(shuō)iOS不支持這個(gè)animation-play-state???♂????♂????♂????
幸得殘陽(yáng)映楓紅在sf的一個(gè)問題中的回答讓我找到了方向湖苞。感謝之～
值得在最后前一提的是
這里有三個(gè)小程序的坑要提一下
- nodesRef.fields(fields, [callback])這個(gè)方法需要在基本庫(kù)2.1.0（個(gè)人感覺不是個(gè)該著重考慮的問題）
- 這個(gè)方法是異步的（自行感受）
- 應(yīng)該區(qū)分iOS和安卓設(shè)備，進(jìn)行不同的處理详囤。能不用這個(gè)nodesRef.fields方法盡量不要用～
參考
- animation-play-state
- Window.getComputedStyle()
- [移動(dòng)端css動(dòng)畫播放狀態(tài)暫停在ios不起作用 animation-play-state]
本文作者： Roy Luo
