1.参考:http://blog.csdn.net/whqet/article/details/42911059?readlog

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

//兼容性处理
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz', '-o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback();
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
})();

//业务代码
(function() {
var degrees = 0;
var div1 = document.getElementById("div1");

function update() {
div1.style.transform = "rotate(" + (degrees++) + "deg)";
requestAnimationFrame(update);
}
requestAnimationFrame(update);

var deg = 0;
var id;
var div2 = document.getElementById("div2");
div2.addEventListener('click', function() {
var self = this;
requestAnimationFrame(function change() {
console.log(deg);
self.style.transform = 'rotate(' + (deg++) + 'deg)';
id = requestAnimationFrame(change);
});
});
document.getElementById('stop').onclick = function() {
cancelAnimationFrame(id);
};

})();

H5动画的更多相关文章

  1. H5动画优化之路

    H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...

  2. h5动画如何实现?如何快速开发h5动画

    最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...

  3. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  4. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

  5. h5动画效果总结

    一些常用的h5效果,自己总结的,用的时候直接拿,方便快捷! 1.悬浮时放大: .one{transition:All 0.4s ease-in-out;-webkit-transition:All 0 ...

  6. h5 动画页面

    伪元素上就不要做动画了,页面果然应该做一个测试一个啊   拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保 ...

  7. 做h5动画会用到的一个很好的缓动算法库

    http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/

  8. H5 动画:轨迹移动 | H5游戏 推金币

    https://aotu.io/notes/2017/11/06/path-animation/ https://aotu.io/notes/2017/11/06/coindozer/

  9. h5互动课件动画如何实现?如何快速开发h5互动课件动画

    最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...

随机推荐

  1. Kubernetes v1.6开始支持RBAC

    Kubernetes v1.6的一个亮点就是RBAC认证特性成为了beta版本.RBAC,基于角色的访问控制(Role-Based Access Control),是用于管理Kubernetes资源访 ...

  2. 解决无限 This file is indented with tabs instead of 4 spaces

    File -> Settings -> Editor -> Code Style -> Java -> Tabs and Indents -> Use tab ch ...

  3. 云主机与vps虚拟主机的区别

    云计算时代,云主机其可扩展性.价格便宜.安全可靠的特性深受企业和开发者欢迎,但目前有些IDC企业,新瓶装旧酒,将虚拟主机.VPS进行包装推出所谓的云主机服务,为了帮助用户更好的辨别和挑选云主机,下文详 ...

  4. ngRx 官方示例分析 - 4.pages

    Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...

  5. Struts2获取Session的三种方式

    1.Map<String,Object> session =  ActionContext.getContext().getSession(); session.put("cod ...

  6. wamp版本升级小问题记录

    在升级wamp版本时遇到的一些小问题,特此记录 在安装完成之后,修改了Apache根目录,可以正常访问.但是发现 httpd-vhosts.conf追加配置的无法访问,逐步检查,有以下问题 1.Inc ...

  7. 使用“消息服务框架”(MSF)实现分布式事务的三阶段提交协议(电商创建订单的示例)

    1,示例解决方案介绍 在上一篇 <消息服务框架(MSF)应用实例之分布式事务三阶段提交协议的实现>中,我们分析了分布式事务的三阶段提交协议的原理,现在我们来看看如何使用消息服务框架(MSF ...

  8. Python 中if的使用

    reference  : https://docs.python.org/3/reference/expressions.html#conditional-expressions 6.11. Cond ...

  9. 定时任务schedule(quartz)

    1, 简介Quartz是一个任务调度框架.核心类:Scheduler  :调度器,所有Job的调度都是由它控制;JobDetail   :生成Job对象的实例,存储Job对象需要的参数;Job     ...

  10. lvs_dr

    lvs_dr 实验需求(4台虚拟机) eth0 192.168.1.110 单网卡 client(可以使用windows浏览器代替,但会有缓存影响) eth0 192.168.1.186 单网卡 di ...