html部分

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
<script>
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) {
setTimeout(function(){
requestAnimationFrame(step);
},50); }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);//调用方法
}, false);
</script>

简单的requestAnimationFrame动画的更多相关文章

  1. requestAnimationFrame 动画

    requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

    1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...

  4. Android简单逐帧动画Frame的实现(二)

    Android简单逐帧动画Frame的实现   Android简单逐帧动画Frame的实现 1.逐帧动画 即是通过播放预先排序好的图片来实现动态的画面,感觉像是放电影. 2.实现步骤: 1. 在工程里 ...

  5. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  6. requestAnimationFrame动画方法

    一.动画方式 在HTML5/CSS3时代,实现动画的方式有许多种: 你可以用css3的animation和@keyframes: 可以用css3的transition: 还可以用原始的setTimeo ...

  7. iOS摇一摇功能、震动功能、简单的摇动动画、生成二维码图片与发送短信等几个功能

    有一个开锁的功能,具体的需求就类似于微信的"摇一摇"功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇 相对这是最 ...

  8. Android简单逐帧动画Frame的实现(三)

    android之动画(三)通过AnimationDrawable控制逐帧动画     android与逐帧动画: 效果图: 当我们点击按钮时,该图片会不停的旋转,当再次点击按钮时,会停止在当前的状态. ...

  9. 自己定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,&quot;掏粪男孩Gif&quot;顺便再提提onWindowFocusChanged)

    转载请注明出处:王亟亟的大牛之路 之前在绘画的过程中提到了静态的旋转啊,缩放啊,平移等一些效果.那么自己定义的View当然也有动态的效果也就是我们的Animation.经常使用的有三种 View An ...

随机推荐

  1. PAT甲级——A1056 Mice and Rice

    Mice and Rice is the name of a programming contest in which each programmer must write a piece of co ...

  2. SecondaryNameNode 理解

    NameNode将对文件系统的改动追加保存到本地文件系统上的一个日志文件(edits).当一个NameNode启动时,它首先从一个映像文件(fsimage)中读取HDFS的状态,接着应用日志文件中的e ...

  3. java 集合存储对象且根据对象属性排序

    方法一:根据java1.8lambda表达式进行排序 Comparator<RateInfo> comparator = (t1, t2) -> t1.getRateCode().c ...

  4. Codeforces 142B(二分染色、搜索)

    要点 会发现本质上棋盘分成了若干个独立集,本集合内的点放不放棋子并不影响其他集合内的 集合的划分方式就是满棋盘跳马步直到全跳过了,然后每个集合就分成两队,我们选人多的那队放棋子,人少那队当禁区 con ...

  5. ionic4环境搭建

    1.下载安装node 下载地址:https://nodejs.org/en/ 安装后,win+R输入cmd,回车运行cmd命令窗口,输入下面的命令验证node是否安装成功: 如果出现上图所示,则证明n ...

  6. 百度地图JavaScript API申请密钥注意要点

    1.应用类型:浏览器端 2.启用服务:Javascript API要勾选 3.IP白名单:*即可

  7. bzoj 4241 历史研究——分块(区间加权众数)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 套路:可以大力预处理,如果求区间加权众数,可以预处理i~j块(或 j 位置)的最大值, ...

  8. 关系型数据库和nosql非关系型数据库

    快下班了.突然和同事聊起了node+mongdb,因为我们这里的项目没有mongdb,就问后端的同事,我们'爱装逼'的后端的同事让我们先自己学习一下什么关系型数据库和非关系型数据库.一顿百度查询了解下 ...

  9. 20190807-RP-Explosion

    如题,RP爆发后爆炸了. 话说在七夕这天考试? 那么? 黑暗又来临了? 没有人见过那一幕. 在如漆般胶着的黑暗中, Struggle?Dying? 用鲜血浇灌花朵,用死亡迎接明天. 考试过程: 看看三 ...

  10. 深入了解MVC(转)

    MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性.可移植性,代码的可 ...