javaScript简易运动框架封装——和派孔明
来源:互联网 发布:js function use 编辑:程序博客网 时间:2024/05/18 02:46
//javascript简易运动框架封装
function move(obj,json,opational){
opational=opational||{};
opational.time=opational.time||300;
opational.fn=opational.fn||null;
opational.type=opational.type||'ease-out';
var start={};
var dis={};
for(var key in json){
start[key]=parseFloat(getStyle(obj,key));
dis[key]=json[key]-start[key];
}
var count=Math.round(opational.time/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(var key in json){
//var cur=start[key]+n*dis[key]/count;
switch(opational.type){
case 'linear':
var a=n/count;
var cur=start[key]+dis[key]*a;
break;
case 'ease-in':
var a=n/count;
var cur=start[key]+dis[key]*a*a*a;
break;
case 'ease-out':
var a=1-n/count;
var cur=start[key]+dis[key]*(1-a*a*a);
break;
}
if(key=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity='+cur*100+')';
}else{
obj.style[key]=cur+'px';
}
}
console.log('跑');
if(n==count){
clearInterval(obj.timer);
opational.fn && opational.fn();
}
},30);
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
- javaScript简易运动框架封装——和派孔明
- 简易透明度和运动框架
- Javascript运动概念2——多物体运动框架
- JS简易运动框架
- Javascript运动概念1——缓冲运动、匀速运动、运动框架
- Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
- JavaScript 运动框架
- JavaScript运动框架
- javascript-运动框架
- javascript运动框架---1
- JavaScript 运动框架
- JavaScript - 完美运动框架
- javascript完美运动框架
- javascript中的运动框架
- 封装运动框架-纯js
- Android开发学习总结(一)——搭建最新版本的Android开发环境
- 关于 swift 开发的变量或属性声明的建议(避免类型转换以及带来的强转崩溃问题)
- VM建好后,找不到
- ACM第一次练习—1010K
- 禁忌搜索算法
- javaScript简易运动框架封装——和派孔明
- JAVA动态规划(一)--最少硬币找零问题
- Java之旅--定时任务(Timer、Quartz、Spring、LinuxCron)
- startActivityForResult , onActivityResult , setResult 的用法
- bzoj2654 Tree 二分答案+最小生成树
- Synchronize实现原理(很难)
- 程序启动与运行
- Linux_ pipe 匿名管道 浅解
- ajax jsonp 跨域