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

miracledan 發布于2019-08-23 10:30 / 1263人閱讀

摘要：可以通過查詢它來確定動畫是否正在運行。另外，它的值可以被設置為暫停和恢復的動畫的重放。在文檔中了解到，這是一個實驗中的功能，但是其作用還是強大的。也就是說我們使用這個方法可以獲取一個正在進行動畫的元素當前的值。

在知道有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預覽中展示啦，如果現實不來請點這里

GPU云服務器云服務器微信小程序如何快速微信小程序如何開發如何創作微信小程序如何使用微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96401.html

300行代碼寫一個音樂播放器小程序

摘要：項目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關于小程序的內容可見微信小程序開發文檔小程序框架結構微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。剛進公司不久，因為公司部門年后業務拓展的關系，可能在年后會被分配到公司的微信公眾號組做小程序相關的開發工作，因此寫了個微信小程序wx-audio踩坑。目前還有一些功能沒有寫完：如返...

chenatu 2019-08-20 13:56 評論0 收藏0
指尖一點歌聲來--微信小程序之仿網易云音樂心得

摘要：為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。查文檔發現，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護了，后者低版本需做兼容處理。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。期間踩過了大把的坑，bug出現的難受和解決bug歡喜，一直是伴隨我階段性學習這個項目的心情。初步完成...

KitorinZero 2019-08-22 11:18 評論0 收藏0
在微信小程序中繪制圖表（part3）

摘要：本期大綱餅圖繪制如何添加動畫效果使用構建項目相關閱讀在微信小程序中繪制圖表在微信小程序中繪制圖表關注我的項目查看完整代碼。本期大綱 1、餅圖繪制2、如何添加動畫效果3、使用rollup構建項目相關閱讀：在微信小程序中繪制圖表（part1）在微信小程序中繪制圖表（part2）關注我的 github 項目查看完整代碼。很久沒更新了，最近事情比較多，今天來把坑填上！餅圖繪制 ...

褰辯話 2019-08-21 11:20 評論0 收藏0
小程序練習，仿bilibili小程序

摘要：微信小程序學習仿嗶哩嗶哩制作的小程序待完善項目預覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發現了它竟然帶來了一場大革命。微信小程序學習 ?仿嗶哩嗶哩制作的小程序（待完善）項目預覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

2shou 2019-08-20 18:24 評論0 收藏0