首页 > 代码库 > 时间版运动框架
时间版运动框架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>2.用原生js写时间版的运动框架</title> 8 <meta name="author" content="Administrator" /> 9 <style>10 *{margin:0;padding:0}11 #div1{width:100px;height:100px;position:absolute;background:red;left:200px;top:200px;}12 #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;}13 </style>14 <!-- Date: 2014-12-15 -->15 16 <script src="../../tween.js"></script>17 <script>18 window.onload=function(){19 var oDiv1=getById(‘div1‘);20 oDiv1.onmouseover=function(){21 hcMove(oDiv1,{‘width‘:200,‘height‘:200,‘left‘:150,‘top‘:150},2000,‘linear‘)22 }23 24 oDiv1.onmouseout=function(){hcMove(oDiv1,{‘width‘:100,‘height‘:100,‘left‘:200,‘top‘:200},2000,‘linear‘)25 } 26 }27 function hcMove(obj,json,times,fx,fn){28 var iCur={}; //获取初始值 b29 iCur[attr] = 0; //初始化 所有值为030 31 for(var attr in json) //区分透明度和其他属性的初始值的区别32 {33 if(attr == ‘opacity‘){34 iCur[attr] = Math.round(getStyle( obj,attr )*100) 35 36 }else{37 iCur[attr] = parseInt(getStyle(obj,attr))38 }39 }40 41 clearInterval( obj.timer );42 43 var oldTime=nowTime();44 45 obj.timer=setInterval(function(){46 var newTime=nowTime();47 48 // oldTime < newTime;49 // oldTime - newTime //负数 到负无穷50 51 var t1=oldTime - newTime + 2000; //从2000开始减小 一直到负无穷52 53 Math.max( 0, t1) //t1先 大于 0 后小于054 var t=2000-Math.max( 0, t1); //0 2000 //当前时间 ,所有属性的当前时间都一样55 56 for(var attr in json)57 { 58 var value=Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times); //当前位置,变化值59 if( attr == ‘opacity‘ ){60 obj.style[attr] = value/100;61 obj.style.filter = ‘alpha(opacity=‘+value+‘)‘62 }else{63 obj.style[attr] = value +‘px‘;64 }65 }66 67 if( t==times ){68 clearInterval( obj.timer );69 fn && fn.call(obj)70 }71 72 },13)73 }74 75 function nowTime(){ return (new Date).getTime() }76 77 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }78 /*getById()**/79 function getById(id){ return document.getElementById(id) }80 81 82 83 </script>84 </head>85 <body>86 <div id="div1"></div>87 </body>88 </html>
tweens.js
1 var Tween = { 2 linear: function (t, b, c, d){ //匀速 3 return c*t/d + b; 4 }, 5 easeIn: function(t, b, c, d){ //加速曲线 6 return c*(t/=d)*t + b; 7 }, 8 easeOut: function(t, b, c, d){ //减速曲线 9 return -c *(t/=d)*(t-2) + b; 10 }, 11 easeBoth: function(t, b, c, d){ //加速减速曲线 12 if ((t/=d/2) < 1) { 13 return c/2*t*t + b; 14 } 15 return -c/2 * ((--t)*(t-2) - 1) + b; 16 }, 17 easeInStrong: function(t, b, c, d){ //加加速曲线 18 return c*(t/=d)*t*t*t + b; 19 }, 20 easeOutStrong: function(t, b, c, d){ //减减速曲线 21 return -c * ((t=t/d-1)*t*t*t - 1) + b; 22 }, 23 easeBothStrong: function(t, b, c, d){ //加加速减减速曲线 24 if ((t/=d/2) < 1) { 25 return c/2*t*t*t*t + b; 26 } 27 return -c/2 * ((t-=2)*t*t*t - 2) + b; 28 }, 29 elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） 30 if (t === 0) { 31 return b; 32 } 33 if ( (t /= d) == 1 ) { 34 return b+c; 35 } 36 if (!p) { 37 p=d*0.3; 38 } 39 if (!a || a < Math.abs(c)) { 40 a = c; 41 var s = p/4; 42 } else { 43 var s = p/(2*Math.PI) * Math.asin (c/a); 44 } 45 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 46 }, 47 elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） 48 if (t === 0) { 49 return b; 50 } 51 if ( (t /= d) == 1 ) { 52 return b+c; 53 } 54 if (!p) { 55 p=d*0.3; 56 } 57 if (!a || a < Math.abs(c)) { 58 a = c; 59 var s = p / 4; 60 } else { 61 var s = p/(2*Math.PI) * Math.asin (c/a); 62 } 63 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 64 }, 65 elasticBoth: function(t, b, c, d, a, p){ 66 if (t === 0) { 67 return b; 68 } 69 if ( (t /= d/2) == 2 ) { 70 return b+c; 71 } 72 if (!p) { 73 p = d*(0.3*1.5); 74 } 75 if ( !a || a < Math.abs(c) ) { 76 a = c; 77 var s = p/4; 78 } 79 else { 80 var s = p/(2*Math.PI) * Math.asin (c/a); 81 } 82 if (t < 1) { 83 return - 0.5*(a*Math.pow(2,10*(t-=1)) * 84 Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 85 } 86 return a*Math.pow(2,-10*(t-=1)) * 87 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; 88 }, 89 backIn: function(t, b, c, d, s){ //回退加速（回退渐入） 90 if (typeof s == ‘undefined‘) { 91 s = 1.70158; 92 } 93 return c*(t/=d)*t*((s+1)*t - s) + b; 94 }, 95 backOut: function(t, b, c, d, s){ 96 if (typeof s == ‘undefined‘) { 97 s = 3.70158; //回缩的距离 98 } 99 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;100 }, 101 backBoth: function(t, b, c, d, s){102 if (typeof s == ‘undefined‘) {103 s = 1.70158; 104 }105 if ((t /= d/2 ) < 1) {106 return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;107 }108 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;109 },110 bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）111 return c - Tween[‘bounceOut‘](d-t, 0, c, d) + b;112 }, 113 bounceOut: function(t, b, c, d){114 if ((t/=d) < (1/2.75)) {115 return c*(7.5625*t*t) + b;116 } else if (t < (2/2.75)) {117 return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;118 } else if (t < (2.5/2.75)) {119 return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;120 }121 return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;122 }, 123 bounceBoth: function(t, b, c, d){124 if (t < d/2) {125 return Tween[‘bounceIn‘](t*2, 0, c, d) * 0.5 + b;126 }127 return Tween[‘bounceOut‘](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;128 }129 }
时间版运动框架
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。