js运动框架tween
<!DOCTYPE html>
<html>
<head>
<title>myAnimate</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#abc{
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #ff4500;
}
</style>
<script src="tween.js"></script>
</head>
<body>
<div id="abc" style="width:200px;"></div>
<script>
window.onload = function(){
ele = document.getElementById("abc");
function myAnimate(obj,attrObj,dur,fn){
var fn = fn?fn:Tween.Quad.easeIn;
var start = [];
var changes = [];
var times = 0;
for(var i in attrObj){
start[i]=getStyleNum(obj,i);
changes[i]=attrObj[i]-start[i];
}
obj.time = setInterval(function(){
var stops = true;
if(times<dur){
stops = false;
for(var i in attrObj){
getStyleNum(obj,i,fn(times,start[i],changes[i],dur));
}
}
times+=60;
if(stops){
for(var i in attrObj){
getStyleNum(obj,i,attrObj[i]);
}
clearInterval(obj.time);
obj.time = null;
}
},60);
} //getStyleNum
function getStyleNum(obj,attr,val){
if(obj.nodeType!=1){ //if it is not a element
return;
}
var attr = attr.replace(/^\s+|\s+/,"");
if(arguments.length==2){
if(attr=="opacity"){
return 100*parseInt(obj.currentStyle ? (obj.currentStyle[attr]||1) : (getComputedStyle(obj,null)[attr]||1)); //IE or FF
}
if(attr=="width"||attr=="height"||attr=="top"||attr=="left"){
attr = "offset" + attr.replace(attr.charAt(0),attr.charAt(0).toUpperCase());
return obj[attr];
}
return obj.currentStyle ? parseInt(obj.currentStyle[attr]) : (getComputedStyle(obj,null)[attr]);
}
if(arguments.length==3){
switch(attr){
case "width":
case "height":
case "top":
case "left":
obj.style[attr]=val+"px";
break;
case "opacity":
obj.style.filter="alpha(opacity="+val+")";
obj.style[attr]=val/100;
break;
default:
obj.style[attr]=val;
}
}
} myAnimate(ele,{width:400,height:300,opacity:20},600,Tween.Back.easeOut);
}
</script>
</body>
</html>
tween.js
//animation caculate
/*
Linear:uniform
Quadratic:2 square
Cubic:3 square
Quartic:4 square
Quintic:5 square
Sinusoidal:sine curve
Exponential:index curve
Circular:circular curve
Elastic:index reduce sine curve
Back:over range 3 square
Bounce:index reduce rebounce each effect has three function:
easeIn:from 0 accelerate add
easeOut:reduce to 0
easeInOut:accelerate add then reduce the function has four parameters
t--- current time
b--- beginning value
c--- change in value
d--- duration
*/ 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){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var 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){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var 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){
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var 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 (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOut: function(t,b,c,d,s){
if (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 (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;
}
}
}
js运动框架tween的更多相关文章
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
随机推荐
- 【linux】学习7
鸟哥 22章内容 单个源代码编译运行 设有一个hello.c 可以用下面方式运行 生成可执行文件a.out [localhost scripts]$ gcc hello.c [localhost sc ...
- 【python】下载远程内容到本地
来源:http://www.jb51.net/article/42630.htm urllib模块 urlretrieve方法 urllib.urlretrieve(url[, filename[, ...
- yii 自定义组件的调用
1,main.php 里面导入 'import' => array( 'application.components.*' ), 2,application/ ...
- [Android Pro] svn实例
referece : http://www.cnblogs.com/cnblogsfans/archive/2010/03/21/1690891.html 签出 svn checkout URL pa ...
- MAC下GitHub命令操作
由于GitHub实在太有用了~~ ,各种源代码,开源工程,经常需要下载下来使用和学习,或者自己的代码需要上传之类的,尽管有"GitHub for Mac"工具,但是作为一名程序猿! ...
- eclipse failed to create the java virtual machine 问题图文解析
eclipse failed to create the java virtual machine 问题图文解析 分类: java常用软件异常2010-10-02 23:45 73200人阅读 评论( ...
- IOS管理文件和目录NSFileManager
1.常见的NSFileManager文件方法 -(NSData *)contentsAtPath:path //从一个文件读取数据 -(BOOL)createFileAtPath: path cont ...
- Shell编程基础教程4--控制流结构
4.控制流结构 4.1.控制结构 4.2.if then else语句 格式: if 条件1 //如果条件1为真 then 命令1 //那么,执行命令1 el ...
- 安装oracle 12c RAC遇到的一些问题
(1) 安装grid软件,停止在38%很长时间不动,日志显示正常 解决方法: 由于是虚拟机安装,设置的内存为600M,关闭虚拟机,把内存调成1GB,问题解决~在38%Linking RMAN Ut ...
- 算法系列：CSAPP 推荐
转载自:https://book.douban.com/review/6093947/ 如果你觉得这本书过于厚重担心看不下来的话,不妨跟着coursera的Hardware/Software Inte ...