Tween图层缓动特效演示

稿源：互联网 2022-04-02 21:38:20 点击： 9266 撤稿纠错

通过一个简单的对话框来演示Tween的作用，自动变化显示及消失。

以下讨论的是和Tween 缓动相关的Tween图层缓动特效演示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>  
<head>  
<title>Tween演示</title>  
<script>
(function(b){var a=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1);var d={setStyle:function(i,g,h){switch(g){case"opacity":if(a){if(i.style.filter.toString().search(/alpha(opacity=d+)/i)>-1){i.style.filter=i.style.filter.replace(/alpha(opacity=d+)/i,"alpha(opacity=".concat(h|0).concat(")"))}else{i.style.filter+="alpha(opacity=".concat(h|0,")")}}else{i.style.opacity=(h/100).toString()}break;default:i.style[g]=h+"px";break}},getStyle:function(i,g){var h=i.currentStyle?i.currentStyle[g]:document.defaultView.getComputedStyle(i,null)[g];switch(g){case"opacity":if(a){return Number(i.currentStyle.filter.replace(/alpha(opacity=(d+))/i,"$1"))||100}else{return(Number(h)||1)*100}default:return(h.replace("px","")|0)||0}}};var f=function(g){return new c(g)};f.Line=function(h,g,j,i){return j*h/i+g};f.Quad={easeIn:function(h,g,j,i){return j*(h/=i)*h+g},easeOut:function(h,g,j,i){return -j*(h/=i)*(h-2)+g},easeInOut:function(h,g,j,i){if((h/=i/2)<1){return j/2*h*h+g}return -j/2*((--h)*(h-2)-1)+g}};f.Cubi={easeIn:function(h,g,j,i){return j*(h/=i)*h*h+g},easeOut:function(h,g,j,i){return j*((h=h/i-1)*h*h+1)+g},easeInOut:function(h,g,j,i){if((h/=i/2)<1){return j/2*h*h*h+g}return j/2*((h-=2)*h*h+2)+g}};f.Quar={easeIn:function(h,g,j,i){return j*(h/=i)*h*h*h+g},easeOut:function(h,g,j,i){return -j*((h=h/i-1)*h*h*h-1)+g},easeInOut:function(h,g,j,i){if((h/=i/2)<1){return j/2*h*h*h*h+g}return -j/2*((h-=2)*h*h*h-2)+g}};f.Quin={easeIn:function(h,g,j,i){return j*(h/=i)*h*h*h*h+g},easeOut:function(h,g,j,i){return j*((h=h/i-1)*h*h*h*h+1)+g},easeInOut:function(h,g,j,i){if((h/=i/2)<1){return j/2*h*h*h*h*h+g}return j/2*((h-=2)*h*h*h*h+2)+g}};f.Sine={easeIn:function(h,g,j,i){return -j*Math.cos(h/i*(Math.PI/2))+j+g},easeOut:function(h,g,j,i){return j*Math.sin(h/i*(Math.PI/2))+g},easeInOut:function(h,g,j,i){return -j/2*(Math.cos(Math.PI*h/i)-1)+g}};f.Expo={easeIn:function(h,g,j,i){return(h==0)?g:j*Math.pow(2,10*(h/i-1))+g},easeOut:function(h,g,j,i){return(h==i)?g+j:j*(-Math.pow(2,-10*h/i)+1)+g},easeInOut:function(h,g,j,i){if(h==0){return g}if(h==i){return g+j}if((h/=i/2)<1){return j/2*Math.pow(2,10*(h-1))+g}return j/2*(-Math.pow(2,-10*--h)+2)+g}};f.Circ={easeIn:function(h,g,j,i){return -j*(Math.sqrt(1-(h/=i)*h)-1)+g},easeOut:function(h,g,j,i){return j*Math.sqrt(1-(h=h/i-1)*h)+g},easeInOut:function(h,g,j,i){if((h/=i/2)<1){return -j/2*(Math.sqrt(1-h*h)-1)+g}return j/2*(Math.sqrt(1-(h-=2)*h)+1)+g}};f.Elas={easeIn:function(i,g,m,l,h,k){if(i==0){return g}if((i/=l)==1){return g+m}if(!k){k=l*0.3}if(!h||h<Math.abs(m)){h=m;var j=k/4}else{var j=k/(2*Math.PI)*Math.asin(m/h)}return -(h*Math.pow(2,10*(i-=1))*Math.sin((i*l-j)*(2*Math.PI)/k))+g},easeOut:function(i,g,m,l,h,k){if(i==0){return g}if((i/=l)==1){return g+m}if(!k){k=l*0.3}if(!h||h<Math.abs(m)){h=m;var j=k/4}else{var j=k/(2*Math.PI)*Math.asin(m/h)}return(h*Math.pow(2,-10*i)*Math.sin((i*l-j)*(2*Math.PI)/k)+m+g)},easeInOut:function(i,g,m,l,h,k){if(i==0){return g}if((i/=l/2)==2){return g+m}if(!k){k=l*(0.3*1.5)}if(!h||h<Math.abs(m)){h=m;var j=k/4}else{var j=k/(2*Math.PI)*Math.asin(m/h)}if(i<1){return -0.5*(h*Math.pow(2,10*(i-=1))*Math.sin((i*l-j)*(2*Math.PI)/k))+g}return h*Math.pow(2,-10*(i-=1))*Math.sin((i*l-j)*(2*Math.PI)/k)*0.5+m+g}};f.Back={easeIn:function(h,g,k,j,i){if(i==undefined){i=1.70158}return k*(h/=j)*h*((i+1)*h-i)+g},easeOut:function(h,g,k,j,i){if(i==undefined){i=1.70158}return k*((h=h/j-1)*h*((i+1)*h+i)+1)+g},easeInOut:function(h,g,k,j,i){if(i==undefined){i=1.70158}if((h/=j/2)<1){return k/2*(h*h*(((i*=(1.525))+1)*h-i))+g}return k/2*((h-=2)*h*(((i*=(1.525))+1)*h+i)+2)+g}};f.Boun={easeIn:function(h,g,j,i){return j-f.Bounce.easeOut(i-h,0,j,i)+g},easeOut:function(h,g,j,i){if((h/=i)<(1/2.75)){return j*(7.5625*h*h)+g}else{if(h<(2/2.75)){return j*(7.5625*(h-=(1.5/2.75))*h+0.75)+g}else{if(h<(2.5/2.75)){return j*(7.5625*(h-=(2.25/2.75))*h+0.9375)+g}else{return j*(7.5625*(h-=(2.625/2.75))*h+0.984375)+g}}}},easeInOut:function(h,g,j,i){if(h<i/2){return f.Bounce.easeIn(h*2,0,j,i)*0.5+g}else{return f.Bounce.easeOut(h*2-i,0,j,i)*0.5+j*0.5+g}}};f.fxs=[];f.timer=null;f.step=function(){var g=f.fxs;if(!g.length){clearInterval(f.timer);f.timer=null}for(var h=g.length-1;h>-1;h--){g[h].next()}};f.add=function(g){f.fxs.push(g)};f.remove=function(j){var g=f.fxs;for(var h=g.length-1;h>-1;h--){if(g[h]===j){g.splice(h,1)}}};var c=function(g){this[0]=g;this.isDOM=(typeof(g.nodeType)==="number");this.queue=[];this.isMoving=0;this.tweenType=f.Line};c.prototype={setStep:function(g){this._step=g;return this},setTweenType:function(g){this.tweenType=g;return this},dequeue:function(){var g=this.queue.shift();g&&g.start()},to:function(h,k,l,g){if(arguments.length==3&&typeof(l)=="number"){g=l;l=0}var i=this.isDOM;var j=new e({parent:this,target:this[0],to:h,tweenType:this.tweenType,step:this._step,callback:l,setProperty:(i?d.setStyle:0),getProperty:(i?d.getStyle:0),duration:k,delay:g});if(this.isMoving){this.queue.push(j)}else{j.start()}return this},stopSingle:function(){this.queue=[];var g=f.fxs;for(var h=g.length-1;h>-1;h--){if(g[h].parent===this){g.splice(h,1)}}return this},stop:function(){var g=f.fxs;for(var h=g.length-1;h>-1;h--){if(g[h].target===this[0]){g[h].parent.stopSingle()}}return this},toString:function(){return"[object TweenProto]"}};var e=function(g){this.parent=g.parent;this.target=g.target;this.to=g.to;this.duration=g.duration;this.setProperty=g.setProperty;this.getProperty=g.getProperty;this.tweenType=g.tweenType;this.callback=g.callback;this.delay=g.delay;this.step=g.step;this.changeProperties=[];this.begin={};this.change={}};e.prototype={start:function(){if(this.parent){this.parent.isMoving=1}var g=this;if(this.delay){return setTimeout(function(){f.add(g);g.init(g.to)},this.delay)}f.add(this);this.init(this.to)},init:function(i){var h=this.changeProperties;for(var g in i){h.push(g);this.begin[g]=this.getProperty?this.getProperty(this.target,g):this.target[g];this.change[g]=this.to[g]-this.begin[g]}this.start=new Date();if(f.fxs.length&&!f.timer){f.timer=setInterval(f.step,25)}},next:function(){var o=this.changeProperties,k=new Date();if((k-this.start)>this.duration){for(var l=0,h=o.length,n;l<h;l++){n=o[l];if(this.setProperty){this.setProperty(this.target,n,this.to[n])}else{this.target[n]=this.to[n]}}this.parent&&this.parent.dequeue;this.callback&&this.callback.call(this.target);if(this.parent){var m=this.parent;m.isMoving=0;m.dequeue()}f.remove(this)}else{for(var l=0,h=o.length,n;l<h;l++){n=o[l];var g=this.tweenType(k-this.start,this.begin[n],this.change[n],this.duration);if(this.setProperty){this.setProperty(this.target,n,g)}else{this.target[n]=g}}}this.step&&this.step.call(this.target)},toString:function(){return"[object Fx]"}};b.Tween=f})(window);
</script>
<style> 
html,body{ margin:0; padding:0; width:100%; height:100%; background-color:#999;} 
#mask{ width:100%; height:100%; background-color:#333; color:#fff; text-align:center; font-weight:bold; line-height:600px; z-index:99999;}
.none{ display:none;}
.dialog-content{ height200px;}
</style> 
</head>  
<body> 
算法取自[url]http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html[/url]<br>
getWH写法出自：新浪微博@清-三水清<br>
Tween缓动包装、演示程序出自：新浪微博@奔放的野驴<br>
(仅测试IE6和Chrome)
<div id="mask">loading...</div>
<div class="none" id="dialog" style="width:100px; height:100px; background-color:#fff; position:absolute; overflow:hidden; border:1px solid #ccc; left:50%; top:50%; margin-left:-50px; margin-right:-50px;">
 <div class="dialog-title" style="border-bottom:1px solid #ccc; font:bold 12px/30px '宋体';">Tween演示</div>
 <div id='cnt' class="dialog-content">
  我只是一个简单的对话框<br>
  我的作用只是向你演示Tween的作用<br>
  别担心，我会自己走的。。。
 </div>
</div>
<script type="text/javascript">
// utils
function getWH(){
 var wh = {};
 "Height Width".replace(/[^s]+/g,function(a){
  var b = a.toLowerCase();
  wh[b]=window["inner".concat(a)]||
   document.compatMode ==="CSS1Compat" && document.documentElement["client".concat(a)]
   || document.body["client".concat(a)];
 });
 return wh;
}
function $(id){return document.getElementById(id)||id}
// handle
window.onresize = function(){window.wh=getWH();}
window.onload = function(){
 window.wh = getWH();
 Tween($('mask')).to({opacity:0},500,function(){this.style.display='none';showDialog()});
}
function showDialog(){
 var dlg = $('dialog');
 dlg.style.display = 'block';
 if(window.attachEvent){
  dlg.style.filter = 'alpha(opacity=0)';
 }else{
  dlg.style.opacity = '0';
 }
 Tween(dlg)
 .setTweenType(Tween.Elas.easeOut)
 .setStep(function(){
  this.style.marginLeft = -this.clientWidth/2+'px';
  this.style.marginTop = -this.clientHeight/2+'px';
 })
 .to({width:400,height:400,opacity:100},500,300)
 .setTweenType(Tween.Expo.easeOut)
 .setStep(0)
 .to({left:-400},800,function(){
  showDialog2();
 },2000);
}
function showDialog2(){
 var dlg = $('dialog');
 dlg.style.left = '50%';
 dlg.style.top = '-400px';
 Tween(dlg)
 .setTweenType(Tween.Boun.easeOut)
 .to({top:(window.wh.height/2)},500,function(){
  this.style.left = wh.width/2+'px';
 })
 .setTweenType(Tween.Quad.easeOut)
 .to({width:100,height:100,left:100,top:100,marginLeft:'0',marginTop:'0'},1000)
 .to({left:500,top:400,opacity:50},1000)
 .to({left:(window.wh.width/2),top:(window.wh.height/2),opacity:100},1000,function(){
  $('cnt').innerHTML = '演示完毕<br>点击重新演示';
  this.onclick = function(){location.reload();}
 });
}
</script>
</body>  
</html>

关于Tween图层缓动特效演示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011112976827.shtml方便下次再访问哦。

·上一篇： jquery实现的图片左右切换的特效
·下一篇： 来自IBM中文官方网站的导航条渐隐特效代码

Tween图层缓动特效演示

文章分类LIST >>返回首页

最新游戏

最新新闻