成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

為何 Canvas 內(nèi)元素動畫總是在顫抖？

DTeam / 1824人閱讀

摘要：來源背景過年的項(xiàng)目中遇到一個(gè)問題讓我百思不得其解，明明我的幀率保持在幀，為何我的動畫卻一直抖動我的場景是一個(gè)勻速直線運(yùn)動的小姐姐。在中，不建議使用浮點(diǎn)數(shù)進(jìn)行定位。

來源： https://fanmingfei.com/posts/...
背景

過年的項(xiàng)目中遇到一個(gè)問題讓我百思不得其解，明明我的幀率保持在60幀，為何我的動畫卻一直抖動？

我的場景是一個(gè)勻速直線運(yùn)動的小姐姐。

先上一個(gè) Demo

在這個(gè) Demo 中，小姐姐是按照 x 軸 10px/s，y 軸 30 px/s 進(jìn)行移動的，不過她的移動是明顯伴隨著抖動的。

這到底是怎么了呢？

解決

如果小姐姐的y軸速度是 10px/s，我們的幀率是 60f/s，計(jì)算一下：

10 / 60 = 1/6 (px/f)

實(shí)際上，的實(shí)際速度是每 6 幀才會移動 1px，這當(dāng)然會有抖動，小姐姐走一步停一會，總感覺怪怪的~

我索性把小姐姐的移動速度調(diào)快，調(diào)成 100px/s，發(fā)現(xiàn)，還是會抖動，以為高高興興能解決了這個(gè)問題，發(fā)現(xiàn)還是沒那么簡單。

既然我們能算，那我們就算一算

100 / 60 = 10/6 (px/f) = 1.666666....(px/f)

寫了個(gè)for循環(huán)，看看一秒中每一幀小姐姐都在什么位置

for(let i = 0; i < 60; i ++) {
  console.log(i*10/6)
}

輸出結(jié)果取小數(shù)點(diǎn)后兩位是這樣的：

0.00 1.67 3.33 5.00 6.67 8.33 10.00 11.67 13.33 15.00 16.67 18.33 20.00 21.67 23.33 25.00 26.67 28.33 30.00 31.67
33.33 35.00 36.67 38.33 40.00 41.67 43.33 45.00 46.67 48.33 50.00 51.67 53.33 55.00 56.67 58.33 60.00 61.67 63.33
65.00 66.67 68.33 70.00 71.67 73.33 75.00 76.67 78.33 80.00 81.67 83.33 85.00 86.67 88.33 90.00 91.67 93.33 95.00 96.67 98.33

那么作為浮點(diǎn)數(shù)，Canvas 將如何定位呢？

我們來寫一個(gè) Demo

使用 Chrome 打開，作為一個(gè)像素眼，我發(fā)現(xiàn)，小姐姐定位在 50.6px 的時(shí)候，其實(shí)就已經(jīng)被渲染到 51px 的位置。

所以在 Chrome 中，drawImage 中設(shè)置的位置最終會被四舍五入，這可能和 CSS Sub-pixel 有關(guān) 這里先不探究。

所以真正的位置其實(shí)是

 0 2 3 5 7 8 10 12 13 15 17 18 20 22 23 25 27 28 30 32
 33 35 37 38 40 42 43 45 47 48 50 52 53 55 57 58 60 62 63 65
 67 68 70 72 73 75 77 78 80 82 83 85 87 88 90 92 93 95 97 98

從數(shù)值來看，每幀移動的距離可能是 1px 也可能是 2px，小姐姐可能是在邊跳芭蕾邊走路嘍~

既然這樣，60 幀的幀率下，設(shè)置 60px/s 就可以解決問題了，嘗試了一下，真的可以！

總結(jié)

前端動畫/游戲開發(fā) requestAnimationFrame 之 鎖幀 這篇文章介紹過，在項(xiàng)目中我們可能對動畫進(jìn)行鎖幀，幀率可能是 60 或者 30，如果我們想保證渲染不抖動，在勻速直線運(yùn)動中，我們盡量保證我們設(shè)置的速度要是幀率的倍數(shù)，或者保證平均每幀移動的像素點(diǎn)是一樣的。

在 drawImage 中，不建議使用浮點(diǎn)數(shù)進(jìn)行定位。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94494.html

相關(guān)文章

  • 大話 JavaScript 動畫

    摘要：直到年，世界上第一部動畫片滑稽臉的幽默相問世。上一次視神經(jīng)傳遞的圖像將會在大腦中存留，直到下一次神經(jīng)信號到達(dá)。移動設(shè)備還是相當(dāng)慘烈，并沒有開始支持。市面上有很多動畫庫，大家可以開箱即用。有一些是針對操作的，也有一些是針對對象。 背景 138.2億年前，世界上沒有時(shí)間和空間，或許世界都不存在，在一個(gè)似有似無的點(diǎn)上，匯集了所有的物質(zhì)，它孕育著無限的能量與可能性。 宇宙大爆炸 巨大的內(nèi)力已無...

    syoya 評論0 收藏0

  • 04.Android之動畫問題

    摘要：動畫占用大量內(nèi)存，如何優(yōu)化使用動畫的注意事項(xiàng)有哪些問題這個(gè)問題主要出現(xiàn)在幀動畫中，當(dāng)圖片數(shù)量較多且圖片較大時(shí)就極易出現(xiàn)，這個(gè)在實(shí)際開發(fā)中要尤其注意，盡量避免使用幀動畫。 目錄介紹 4.0.0.1 Android中有哪幾種類型的動畫，屬性動畫和補(bǔ)間動畫有何區(qū)別？補(bǔ)間動畫和屬性動畫常用的有哪些？ 4.0.0.2 View動畫為何不能真正改變View的位置？而屬性動畫為何可以？屬性動畫是如...

    Muninn 評論0 收藏0

  • 用Canvas實(shí)現(xiàn)文本編輯器（支持藝術(shù)字渲染與動畫）

    摘要：項(xiàng)目中文字由進(jìn)行渲染。待觸發(fā)時(shí)，取消中文輸入標(biāo)記，將文字渲染到上。而其中一些有趣的細(xì)節(jié)實(shí)現(xiàn)如文本渲染，對中文筆畫分割實(shí)現(xiàn)有趣的動畫等并沒有描寫。 導(dǎo)言 目前富文本編輯器的實(shí)現(xiàn)主要有兩種技術(shù)方案：一個(gè)是利用contenteditable屬性直接對html元素進(jìn)行編輯，如draft.js；另一種是代理textarea + 自定義div + 模擬光標(biāo)實(shí)現(xiàn)。對于類似word的經(jīng)典富文本編輯器，...

    OldPanda 評論0 收藏0

  • 學(xué)習(xí)HTML5 Canvas這一篇文章就夠了

    摘要：本文作者利用一些簡單的對進(jìn)行了系統(tǒng)的總結(jié)，受益匪淺，毫不夸張的說，學(xué)習(xí)這一篇文章就夠了一簡介是新增的，一個(gè)可以使用腳本通常為在其中繪制圖像的元素。 本文作者利用一些簡單的 demo 對 Canvas 進(jìn)行了系統(tǒng)的總結(jié)，受益匪淺，毫不夸張的說，學(xué)習(xí) Canvas 這一篇文章就夠了！ 一、canvas簡介 ? 是 HTML5 新增的，一個(gè)可以使用腳本(通常為JavaScript)在其中繪...

    Eidesen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<