首先,传统做动画的方式有以下几种:

1. css的transition过度动画

2. css的animation动画

3. 使用setTimeout或setInterval模拟动画贞(js执行机制决定了并非严格意义上的动画贞)

定时器模拟动画又分为 :(1)速度版运动   (2)时间版运动

4.使用requestAnimationFrame

本文主要讲的就是requestAnimationFrame,requestAnimationFrame:即在浏览器的帧频下,每隔16.7ms(官方),执行一次动画,基本不会掉帧,可以保证动画的流畅性。

但是,requestAnimationFrame是存在兼容性问题的,截止到本文发布时间,其兼容性如下图:

所以东西虽好,但还是要考虑兼容性,兼容性写法如下:

    window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame||window.cancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame;
if(!window.requestAnimationFrame){
var lastTime = Date.now();//时间戳
window.requestAnimationFrame = function(callback){
var id;
var nowTime = Date.now();
var delay = Math.max(16.7-(nowTime-lastTime),0);
//如果上一次的时间 和 本次时间 执行的间隔大于 16.7,那就不再延迟直接执行
id = setTimeout(callback,delay);
lastTime = nowTime + delay;//上一次动画执行的时间
return id;
};
}
if(!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(index){
clearTimeout(index);
};
}
requestAnimationFrame(fn)方法需要传入回调,就是在帧频时执行的回调,但是调用后此方法只会执行一次,因此在写动画的时候就需要递归调用。然后在满足条件后调用cancelAnimationFram来取消即可。

移动端滑屏全应用【三】requestAnimationFrame的兼容与使用的更多相关文章

  1. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  2. 移动端滑屏全应用【四】移动端动画贞动画函数mTween封装

    首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅. 1. 首先要记得引入Tween.js 2. 引入mTween.js 3. 调用 * m ...

  3. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

  4. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  5. javascript移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  6. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  7. 利用jquery.touchSwipe.js实现的移动滑屏效果。

    利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...

  8. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  9. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

随机推荐

  1. 【python】python为何多线程无法切换

    写了一个kafka传输消息,celery发布任务的脚本. 有四个线程,分别读取不同的kafka队列信息 问题是,只有第一个线程会启动,剩下的三个线程连start都运行不了. 而且这个问题不是一开始就发 ...

  2. Python实操二

    实操一: 1.用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sb name=['alex','wupeiqi','yuanhao'] name=['alex','wupeiqi' ...

  3. java 接口实现的概念整理

    1.在java语言中接口由类实现,以便使用接口中的方法,重写接口中的方法,实现接口的类必须重写接口中的所有类,由于接口中的方法一定是 public abstract方法,所以类重写接口中的方法不仅要去 ...

  4. 性能测试四十七:jmeter性能监控工具ServerAgent

    在liunx压力机进行压测的时候,可以在widows下开一个jmeter,只进行监控用,不产生压力,监控效果和dstat差不多 jmeter安装客户端插件 把工具放到服务端任意目录并解压,我这里放到了 ...

  5. mysql 语句的使用清库数据转移

    mysql清空数据库表 方法1:重建库和表用mysqldump --no-data把建表SQL导出来,然后drop database再create database,执行一下导出的SQL文件: 方法2 ...

  6. 如何使用VisualSVN Server建立版本库

    首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库等.要建立版本库,需要右键单击左边窗口的Repositores, ...

  7. 阿里云服务器 http 转 https

    转载: http://blog.csdn.net/zzp961224/article/details/78934310 做个笔记 以备遗忘. 环境: 阿里云云服务器    Windows Server ...

  8. UI开发总结

    1. bootstrap tooltip 修改内容 <i class="ace-icon fa fa-user" id="test-tooltip" ti ...

  9. JAVA二分搜索树

    二叉树: 和链表一样,动态数据结构. 二叉树具有唯一根节点 二叉树具有天然的递归结构 二分搜索树是二叉树 二分搜索树的每个节点的值: 1.大于其左子树的所有节点的值 2.小于其右子树的所有节点的值 每 ...

  10. 函数sigsuspend

    sigqueue函数原型: 函数作用:新的发送信号系统调用,主要是针对实时信号提出的支持信号带有参数,与函数sigaction()配合使用 int sigqueue(pid_t pid, int si ...