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. properties配置文件的基本操作

    对properties的基本操作 public class PropertiesUtil {// 是否是文件public static boolean isFile = false;// 路径publ ...

  2. webapi JWT 认证

    第一步 使用ng安装JWT组件 第二步 编写登录和生成token代码 byte[] key = Encoding.UTF8.GetBytes("123456789aaaaaaa") ...

  3. one-hot encoding与哑变量的区别

    one-hot encoding与哑变量的区别 one-hot比哑变量的特征位多一位,即哑变量是精简版的one-hot,即在线性回归中用截距项来表示最后一维,但由于最初很难分辨特征的主次关系,且机器学 ...

  4. Java——package和import关键字

    1.8 package和import关键字 1.8.1 package 包其实就是目录,特别是项目比较大,java 文件特别多的情况下,我们应该分目录管理,在java 中称为分包管理,包名称通常采用小 ...

  5. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  6. flume配置参数的意义

    1.监控端口数据: flume启动: [bingo@hadoop102 flume]$ bin/flume-ng agent --conf conf/ --name a1 --conf-file jo ...

  7. mysql在win系统dos 安装版配置步骤详解

    1.准备工作 下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip,解压缩到相关目录,如:d:\ mysql-noinstall-5.1.53-win32.这 ...

  8. ARC032 D - アットコーダーモンスターズ

    https://arc032.contest.atcoder.jp/tasks/arc032_4# 切比雪夫距离,放在3000*3000的平面上, 一个集合就是恰好包含这个集合的矩形,价值是矩形长.宽 ...

  9. [Nowcoder] 中位数

    题意:给定一个序列和一个长度,求序列中子区间长度\(>=len\)的最大的中位数. 中位数定义:if\((len\%2) num = {len + 1} \over {2}\),else \(n ...

  10. 13. DMA

    1. DMA简介 直接存储器存取(Dma)是为了提供高速数据传输外围设备和内存以及内存到内存.数据可以通过dma快速移动.没有任何CPU操作.这使得CPU资源可以用于其他操作. 这两个DMA控制器总共 ...