中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2022-03-09 10:35:34 來源:億速云 閱讀:376 作者:iii 欄目:開發技術

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

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

animation-play-state

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

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

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

在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 Penanimation-play-state by luogao (@luogao) onCodePen.

代碼已經在上面的codepen預覽中展示啦,如果現實不來請點這里:point_right:Roy Luo's codepen

大致解釋一下就是:

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

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

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

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

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

山阳县| 灵山县| 玛多县| 宜黄县| 浮梁县| 垦利县| 普宁市| 辽源市| 丰城市| 肥东县| 赣榆县| 仙游县| 分宜县| 淮南市| 汕尾市| 佛冈县| 雷州市| 成都市| 长顺县| 榆林市| 日喀则市| 西贡区| 淮安市| 济阳县| 临安市| 蓝山县| 永兴县| 建阳市| 四平市| 扎囊县| 太湖县| 偏关县| 原平市| 镶黄旗| 马关县| 施甸县| 德清县| 鹤庆县| 平谷区| 衡山县| 大关县|