H5动画
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动画的更多相关文章
- H5动画优化之路
H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...
- h5动画如何实现?如何快速开发h5动画
最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...
- 基于canvas与原生JS的H5动画引擎
前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...
- 【H5动画】谈谈canvas动画的闪烁问题
一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...
- h5动画效果总结
一些常用的h5效果,自己总结的,用的时候直接拿,方便快捷! 1.悬浮时放大: .one{transition:All 0.4s ease-in-out;-webkit-transition:All 0 ...
- h5 动画页面
伪元素上就不要做动画了,页面果然应该做一个测试一个啊 拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保 ...
- 做h5动画会用到的一个很好的缓动算法库
http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/
- H5 动画:轨迹移动 | H5游戏 推金币
https://aotu.io/notes/2017/11/06/path-animation/ https://aotu.io/notes/2017/11/06/coindozer/
- h5互动课件动画如何实现?如何快速开发h5互动课件动画
最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...
随机推荐
- Kubernetes v1.6开始支持RBAC
Kubernetes v1.6的一个亮点就是RBAC认证特性成为了beta版本.RBAC,基于角色的访问控制(Role-Based Access Control),是用于管理Kubernetes资源访 ...
- 解决无限 This file is indented with tabs instead of 4 spaces
File -> Settings -> Editor -> Code Style -> Java -> Tabs and Indents -> Use tab ch ...
- 云主机与vps虚拟主机的区别
云计算时代,云主机其可扩展性.价格便宜.安全可靠的特性深受企业和开发者欢迎,但目前有些IDC企业,新瓶装旧酒,将虚拟主机.VPS进行包装推出所谓的云主机服务,为了帮助用户更好的辨别和挑选云主机,下文详 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
- Struts2获取Session的三种方式
1.Map<String,Object> session = ActionContext.getContext().getSession(); session.put("cod ...
- wamp版本升级小问题记录
在升级wamp版本时遇到的一些小问题,特此记录 在安装完成之后,修改了Apache根目录,可以正常访问.但是发现 httpd-vhosts.conf追加配置的无法访问,逐步检查,有以下问题 1.Inc ...
- 使用“消息服务框架”(MSF)实现分布式事务的三阶段提交协议(电商创建订单的示例)
1,示例解决方案介绍 在上一篇 <消息服务框架(MSF)应用实例之分布式事务三阶段提交协议的实现>中,我们分析了分布式事务的三阶段提交协议的原理,现在我们来看看如何使用消息服务框架(MSF ...
- Python 中if的使用
reference : https://docs.python.org/3/reference/expressions.html#conditional-expressions 6.11. Cond ...
- 定时任务schedule(quartz)
1, 简介Quartz是一个任务调度框架.核心类:Scheduler :调度器,所有Job的调度都是由它控制;JobDetail :生成Job对象的实例,存储Job对象需要的参数;Job ...
- lvs_dr
lvs_dr 实验需求(4台虚拟机) eth0 192.168.1.110 单网卡 client(可以使用windows浏览器代替,但会有缓存影响) eth0 192.168.1.186 单网卡 di ...