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,谢谢！！！