请求动画帧
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属性值