requestanimationframe用法一二（总结别人的）

最新推荐文章于 2024-05-23 18:15:18 发布
最新推荐文章于 2024-05-23 18:15:18 发布
阅读量389 收藏
点赞数
文章标签： javascript python ui ViewUI
原文链接：https://my.oschina.net/leonaLily/blog/464516
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。 

requestAnimationFrame(callback)//callback为回调函数

一个简单的例子

模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。

为了演示方便加了一个运行按钮（看不到例子请刷新）。 

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>

复制代码

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);
下面是由Paul Irish及其他贡献者放在GitHub Gist上的代码片段，用于在浏览器不支持requestAnimationFrame情况下的回退，回退到使用setTmeout的情况。当然，如果你确定代码是工作在现代浏览器中，下面的代码是不必的。 

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };
    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());
CSS3支持的动画效果有限

由于CSS3动画的贝塞尔曲线是一个标准3次方曲线（详见：贝塞尔曲线与CSS3动画、SVG和canvas的基情），因此，只能是：Linear,Sine,Quad,Cubic,Expo等，但对于Back,Bounce等缓动则只可观望而不可亵玩焉。

下面这张图瞅瞅，那些波澜壮阔的曲线都是CSS3木有的~~

先给大家普及下缓动(Tween)知识吧：

  • Linear：无缓动效果
  • Quadratic：二次方的缓动（t^2）
  • Cubic：三次方的缓动（t^3）
  • Quartic：四次方的缓动（t^4）
  • Quintic：五次方的缓动（t^5）
  • Sinusoidal：正弦曲线的缓动（sin(t)）
  • Exponential：指数曲线的缓动（2^t）
  • Circular：圆形曲线的缓动（sqrt(1-t^2)）
  • Elastic：指数衰减的正弦曲线缓动
  • 超过范围的三次方缓动（(s+1)*t^3 – s*t^2）
  • 指数衰减的反弹缓动

每个效果都分三个缓动方式，分别是（可采用后面的邪恶记忆法帮助记忆）：

  • easeIn：从0开始加速的缓动，想象OOXX进去，探路要花时间，因此肯定是先慢后快的；
  • easeOut：减速到0的缓动，想象OOXX出来，肯定定先快后慢的，以防掉出来；
  • easeInOut：前半段从0开始加速，后半段减速到0的缓动，想象OOXX进进出出，先慢后快然后再慢。

每周动画效果都有其自身的算法。我们都知道jQuery UI中就有缓动，As脚本也内置了缓动，其中的运动算法都是一致的。我特意弄了一份，哦呵呵呵~~（因为较高，滚动显示），或GitHub访问： 

