国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS 實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果(requestAnimFrame)

galois / 2971人閱讀

摘要：這就節(jié)省了和電力使用持續(xù)調(diào)用即可可以使用清除動(dòng)畫(huà)舉例預(yù)覽兼容性處理參考附錄原文發(fā)表在你也可以點(diǎn)擊這里瀏覽下我的其他文章歡迎和謝謝

JS 和 CSS 實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果

逛論壇的時(shí)候看到一個(gè)問(wèn)題, js 是怎么實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果的? 第一時(shí)間想到的是定時(shí)器, 后來(lái)看到有同學(xué)提到了 requestAnimationFrame, 由于之前沒(méi)有對(duì)相關(guān)方法有所了解, 于是便去查了下, 順便也記錄了下 animation 的使用.

animation(CSS) 兼容性與屬性 
猛戳這里查看兼容性

animation-name: 動(dòng)畫(huà)名稱

animation-duration: 動(dòng)畫(huà)時(shí)長(zhǎng)

animation-timing-function: 動(dòng)畫(huà)執(zhí)行方式

animation-delay: 動(dòng)畫(huà)延遲執(zhí)行時(shí)間

animation-iteration-count: 動(dòng)畫(huà)執(zhí)行次數(shù)

animation-direction: 是否反向執(zhí)行動(dòng)畫(huà)

animation-fill-mode: 動(dòng)畫(huà)執(zhí)行前后的樣式

實(shí)例

jsfiddle預(yù)覽

.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  position: absolute;
  left: 0;
  top: 0;
  animation: test 3s linear 2s infinite;
}
@keyframes test {
  from {
  }
  to {
    width: 50px;
    height: 50px;
    background-color: red;
    opacity: 0.5;
    left: 500px;
    top: 500px;
  }
}
requestAnimationFrame(JS) 兼容性與基本概念 
猛戳這里查看兼容性

優(yōu)勢(shì)：

瀏覽器可以優(yōu)化并行的動(dòng)畫(huà)動(dòng)作，更合理的重新排列動(dòng)作序列，并把能夠合并的動(dòng)作放在一個(gè)渲染周期內(nèi)完成，從而呈現(xiàn)出更流暢的動(dòng)畫(huà)效果

一旦頁(yè)面不處于瀏覽器的當(dāng)前標(biāo)簽，就會(huì)自動(dòng)停止刷新。這就節(jié)省了CPU、GPU和電力

使用：

持續(xù)調(diào)用 requestAnimFrame 即可
可以使用 cancelAnimationFrame 清除動(dòng)畫(huà)
舉例

jsfiddle預(yù)覽

#anim {
  position: absolute;
  left: 0px;
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: aqua;
  color: white;
  border-radius: 10px;
  padding: 1em;
}
 Click here to start animation
// 兼容性處理
window.requestAnimFrame = (function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback, element) {
      window.setTimeout(callback, 1000 / 60)
    }
  )
})()

var elem = document.getElementById("anim")
var startTime = undefined

function render(time) {
  time = Date.now()
  if (startTime === undefined) {
    startTime = time
  }
  elem.style.left = ((time - startTime) / 10) % 300 + "px"
  elem.style.top = ((time - startTime) / 10) % 300 + "px"
  elem.style.borderRadius = ((time - startTime) / 10) % 300 + "px"
  elem.style.opacity = Math.floor((time - startTime / 100)) % 2 === 0 ? 1 : 0.3
}

elem.onclick = function() {
  (function animloop() {
    render()
    requestAnimFrame(animloop, elem)
  })()
}

參考

MDN
requestanimationframe

附錄

原文發(fā)表在github,你也可以點(diǎn)擊這里瀏覽下我的其他文章,歡迎star和follow,謝謝?。。?/p>

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94450.html

相關(guān)文章

  • JS 實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果(requestAnimFrame)

    摘要：這就節(jié)省了和電力使用持續(xù)調(diào)用即可可以使用清除動(dòng)畫(huà)舉例預(yù)覽兼容性處理參考附錄原文發(fā)表在你也可以點(diǎn)擊這里瀏覽下我的其他文章歡迎和謝謝 JS 和 CSS 實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果 逛論壇的時(shí)候看到一個(gè)問(wèn)題, js 是怎么實(shí)現(xiàn)持續(xù)的動(dòng)畫(huà)效果的? 第一時(shí)間想到的是定時(shí)器, 后來(lái)看到有同學(xué)提到了 requestAnimationFrame, 由于之前沒(méi)有對(duì)相關(guān)方法有所了解, 于是便去查了下, 順便也記錄...

    Jason 評(píng)論0 收藏0

  • JS—動(dòng)畫(huà)緩動(dòng)—tween.js

    摘要：動(dòng)畫(huà)運(yùn)動(dòng)算法線性勻速運(yùn)動(dòng)效果二次方的緩動(dòng)三次方的緩動(dòng)四次方的緩動(dòng)五次方的緩動(dòng)正弦曲線的緩動(dòng)指數(shù)曲線的緩動(dòng)圓形曲線的緩動(dòng)指數(shù)衰減的正弦曲線緩動(dòng)超過(guò)范圍的三次方緩動(dòng)指數(shù)衰減的反彈緩動(dòng)。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

    wangxinarhat 評(píng)論0 收藏0

  • 面試分享：2018阿里巴巴前端面試總結(jié)(題目+答案 30題)

    摘要：使用實(shí)現(xiàn)一個(gè)持續(xù)的動(dòng)畫(huà)效果最開(kāi)始的思路是用定時(shí)器實(shí)現(xiàn)，最后沒(méi)有想的太完整，面試官給出的答案是用。參考鏈接封裝一個(gè)函數(shù)，參數(shù)是定時(shí)器的時(shí)間，執(zhí)行回調(diào)函數(shù)。規(guī)范規(guī)定，每個(gè)模塊內(nèi)部，變量代表當(dāng)前模塊。 1、使用css實(shí)現(xiàn)一個(gè)持續(xù)的動(dòng)畫(huà)效果———————————————————————————————————————————————————————— animation:mymove 5s i...

    lanffy 評(píng)論0 收藏0

  • 一款輪播插件的誕生

    摘要：同理，向左輪播至第一張圖片時(shí)，也會(huì)取消后輪播圖定位至第六張圖片而后再度開(kāi)啟。續(xù)判斷是否開(kāi)啟自動(dòng)輪播，如是則自動(dòng)輪播加入事件監(jiān)聽(tīng)監(jiān)聽(tīng)鼠標(biāo)移入事件，當(dāng)鼠標(biāo)移入的時(shí)候，停止自動(dòng)滾動(dòng)。監(jiān)聽(tīng)左右按鈕的點(diǎn)擊，執(zhí)行上一張，下一張圖的輪播效果。 1. 前言 早在幾個(gè)月前，就想自己動(dòng)手寫(xiě)個(gè)輪播圖組件，因此也看了許多文章，斷斷續(xù)續(xù)過(guò)了幾個(gè)月，今天終于有時(shí)間騰出手來(lái)給此插件做個(gè)總結(jié)，因此有了這篇文章。話不多...

    qianfeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

galois

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<