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()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...
随机推荐
- chrome无法拖拽离线安装CRX格式插件解决方法
原文:http://chromecj.com/utilities/2018-09/1525.html 摘要 : chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法 有一部分网友反映子 ...
- VMware1设备与主机共享网络的问题
问题的提出: 最近需要用到VMware1设备来配置网络,顺便将VMware1设备与主机进行共享网络,这样master就能直接访问网络了,但是原本以为直接在wlan设备上选择网络共享就行了,但是却没法收 ...
- linux6查看时间同步服务器的匹配源
当服务器时间与设定好的同步时间源的时间有差异的时候,一般都需要先查看本机的时间同步服务功能是否在正常的运转,以及同步的时间源是哪里,在这里为大家提供一个检查时间用的命令. linux/centos 6 ...
- nodejs mysql 连接数据库
1.设计数据库 2.设计数据库表 3.下载MySQL模块 npm install --save mysql 4.编写代码 const mysql=require('mysql'); //1.连接 // ...
- 移动端布局 + iscroll + 滚动事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- jquery获取select选中项 自定义属性的值
<select id="serialNo" > <option value=''1' data-id="001">第一次</opt ...
- 二进制中1的个数(Java实现)
问题: 输入一个整数,求其二进制中1的个数 看到这个问题,我们应该想到数的位运算: 解法一:我们每次将此数&1 ,如果结果等于1,证明此数的最后一位是1,,count++: 然后在将数右移一位 ...
- Mac OS 快速查询技巧
今天不知道按到什么快捷键弹出了这个搜索框,试了试很强大 后来查了才知道要双击键盘上的key (⌘)就会弹出,这个搜索很强大,要先安装QQ,QQ自带的 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- JavaScript笔记 – 程序语法设计
一.基础语法设计 JavaScript是可以与HTML标记语言混合.用于网页交互式的解释型脚本语言.由国际标准ECMAScript提供核心语言功能.文档对象模型(DOM)提供访问和操作网页内容的方法和 ...
- jvm-多线程
多线程的目的 为什么要使用多线程?可以简单的分两个方面来说: 在多个cpu核心下,多线程的好处是显而易见的,不然多个cpu核心只跑一个线程其他的核心就都浪费了: 即便不考虑多核心,在单核下,多线程也是 ...