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;
  }
}

<div class="box"></div>

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;
}

<div id="anim"> Click here to start animation</div>

// 兼容性處置懲罰
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,感謝！！！