/*
 * Tween.js
 * t: current time（当前时间）
 * b: beginning value（初始值）
 * c: change in value（变化量）
 * d: duration（持续时间）
*/
var Tween = {
    Linear: function(t, b, c, d) { return c*t/d + b; },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c *(t /= d)*(t-2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t-2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t/d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
            return c / 2*((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t*t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * ((t = t/d - 1) * t * t*t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2*((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                s = p / 4;
                a = c;
            } else {
                s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                s = p/(2*Math.PI) * Math.asin(c/a);
            }
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            var s;
            if (t==0) return b;
            if ((t /= d / 2) == 2) return b+c;
            if (typeof p == "undefined") p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                s = p / (2  *Math.PI) * Math.asin(c / a);
            }
            if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158; 
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) {
                return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            } else {
                return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
}
Math.tween = Tween;
看个球的动画效果 http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html

相关源代码可以参见demo页面源代码 

funFall = function() {
    var start = 0, during = 100;
    var _run = function() {
         start++;
         var top = Tween.Bounce.easeOut(start, objBall.top, 500 - objBall.top, during);
         ball.css("top", top);
         shadowWithBall(top); // 投影跟随小球的动 if (start < during) requestAnimationFrame(_run);
    };
    _run();
};

转载于:https://my.oschina.net/leonaLily/blog/464516

weixin_34414650
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BOM系列第二篇之定时器requestAnimationFrame
09-01
使用requestAnimationFrame的方法非常简单，只需传入一个回调函数，它将在下一帧开始前执行： ```javascript var requestID = requestAnimationFrame(callback); ``` 若要取消已安排的动画，可以使用...
requestAnimationFrame的用法
weixin_42560424的博客
06-27 1315
85. requestAnimationFrame的用法 requestAnimationFrame 是一个用于在浏览器中执行动画的 API。它通过在浏览器的重绘阶段调用指定的回调函数，实现流畅且高效的动画效果。在本文中，我们将详细介绍 requestAnimationFrame 的用法，并给出一些代码示例。 什么是 requestAnimationFrame？ requestAnimationFrame 是浏览器提供的 JavaScript API，用于优化动画的执行。与使用定时器（如 setTimeou
[Js进阶]requestAnimationFrame应用
SCUhzs
04-12 2466
[Js进阶]requestAnimationFrame应用
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-08 2636
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
一文了解 requestAnimationFrame
发果叁
02-27 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
requestAnimationFrame使用
weixin_48888726的博客
02-03 737
requestAnimationFrame相对定时器的优势,简单介绍以及使用方法
requestAnimationFrame是什么？介绍 如何使用？适用场景？有哪些缺点和优点，兼容性怎么样？
努力的鋜
11-14 149
requestAnimationFrame是什么？介绍 如何使用？适用场景？有哪些缺点和优点，兼容性怎么样？
使用requestAnimationFrame实现js动画性能好
12-12
使用requestAnimationFrame实现js动画性能好。先给大家简单介绍下requestAnimationFrame比起setTimeout、setInterval有哪些优势？ 示例一： requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点： ...
stepperjs:一个微小的requestAnimationFrame包装器，以提高可用性
05-15
一个很小的requestAnimationFrame包装器，用于提高可用性。 - 安装 npm $ npm install --save stepperjs 用法 巴别塔 import Stepper from 'stepperjs' ; import linear from 'stepperjs/dist/easings/linear' ; ...
requestAnimationFrame 请求动画帧
别告诉我有Bug
04-02 3407
requestAnimationFrame动画请求帧-----它是一个浏览器的宏任务。 requestAnimationFrame的用法与setTimeout、setInterval很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
requestAnimationFrame用法及说明
m0_53428367的博客
01-26 548
requestAnimationFrame用法及说明
动画requestAnimationFrame实例
05-14
动画requestAnimationFrame实例
requestAnimationFrame，读懂这篇文章就够了
知之为知之，不知为不知
05-03 1194
requestAnimationFrame 请求动画帧； 它是一个浏览器的宏任务； requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
【湫】requestAnimationFrame基本用法
weixin_51083890的博客
06-28 1025
提到动画效果，很多人会想到transition、animation、canvas，亦或者用js实现动画效果那么requestanimationframe和他们有什么不一样的呢？transition：过渡，只能控制开始和结束时的动画效果，过程中间是无法干预的，transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。animation：真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态
requestAnimationFrame用法解析
最新发布
m0_45093055的博客
05-23 54
这里为了讲解requestAnimationFrame的用法，而举例的处理大数据的方法，但是实际项目中，处理大数据的解决方案还是应用虚拟列表的形式。我的发！被后端五万条数据爆破我是怎么处理的听说你还不会虚拟列表？原谅我来晚了其它参考文章前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比。
requestAnimationFrame：循环动画效果
席木木的博客
10-16 911
window.requestAnimationFrame()方法，参考MDN的介绍，其作用是：用于告诉浏览器，希望它执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。这意味着，该方法需要传入一个回调函数作为参数，并且该回调函数会在浏览器下一次重绘之前执行。
requestAnimationFrame
热门推荐
zxl1990_ok的博客
11-11 2万+
requestAnimationFrame window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
uni中requestAnimationFrame的使用
FantasyWeirdo的博客
01-21 3411
<template> </template> <script module="animate" lang="renderjs"> export default { methods: { animate(){ // 动画... requestAnimationFrame(() => { this.animate() }) } } } </script> 在官方示例（hello uniapp
【微信小程序开发】（四）Uni-app 从入门到放弃
谁说学美术将来只能卖画了，我也有自己的梦想。
06-23 557
也许uni-app 对于 开发小程序矩阵（百度小程序 支付宝小程序 快手小程序） 等是方便的。先列举一下小程序的缺陷: 解决小程序本身的问题已经够令人呕吐了，然后在当你遇到uni-app开发的小程序基础库只停留在2.14 我想问难道uni app编译的支持的基础库还有限制吗？ 问了社区（好几十个QQ群都一样）也是很垃圾 一点不活跃根本没技术人员处理。所以，放弃了，微信小程序就用微信小程序的写吧，将来搞别的小程序了再说。这种想通一各种语言的框架，还是不太现实。......
requestAnimationFrame 使用方法
04-28
requestAnimationFrame 是一个浏览器提供的 API，用于优化动画渲染效果，其使用方法如下： 1. 创建一个函数，用于执行动画渲染操作。 2. 使用 requestAnimationFrame 函数来循环调用该函数，使得动画不断地渲染。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值