JS 实现持续的动画效果(requestAnimFrame)

Jason 发布于2019-08-29 15:07 / 1082人阅读

摘要：这就节省了和电力使用持续调用即可可以使用清除动画举例预览兼容性处理参考附录原文发表在你也可以点击这里浏览下我的其他文章欢迎和谢谢

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 消失动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113113.html

JS 实现持续的动画效果(requestAnimFrame)

摘要：这就节省了和电力使用持续调用即可可以使用清除动画举例预览兼容性处理参考附录原文发表在你也可以点击这里浏览下我的其他文章欢迎和谢谢 JS 和 CSS 实现持续的动画效果逛论坛的时候看到一个问题, js 是怎么实现持续的动画效果的? 第一时间想到的是定时器, 后来看到有同学提到了 requestAnimationFrame, 由于之前没有对相关方法有所了解, 于是便去查了下, 顺便也记录...

galois 2019-08-22 16:33 评论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