TweenLite动画引擎JS缓动简单版效果分享

<!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>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<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>

时间: 2024-10-14 09:32:03

TweenLite动画引擎JS缓动简单版效果分享的相关文章

Android动画学习(缓动动画与属性动画的区别)

前言: 在 Android动画学习(概述)中,如果你看过这篇帖子,你应该会对缓动动画和属性动画之间的区别产生疑问,因为在它们的应用中,你会感觉这两种动画有着一些相似的地方,为此,我打算把这两种动画之间的区别做一下说明 区别: 在这里先附上官方文档对于这两种动画的区别说明(我所说的缓动动画对应在下文中的英文为:View Animation,属性动画对应在下文中的英文为:Property Animation): How Property Animation Differs from View Ani

Angular4 动画Animations 002 缓动函数 和 关键帧

1 import { trigger, state, transition, style, animate, keyframes } from '@angular/animations'; //trigger, state, transition, style, animate 这5个都是动画函数 keyframes是关键帧 2 如图 常缓冲规函数语法 3 关键帧 keyframes 语法 4 https://easings.net/zh-cn# 缓冲函数速查 5 http://cubic-be

js缓动函数

公式一: 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)

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求.这个方法接受一个函数为参,该函数会在重绘前调用. 注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame(). 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般

缓动函数与关键帧动画

缓动函数与关键帧动画 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 现实物体照着一定节奏移动,并不是一开始就移动很快的.当我们打开抽屉时,首先会让它加速,然后慢下来.当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板. http://easings.net/zh-cn 缓动函数能让动画效果看起来更加真实:). iOS开发中,能用到缓动函数的地方就属于关键帧动画了,以下是我用关键帧动画做出来的模拟真实时钟效果的动画,效果相当逼真哦,只是这个gif图片的效果不好而已.

NGUI学习笔记(五):缓动

在Unity3D中可以使用自带的Animation制作任意形式的动画,不过我们这篇笔记主要是学习和使用NGUI提供的Tween动画.NGUI提供的Tween库功能较为简单,主要是用来实现NGUI自身需要的一些缓动效果,同时我们也可以使用NGUI的Tween来实现一些简单的动画效果. Tween组件 我们选中添加到舞台的任意UI组件右键就能看到添加Tween的菜单,如图: 我们通过选择添加对应的缓动组件就可以添加对应的缓动效果了,下面先简单的看一下NGUI提供的缓动组件的功能: Alpha:透明度

JS动画之缓动函数分析及动画库

上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).animate(styles,speed,easing,callback) 原生js使用:张鑫旭同学的文章 缓动函数知识 什么是缓动函数?我的理解是动画参数与数学公式结合的函数. 各流行库缓动函数对比,以easeInQuad为例,如图: Tween.js jQuery.easing GSAP CreateJS

分享一个即插即用的私藏缓动动画JS小算法

二.即插即用的缓动小算法 原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容易理解的. 比方说:你和初恋之间距离是64,每秒移动一半,则,你们之间的距离下一秒就是32, 再下一秒就是16,然后8,然后4,然后2,然后1,然后--你们就在一起了.你们在一起的这个过程就是一个典型的先快后慢的缓动运动过程,如下示意图: 用一个简单的公式表示就是: A =

网站建设中前端常用的jQuery+easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery.easing.1.3.js jquery.easing.compatibility.js 该插件美化排版后是130行左右,压缩后更小.这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍. X轴表示时间,Y轴表示的是动画效果的变化.查看这些曲线变化,更利于掌握这个插件的效果. 插件支