微信小程序iOS端如何暫停animated動畫

在知道有animation-play-state這個animation的參數時，我心裏是激動的。在得知iOS端並不支持時，一股涼意襲來

animation-play-state

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

animation-play-state  CSS 屬性定義一個動畫是否運行或者暫停。能夠經過查詢它來肯定動畫是否正在運行。另外，它的值能夠被設置爲暫停和恢復的動畫的重放。

恢復一個已暫停的動畫，將從它開始暫停的時候，而不是從動畫序列的起點開始在動畫。

在MDN文檔中瞭解到，這是一個實驗中的功能，可是其做用仍是強大的。既能夠控制/獲取元素的動畫狀態（paused，running）

因此，這個animation的參數用來控制動畫的播放狀態再合適不過了。畫外音：你還沒考慮兼容性呢！對！就是這個兼容性問題。在chrome上這個參數是能夠支持的，可是iOS設備上就不支持了...嘆息。

在iOS上的處理

固然不能由於兼容性問題就不用這個參數了，固然不能讓每一個iOS用戶去下載一個chrome瀏覽器，固然...

那咱們怎麼解決呢？？？用JS

經過Window.getComputedStyle()方法，咱們能夠獲取元素實時的style的CSSStyleDeclaration對象，這個對象表示CSS屬性鍵值對的集合。也就是說咱們使用這個方法能夠獲取一個正在進行動畫的元素當前的style值。

PS:關於Window.getComputedStyle()方法的值能夠在MDN上了解到，這裏不展開敘述。給出一個語法的例子（摘自MDN）

let style = window.getComputedStyle(element, [pseudoElt]);

那麼具體要怎麼作呢？

實現

See the Pen animation-play-state by luogao (@luogao) on CodePen.

代碼已經在上面的codepen預覽中展現啦，若是現實不來請點這裏👉Roy Luo's codepen

大體解釋一下就是：

在元素的外層的包裹元素上添加獲取到的執行動畫的元素的style計算屬性，從而讓執行動畫的元素暫停下來。

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

其實，最早遇到這個問題是在作小程序的時候。一個播放器的界面，中間一張專輯圖片。在圓形的黑膠唱片邊框中旋轉。當播放中止，圖片也同時中止旋轉。停在當前旋轉的位置

當時看似簡單的一個需求，使用了animation-play-state而且與預期同樣達到了效果，在模擬器中。

沒錯，洋洋得意的覺得完成了需求，結果然機（iOS）上一測試，原形畢露。

當時看到小程序的官方社區中提到說iOS不支持這個animation-play-state🤦‍♂️🤦‍♂️🤦‍♂️🤦‍

幸得殘陽映楓紅在sf的一個問題中的回答讓我找到了方向。感謝之～

值得在最後前一提的是

這裏有三個小程序的坑要提一下

• nodesRef.fields(fields, [callback])這個方法須要在基本庫2.1.0（我的感受不是個該着重考慮的問題）
• 這個方法是異步的（自行感覺）
• 應該區分iOS和安卓設備，進行不一樣的處理。能不用這個nodesRef.fields方法儘可能不要用～

參考

• animation-play-state
• Window.getComputedStyle()
• [移動端css動畫播放狀態暫停在ios不起做用 animation-play-state]

本文做者： Roy Luo

本文連接： 微信小程序iOS端如何暫停animated動畫