javascript--24-速度版运动框架

最新推荐文章于 2021-03-14 18:05:38 发布

lxhby520

最新推荐文章于 2021-03-14 18:05:38 发布

阅读量203

点赞数 1

分类专栏： sublime javascript

本文链接：https://blog.csdn.net/lxhby520/article/details/80583731

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

sublime

3 篇文章 0 订阅

订阅专栏

请求动画帧

setTimeout(fn,1000)缺点是不准时会受到页面的影响当代码多的时候就会一卡一卡

requestAnimationFrame 请求动画帧

requestAnimationFrame(function () {
     console.log(1);
 })

与setTimeout类似，但是不能设置时间根据浏览器刷新频率执行重绘多少次就执行多少次

var date =new Date();
  var n=0;
  function animationFps(){
      if (new Date().getTime()- date >= 1000){
          console.log(n)
      }else{
          n++;
          requestAnimationFrame(animationFps);
      }
  }
  animationFps();

结果打印是61 屏幕1秒刷新次数

cancelAnimationFrame() 删除动画帧传的是动画帧的变量名 ie9及以下不支持

var timer,n=0;
  fn();
  function fn() {
      console.log(n++);
      requestAnimationFrame(fn);
  }

这样就会一直打印不会停下来

function fn() {
      console.log(n++);
      timer =requestAnimationFrame(fn);
  }
  document.onclick =function () {
      cancelAnimationFrame(timer);
  }

停止打印

兼容写法

window.requestAnimationFrame =window.requestAnimationFrame||function (callback) {
      return setTimeout(callback,1000/60);
  }

请求动画帧兼容

window.cancelAnimationFrame=window.cancelAnimationFrame||clearTimeout;

取消动画帧

速度版运动框架

function animation(ele,attr,value,step,callback) { } ele是元素节点 attr是属性值 value是具体数值 step是步长,每次要改变的数值 callback是回掉函数

<style>
div{
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box =document.querySelector(".box");
animation(box,"width",500,10);
function animation(ele,attr,value,step,callback) {
    var start = parseFloat(getstyle(ele)[attr]);
    function fn() {
        if (start>=value){
            start=value
        }else{
            start+=step;
            ele.style[attr]=start+"px";
            requestAnimationFrame(fn);
        }
    }
    fn();
}
//获取css属性值
function getstyle(ele) {
    return ele.currentStyle||getComputedStyle(ele);
}
</script>

刷新的话就会执行缺点是只能是增加这个方向不能反方向

var box =document.querySelector(".box");

animation(box,"width",500,10);
function animation(ele,attr,value,step,callback) {
    var direction =start>value;//判断方向
    if (direction){
        step/=-1;
    }
    var start = parseFloat(getstyle(ele)[attr]);
    function fn() {
        if (direction?start<=value:start>=value){//当方向改变时判断也要相应改变
            start=value;
            ele.style[attr]=start+"px";
        }else{
            start+=step;
            ele.style[attr]=start+"px";
            requestAnimationFrame(fn);
        }
    }
    fn();
}
//获取css属性值
function getstyle(ele) {
    return ele.currentStyle||getComputedStyle(ele);
}

可以增加或减少两个方向

var box =document.querySelector(".box");
animation(box,"width",500,10,function () {
    animation(this,"height",300,10,function () {
        animation(this,"marginLeft",100,10)
    })
});
function animation(ele,attr,value,step,callback) {
    var direction =start>value;
    if (direction){
        step/=-1;
    }
    var start = parseFloat(getstyle(ele)[attr]);
    function fn() {
        if (direction?start<=value:start>=value){
            start=value;
            ele.style[attr]=start+"px";
            callback&&callback.call(ele);
        }else{
            start+=step;
            ele.style[attr]=start+"px";
            requestAnimationFrame(fn);
        }
    }
    fn();
}
//获取css属性值
function getstyle(ele) {
    return ele.currentStyle||getComputedStyle(ele);
}

可以连续改变多个css属性值

lxhby520

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript--24-速度版运动框架

请求动画帧setTimeout(fn,1000)缺点是不准时会受到页面的影响当代码多的时候就会一卡一卡requestAnimationFrame 请求动画帧requestAnimationFrame(function () { console.log(1); })与setTimeout类似，但是不能设置时间根据浏览器刷新频率执行重绘多少次就执行多少次var date =new ...
复制链接

扫一扫