JS 實現持續的動畫效果(requestAnimFrame)

galois 發布于2019-08-22 16:33 / 2977人閱讀

摘要：這就節省了和電力使用持續調用即可可以使用清除動畫舉例預覽兼容性處理參考附錄原文發表在你也可以點擊這里瀏覽下我的其他文章歡迎和謝謝

JS 和 CSS 實現持續的動畫效果

逛論壇的時候看到一個問題, js 是怎么實現持續的動畫效果的? 第一時間想到的是定時器, 后來看到有同學提到了 requestAnimationFrame, 由于之前沒有對相關方法有所了解, 于是便去查了下, 順便也記錄了下 animation 的使用.

animation(CSS) 兼容性與屬性

猛戳這里查看兼容性

animation-name: 動畫名稱

animation-duration: 動畫時長

animation-timing-function: 動畫執行方式

animation-delay: 動畫延遲執行時間

animation-iteration-count: 動畫執行次數

animation-direction: 是否反向執行動畫

animation-fill-mode: 動畫執行前后的樣式

實例

jsfiddle預覽

.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) 兼容性與基本概念

猛戳這里查看兼容性

優勢：

瀏覽器可以優化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果

一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。這就節省了CPU、GPU和電力

使用：

持續調用 requestAnimFrame 即可

可以使用 cancelAnimationFrame 清除動畫

舉例

jsfiddle預覽

#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

附錄

原文發表在github,你也可以點擊這里瀏覽下我的其他文章,歡迎star和follow,謝謝！！！

GPU云服務器云服務器 js實現f11的效果 js動畫效果 js 漂浮動畫效果 js 消失動畫效果

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

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

JS 實現持續的動畫效果(requestAnimFrame)

摘要：這就節省了和電力使用持續調用即可可以使用清除動畫舉例預覽兼容性處理參考附錄原文發表在你也可以點擊這里瀏覽下我的其他文章歡迎和謝謝 JS 和 CSS 實現持續的動畫效果逛論壇的時候看到一個問題, js 是怎么實現持續的動畫效果的? 第一時間想到的是定時器, 后來看到有同學提到了 requestAnimationFrame, 由于之前沒有對相關方法有所了解, 于是便去查了下, 順便也記錄...

Jason 2019-08-29 15:07 評論0 收藏0
JS—動畫緩動—tween.js

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

wangxinarhat 2019-08-26 12:11 評論0 收藏0
面試分享：2018阿里巴巴前端面試總結(題目+答案 30題)

摘要：使用實現一個持續的動畫效果最開始的思路是用定時器實現，最后沒有想的太完整，面試官給出的答案是用。參考鏈接封裝一個函數，參數是定時器的時間，執行回調函數。規范規定，每個模塊內部，變量代表當前模塊。 1、使用css實現一個持續的動畫效果———————————————————————————————————————————————————————— animation:mymove 5s i...

lanffy 2019-08-22 15:02 評論0 收藏0
一款輪播插件的誕生

摘要：同理，向左輪播至第一張圖片時，也會取消后輪播圖定位至第六張圖片而后再度開啟。續判斷是否開啟自動輪播，如是則自動輪播加入事件監聽監聽鼠標移入事件，當鼠標移入的時候，停止自動滾動。監聽左右按鈕的點擊，執行上一張，下一張圖的輪播效果。 1. 前言早在幾個月前，就想自己動手寫個輪播圖組件，因此也看了許多文章，斷斷續續過了幾個月，今天終于有時間騰出手來給此插件做個總結，因此有了這篇文章。話不多...

qianfeng 2019-08-23 14:21 評論0 收藏0