初識HTML5 5 動畫

2021-06-28 19:38:19 字數 716 閱讀 4353

動畫無非的就是觸發動畫、迴圈動畫、控制時間。 我們可能最先想到的是:

setinterval()

settimeout()

誠然,以上兩個命令確實可以起到觸發動畫、迴圈動畫、控制時間的作用,但是不準確。因為瀏覽器比你更清楚什麼時候執行動畫命令。所以說,與其你告訴瀏覽器不如讓瀏覽器告訴你ta什麼時候已經準備好執行下乙個命令了。

從根本上來說,以上兩條命令的問題在於他們不知道什麼時候該做什麼事情。我們想要的其實就是乙個瀏覽器的執行動畫的api,我們需要執行動畫的時候,呼叫它就可以了,對吧?那ok啊,我們現在已經拿到了這個api:

function animate(time) 

...requestanimationframe(animate); // 開始動畫

requestanimationframe()

我們來看一段計算平均幀速率的**:

function

calculatefps

()

我們來看計算的原理:每次執行動畫的時候我們就會呼叫這個**。那麼now - lasttime 很明顯就是計算單次執行的時間,或者說我們單次動畫的執行時間,那麼1秒鐘之內到底可以執行多少動畫呢?所以我們就用1000毫秒去除以1次動畫執行的毫秒數,也就得出了1秒鐘可以執行多少次動畫了,對吧?這個只是比較簡單的計算,複雜一點的大家可以自己去網上搜尋一下

html5 5個重要特性

html5已經火了一段時間了,相信作為web相關開發project師,肯定或多或少的了解和嘗試過一些html5的特性和程式設計。還記得曾經我們介紹過的html5新標籤。作為未來前端開發技術的潮流和風向標。html5絕對不容忽視。相信大家都會非常喜歡這個特性。無須server端的檢測,使用瀏覽器的本地...

初識HTML標籤

超文字標記語言 hyper text markup language 是一種標記語言,使用標記標籤來描述網頁。結束標籤,也有部分標籤不是成對出現的,如 開始標籤 內容 結束標籤。this is my first paragraph.p 上面的這段 就是乙個元素,或稱為p元素 標籤支援屬性,屬性總是以...

HTML基礎之初識HTML

什麼是 html?html 標籤html 文件 網頁web 瀏覽器的作用是讀取 html 文件,並以網頁的形式顯示出它們。瀏覽器不會顯示 html 標籤,而是使用標籤來解釋頁面的內容 my first paragraph.p body html 例子解釋 與 html 之間的文字描述網頁 與 bod...