微信小程序iOS端怎么暫停animated動畫

這篇“微信小程序iOS端怎么暫停animated動畫 ”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序iOS端怎么暫停animated動畫 ”文章吧。

animation-play-state

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

animation-play-stateCSS屬性定義一個動畫是否運行或者暫停。可以通過查詢它來確定動畫是否正在運行。另外，它的值可以被設(shè)置為暫停和恢復(fù)的動畫的重放。

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

在MDN文檔中了解到，這是一個實驗中的功能，但是其作用還是強大的。既可以控制/獲取元素的動畫狀態(tài)（paused，running）

所以，這個animation的參數(shù)用來控制動畫的播放狀態(tài)再合適不過了。畫外音：你還沒考慮兼容性呢！對！就是這個兼容性問題。在chrome上這個參數(shù)是可以支持的，但是iOS設(shè)備上就不支持了...嘆息。

在iOS上的處理

當然不能因為兼容性問題就不用這個參數(shù)了，當然不能讓每個iOS用戶去下載一個chrome瀏覽器，當然...

那我們怎么解決呢？？？用JS

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

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

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

那么具體要怎么做呢？

實現(xiàn)

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

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

大致解釋一下就是：

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

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

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

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

沒錯，洋洋得意的以為完成了需求，結(jié)果真機（iOS）上一測試，原形畢露。

以上就是關(guān)于“微信小程序iOS端怎么暫停animated動畫 ”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。