requestAnimationFrame动画封装
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动画封装的更多相关文章
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- requestAnimationFrame 动画
requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...
- iOS_SN_push/pop转场动画封装和一般动画封装
封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- requestAnimationFrame动画方法
一.动画方式 在HTML5/CSS3时代,实现动画的方式有许多种: 你可以用css3的animation和@keyframes: 可以用css3的transition: 还可以用原始的setTimeo ...
- iOS转场动画封装
写在前面 iOS在modal 或push等操作时有默认的转场动画,但有时候我们又需要特定的转场动画效果,从iOS7开始,苹果就提供了自定义转场的API,模态推送present和dismiss.导航控制 ...
- JS——缓慢动画封装
在知道如何获取内嵌式和外链式的标签属性值之后,我们再次封装缓慢动画: 单个属性 <!DOCTYPE html> <html> <head lang="en&qu ...
- js动画--封装透明度
这一章我将讲述一些如何将透明度的变化也封装到调用函数中,对于前面几节课的介绍,已经将基本的属性封装到函数中了,宽,长等属性.关于透明度的变化还是有一点区别的,这一章我将封装透明度 先创建一个div & ...
- Window.requestAnimationFrame()动画更新
概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...
随机推荐
- 2019-10-15-从以前的项目格式迁移到-VS2017-新项目格式
title author date CreateTime categories 从以前的项目格式迁移到 VS2017 新项目格式 lindexi 2019-10-15 14:9:27 +0800 20 ...
- 面向对象oop 和类
面向对象与面向过程的区别 面向对象:面向对象的思维模式说白了就是分类思维模式.思考问题首先会解决问题需要哪些分类,然后对这些分类进行单独思考.最后,才对某个分类下的细节进行面向过程的思索 自我理解(领 ...
- thinkphp 防止XSS(跨站脚本攻击)
XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...
- NOIp2018集训test-9-16(联考二day2)
T1旋转子段 一开始脑袋抽了花了近一个小时写了个跟这题毫无关系的莫名其妙的代码,一急代码就各种bug,最后t1就花了一个半小时多,然后后面时间不太够了,考得稀烂. 因为每个数存在唯一的中心使得绕这个中 ...
- NX二次开发-NXOpen中Point3d类型转换成point类型
NX9+VS2012 #include <NXOpen/NXObject.hxx> #include <NXOpen/Part.hxx> #include <NXOpen ...
- NX二次开发-UFUN输入对象tag获得part名字UF_OBJ_ask_owning_part
NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_part.h> #include < ...
- [JZOJ 5817] 抄代码
题意: 给定2T个串,带修的判断两个串是否按规则一样?? 思路: 两个串是"抄袭的"肯定就是: 1.长度一样. 2.特殊字符位置一样 3.对于每个\(x\)在两个串中出现位置一样, ...
- CSS:CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
- 去除vim ^M符号
来自: https://zhidao.baidu.com/question/267905868.html 有两种情况,会出现打开的文件都显示^M符号:1. vim被配置为fileformat=unix ...
- XDTIC2019招新笔试题 + 官方解答
腾讯创新俱乐部2019年招新笔试试题 [1] 小宗学长正在努力学习数论,他写下了一个奇怪的算式: \[ 2019^{2018^{2017^{\dots^{2^1}}}} \] 算式的结果一定很大, ...