function Animator(duration, progress) {
this.duration = duration;
this.progress = progress;
this.next = true;
}
Animator.prototype = {
constructor: Animator,
start: function (finished) {
var startTime = new Date().getTime();
var duration = this.duration,
self = this,
timeOut = 0;
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var start = 0,
finish = 0;
window.setTimeout(function () {
start = +new Date();
callback(start);
finish = +new Date();
timeOut = 1000 / 300 - (finish - start);
}, timeOut);
};
} window.requestAnimationFrame(function step() {
var p = (new Date().getTime() - startTime) / duration;
self.progress(p, p);
if (p >= 1.0) {
self.progress(1.0, 1.0);
self.next = false;
finished();
} if (self.next) {
window.requestAnimationFrame(step);
} });
},
stop: function () {
this.next = false;
}
};

requestAnimationFrame动画封装的更多相关文章

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

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

  2. requestAnimationFrame 动画

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

  3. iOS_SN_push/pop转场动画封装和一般动画封装

    封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...

  4. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  5. requestAnimationFrame动画方法

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

  6. iOS转场动画封装

    写在前面 iOS在modal 或push等操作时有默认的转场动画,但有时候我们又需要特定的转场动画效果,从iOS7开始,苹果就提供了自定义转场的API,模态推送present和dismiss.导航控制 ...

  7. JS——缓慢动画封装

    在知道如何获取内嵌式和外链式的标签属性值之后,我们再次封装缓慢动画: 单个属性 <!DOCTYPE html> <html> <head lang="en&qu ...

  8. js动画--封装透明度

    这一章我将讲述一些如何将透明度的变化也封装到调用函数中,对于前面几节课的介绍,已经将基本的属性封装到函数中了,宽,长等属性.关于透明度的变化还是有一点区别的,这一章我将封装透明度 先创建一个div & ...

  9. Window.requestAnimationFrame()动画更新

    概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...

随机推荐

  1. js查询字符串是否包含指定字符的函数indexOf

    今天用到了js的函数indexOf来查看字符串中是否包含指定的字符,最开始没注意看,就拿来用了,结果用的时候才发现,IndexOf的返回值原来是字符在字符串中的index,返回值有0.1等等,如果没有 ...

  2. 项目到上传Gitee

    1.码云上创建一个项目 testgit (名字随你) 2.本地创建一个文件夹D:/testgit,然后使用git bash 3.cd 到本地文件夹中D:/testgit, 4.使用 git init ...

  3. Android中的Parcel机制(下)

    上一篇中我们透过源码看到了Parcel背后的机制,本质上把它当成一个Serialize就可以了,只是它是在内存中完成的序列化和反序列化,利用的是连续的内存空间,因此会更加高效. 我们接下来要说的是Pa ...

  4. Elasticsearch集群状态查看命令

    _cat $ curl localhost:9200/_cat=^.^=/_cat/allocation/_cat/shards/_cat/shards/{index}/_cat/master/_ca ...

  5. BZOJ 4455: [Zjoi2016]小星星(容斥+树形dp)

    传送门 解题思路 首先题目中有两个限制,第一个是两个集合直接必须一一映射,第二个是重新标号后,\(B\)中两点有边\(A\)中也必须有.发现限制\(2\)比较容易满足,考虑化简限制\(1\).令\(f ...

  6. bzoj 2257 (JSOI 2009) 瓶子与燃料

    Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子来换.jyy 的飞船上共有 N个瓶子(1<=N& ...

  7. 暑假集训test-8-31(pm)

    以为可以AK,结果t3没有调出来,然后被林巨踩了. everyday被踩,很开心. 林巨真的好巨啊,这么多天已经总计虐我75分了. 1.玩具装箱 第一眼还以为是那道斜率优化dp,结果是个签到水题. / ...

  8. 信息安全-技术-Web:cookie

    ylbtech-信息安全-技术-Web:cookie Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密 ...

  9. ionic:temple

    ylbtech-ionic:temple 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylb ...

  10. flutter 插件

    flutter_spinkit loading动画