Home > Developer > Web Develop
Demo
1.html:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "text/css">#div1{width:100px;Height:100px;Background-color:#ccc;position:Absolute; left:0; } </style></Head><Body> <DivID= "div1"></Div></Body><Scripttype= "text/javascript"src= "tween.js"></Script><Scripttype= "text/javascript"> varDiv1=Document.queryselector ("#div1"); varTimer= NULL; Document.onclick= function (){ /*T: Current number of steps s: start position C: Change Amount D: Total number of steps*/ vars=div1.offsetleft; varEnd= -; varC=End-s; varT= 0; varEndt= -; Clearinterval (timer); Timer=SetInterval (function() {t++; if(t>=Endt) {clearinterval (timer); } div1.style.left=Tween.Bounce.easeOut (t,s,c,endt)+"px"; }, -); }</Script></HTML>
2.tween.js:
var Tween = {linear:function (t,b,c,d) {return c*t/d + b;}, Quad: {easein:function (t,b,c,d) {r Eturn 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, Ten * (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, Ten * (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 +.) + 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; } }}
How to use Tween.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
