利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画
以下贴出Tween的代码:
/*
* Tween.js
* t: current time(当前时间);
* b: beginning value(初始值);
* c: change in value(变化量);
* d: duration(持续时间)。
* you can visit 'http://easings.net/zh-cn' to get effect
*/
var Tween = {
Linear: function(t, b, c, d) { return c*t/d + b; },
Quad: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /= d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t-2) - 1) + b;
}
},
Cubic: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t/d - 1) * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
return c / 2*((t -= 2) * t * t + 2) + b;
}
},
Quart: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t*t + b;
},
easeOut: function(t, b, c, d) {
return -c * ((t = t/d - 1) * t * t*t - 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
}
},
Quint: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2*((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine: {
easeIn: function(t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOut: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
}
},
Expo: {
easeIn: function(t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOut: function(t, b, c, d) {
return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOut: function(t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ: {
easeIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic: {
easeIn: function(t, b, c, d, a, p) {
var s;
if (t==0) return b;
if ((t /= d) == 1) return b + c;
if (typeof p == "undefined") p = d * .3;
if (!a || a < Math.abs(c)) {
s = p / 4;
a = c;
} else {
s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut: function(t, b, c, d, a, p) {
var s;
if (t==0) return b;
if ((t /= d) == 1) return b + c;
if (typeof p == "undefined") p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p/(2*Math.PI) * Math.asin(c/a);
}
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function(t, b, c, d, a, p) {
var s;
if (t==0) return b;
if ((t /= d / 2) == 2) return b+c;
if (typeof p == "undefined") p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p / (2 *Math.PI) * Math.asin(c / a);
}
if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
}
},
Back: {
easeIn: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(t, b, c, d, s) {
if (typeof s == "undefined") s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce: {
easeIn: function(t, b, c, d) {
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function(t, b, c, d) {
if (t < d / 2) {
return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
} else {
return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}
}
Math.tween = Tween;
requestAnimationFrame兼容性代码:
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
} if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
调用方式和setTime类似
实际案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>requestAnimationFrame实现皮球落地的缓动效果</title>
<script>
document.createElement("ball");
document.createElement("shadow");
</script>
<style>
.demo {
height: 600px;
position: relative;
}
h4 {
text-align: center;
font-size: 110%;
}
ball {
width: 100px; height: 100px; border-radius: 100px;
position: absolute; left: 50%; top: 500px;
margin-left: -50px;
background-color: #34538b;
background-image: -webkit-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
background-image: -moz-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
background-image: radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
cursor: move;
z-index: 1;
}
shadow {
position: absolute;
width: 100px; height: 30px;
position: absolute; left: 50%; bottom: 5px;
margin-left: -50px;
background-image: -webkit-radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
background-image: -moz-radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
background-image: radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
}
</style>
</head>
<body>
<div id="main">
<h1>requestAnimationFrame实现皮球落地的缓动效果实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<h3>展示</h3>
<div class="demo">
<h4>向上拖动小球然后放下</h4>
<ball></ball><shadow></shadow>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/requestAnimationFrame.js"></script>
<script src="js/tween.js"></script>
<script>
var ball = $("ball"), shadow = $("shadow");
var objBall = {};
var shadowWithBall = function(top) {
// 0 ~ 500
var top = top || parseInt(ball.css("top")),
scale = 1 + (500 - top) / 500;
opacity = 1 - (500 - top) / 500;
if (opacity < 0) opacity = 0;
shadow.css("opacity", opacity)
.css("WebkitTransform", "scale("+ [scale, scale].join(",") +")")
.css("transform", "scale("+ [scale, scale].join(",") +")");
}, funFall = function() {
var start = 0, during = 100;
var _run = function() {
start++;
var top = Tween.Bounce.easeOut(start, objBall.top, 500 - objBall.top, during);
ball.css("top", top);
shadowWithBall(top);
if (start < during) requestAnimationFrame(_run);
};
_run();
};
ball.bind("mousedown", function(event) {
objBall.pageY = event.pageY;
objBall.flagFollow = true;
});
$(document).bind("mousemove", function(event) {
if (objBall.flagFollow) {
var pageY = event.pageY;
console.log(objBall.pageY + " === " + pageY);
objBall.top = 500 - (objBall.pageY - pageY);
if (objBall.top < 0) {
objBall.top = 0;
} else if (objBall.top > 500) {
objBall.top = 500;
}
//cosnole.log(objBall.top);
ball.css("top", objBall.top);
shadowWithBall(objBall.top);
}
});
$(document).bind("mouseup", function(event) {
if (objBall.flagFollow) funFall();
objBall.flagFollow = false;
});
</script>
</body>
</html>
利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画的更多相关文章
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...
- 《JavaScript 实战》:Tween 算法及缓动效果
Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...
- 利用朴素贝叶斯算法进行分类-Java代码实现
http://www.crocro.cn/post/286.html 利用朴素贝叶斯算法进行分类-Java代码实现 鳄鱼 3个月前 (12-14) 分类:机器学习 阅读(44) 评论(0) ...
- Python开发——利用正则表达式实现计算器算法
Python开发--利用正则表达式实现计算器算法 (1)不使用eval()等系统自带的计算方法 (2)实现四则混合运算.括号优先级解析 思路: 1.字符串预处理,将所有空格去除 2.判断是否存在括号运 ...
- 利用ZYNQ SOC快速打开算法验证通路(4)——AXI DMA使用解析及环路测试
一.AXI DMA介绍 本篇博文讲述AXI DMA的一些使用总结,硬件IP子系统搭建与SDK C代码封装参考米联客ZYNQ教程.若想让ZYNQ的PS与PL两部分高速数据传输,需要利用PS的HP(高性能 ...
- 利用ZYNQ SOC快速打开算法验证通路(1)——MATLAB浮点数与定点二进制补码互转
最近本人一直在学习ZYNQ SOC的使用,目的是应对科研需要,做出通用的算法验证平台.大概思想是:ZYNQ PS端负责与MATLAB等上位机数据分析与可视化软件交互:既可传输数据,也能通过上位机配置更 ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
- tween算法
tween算法 https://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 参数说明: t: current time:当前时间: ...
- CSS3动画那么强,requestAnimationFrame还有毛线用?
一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...
随机推荐
- Java内存区域的划分和异常
Java内存区域的划分和异常 运行时数据区域 JVM在运行Java程序时候会将内存划分为若干个不同的数据区域. 打开百度App,看更多美图 程序计数器 线程私有.可看作是当前线程所执行的字节码的行 ...
- PAT甲题题解-1104. Sum of Number Segments (20)-(水题)
#include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...
- 结对&词频统计
结对编程 Pathner 濮成林(博客:http://www.cnblogs.com/charliePU/) 1.词频统计 环境依赖: 开发环境.myeclipse 2013, jdk1.7.0_04 ...
- 对《OA云》作品的分析
对<OA云>作品的分析 软件描述:<OA云>是一款基于移动端的企业日常事物办公软件,企业人员进入该产品后可以对当天的出勤情况进行签到,系统会自动的识别以及记录下员工的实时签到信 ...
- [福大软工] Z班 团队作业——UML设计 作业成绩
团队作业--UML设计 作业链接 http://www.cnblogs.com/easteast/p/7745703.html 作业要求 1)团队分工(5分) 描述团队的每个成员分别完成了UML图的哪 ...
- RYU 灭龙战 fourth day (1)
RYU 灭龙战 fourth day (1) 前言 对于流量的监控,对于一个网络管理人员来说是非常重要的,可以从可视化的角度,方便检测出哪里的设备出了问题:而在传统网络中,如果是哪里的设备出了问题的话 ...
- C# 7中函数多值返回_转自InfoQ
本文要点 应遵循<.NET设计规范:.NET约定惯用法与模式>一书.和十年前第一版出版时一样,书中给出的原则在当前依然有指导意义. API设计是最重要的.设计不好的API会在极大地增加软件 ...
- Java中String直接赋字符串和new String的区别 如String str=new String("a")和String str = "a"有什么区别?
百度的面试官问 String A="ABC"; String B=new String("ABC"); 这两个值,A,B 是否相等,如果都往HashSet里面放 ...
- 导入appiumlibrary显红
1.点击ride中的Tools的View RIDE Log 2.打开日志报如下错误,提示没有six这个模块,可能是最新包的要对python版本兼容 3.所以使用pip install six安装包后 ...
- 服务端增加WCF服务全局异常处理机制
服务端增加WCF服务全局异常处理机制,任一WCF服务或接口方式出现异常,将统一调用WCF_ExceptionHandler.ProvideFault方法,因此不需要每个方法使用try catch写法. ...