微信小程序iOS端如何暫停animated動(dòng)畫

微信小程序iOS端如何暫停animated動(dòng)畫，應(yīng)該如何實(shí)現(xiàn)，下面為大家分析。

animation-play-state

先來介紹一下今天的主角 animation-play-state

animation-play-stateCSS屬性定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停。可以通過查詢它來確定動(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ù)用來控制動(dòng)畫的播放狀態(tài)再合適不過了。畫外音：你還沒考慮兼容性呢！對(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

通過 Window.getComputedStyle() 方法，我們可以獲取元素實(shí)時(shí)的 style 的 CSSStyleDeclaration 對(duì)象，這個(gè)對(duì)象表示CSS屬性鍵值對(duì)的集合。也就是說我們使用這個(gè)方法可以獲取一個(gè)正在進(jìn)行動(dòng)畫的元素當(dāng)前的 style 值。

PS:關(guān)于 Window.getComputedStyle() 方法的值可以在MDN上了解到，這里不展開敘述。給出一個(gè)語法的例子（摘自MDN）

let style = window.getComputedStyle(element, [pseudoElt]);
復(fù)制代碼

那么具體要怎么做呢？

實(shí)現(xiàn)

See the Penanimation-play-state by luogao (@luogao) onCodePen.

代碼已經(jīng)在上面的codepen預(yù)覽中展示啦，如果現(xiàn)實(shí)不來請(qǐng)點(diǎn)這里:point_right:Roy Luo's codepen

大致解釋一下就是：

在元素的外層的包裹元素上添加獲取到的執(zhí)行動(dòng)畫的元素的 style 計(jì)算屬性，從而讓執(zhí)行動(dòng)畫的元素暫停下來。

那么在微信小程序中又是如何呢？

其實(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ū)中提到說iOS不支持這個(gè) animation-play-state ‍♂? ‍♂? ‍♂? ‍

Hishop小程序工具開發(fā)公司長(zhǎng)沙海商，是一家有著十年技術(shù)前沿的公司，我們以先進(jìn)技術(shù)提供并解決各行業(yè)小程序開發(fā)，操作簡(jiǎn)單，支持多種社群營銷活動(dòng)，提供一套綜合性的營銷系統(tǒng)。以及可視化模板操作，大大減少人力物力成本。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店