<Br/> <! Doctype html> <br/> <ptml lang = "en-US"> <br/> <pead> <br/> <meta charset = "UTF-8"> <br/> <title> </title> <br/> <style type = "text/css"> <br/> # div1 {width: 50px; height: 50px; background: # ccc; position: relative ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <div id = "div1" onclick = "Run (); "> </div> <br/> </body> <br/> </ptml> <br/> <script type =" text/javascript "> <br/> var Tween = {<br/> Linear: function (t, B, c, d) {Return c * t/d + B ;}, <br/> Quad :{< br/> easeIn: function (t, B, c, d) {<br/> return c * (t/= d) * t + B; <br/>}, <br/> easeOut: function (t, B, c, d) {<br/> return-c * (t/= d) * (t-2) + B; <br/>}, <br/> easeInOut: function (t, b, c, d) {<br/> if (t/= d/2) <1) return c/2 * t + B; <br/> return-c/2 * (-- t) * (t-2)-1) + B; <br/>}< br/> }, <br/> Cubic: {<br/> easeIn: function (t, B, c, d) {<br/> return c * (t/= d) * t + B; <br/>}, <br/> easeOut: function (t, B, c, d) {<br/> return c * (t = t/D-1) * t + 1) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t/= d/2) <1) return c/2 * t + B; <br/> return c/2 * (t-= 2) * t + 2) + B; <br/>}< br/>}, <br/> Quart: {<br/> easeIn: function (t, B, c, d) {<br/> return c * (t/= d) * t + B; <br/>}, <br/> easeOut: function (t, b, c, d) {<br/> return-c * (t = t/D-1) * t-1) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t/= d/2) <1) return c/2 * t + B; <br/> return-c/2 * (t-= 2) * t-2) + B; <br/>}< br/>}, <br/> Quint: {<br/> easeIn: function (t, b, c, d) {<br/> return c * (t/= d) * t + B; <br/> }, <br/> easeOut: function (t, B, c, d) {<br/> return c * (t = t/D-1) * t + 1) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t/= d/2) <1) re Turn c/2 * t + B; <br/> return c/2 * (t-= 2) * t + 2) + B; <br/>}< br/>}, <br/> Sine :{< br/> easeIn: function (t, B, c, d) {<br/> return-c * Math. cos (t/d * (Math. PI/2) + c + B; <br/>}, <br/> easeOut: function (t, B, c, d) {<br/> return c * Math. sin (t/d * (Math. PI/2) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> return-c/2 * (Math. cos (Math. PI * t/d)-1) + B; <br/>}< br/>}, <br/> Expo: {<br/> easeIn: function (t, B, c, d) {<br/> return (t = 0 )? B: c * Math. pow (2, 10 * (t/d-1) + B; <br/>}, <br/> easeOut: function (t, B, c, d) {<br/> return (t = d )? B + c: c * (-Math. pow (2,-10 * t/d) + 1) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t = 0) return B; <br/> if (t = d) return B + c; <br/> if (t/= d/2) <1) return c/2 * Math. pow (2, 10 * (t-1) + B; <br/> return c/2 * (-Math. pow (2,-10 * -- t) + 2) + B; <br/>}< br/>}, <br/> Circ :{< br/> easeIn: function (t, B, c, d) {<br/> return-c * (Math. sqrt (1-(t/= d) * t)-1) + B; <br/>}, <br/> ea SeOut: function (t, B, c, d) {<br/> return c * Math. sqrt (1-(t = t/D-1) * t) + B; <br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t/= d/2) <1) return-c/2 * (Math. sqrt (1-t * t)-1) + B; <br/> return c/2 * (Math. sqrt (1-(t-= 2) * t) + 1) + B; <br/>}< br/>}, <br/> Elastic: {<br/> easeIn: function (t, B, c, d, a, p) {<br/> if (t = 0) return B; if (t/= d) = 1) return B + c; if (! P) p = d *. 3; <br/> if (! A | a <Math. abs (c) {a = c; var s = p/4 ;}< br/> else var s = p/(2 * Math. PI) * Math. asin (c/a); <br/> return-(a * Math. pow (2,10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p) + B; <br/>}, <br/> easeOut: function (t, B, c, d, a, p) {<br/> if (t = 0) return B; if (t/= d) = 1) return B + c; if (! P) p = d *. 3; <br/> if (! A | a <Math. abs (c) {a = c; var s = p/4 ;}< br/> else var s = p/(2 * Math. PI) * Math. asin (c/a); <br/> return (a * Math. pow (2,-10 * t) * Math. sin (t * d-s) * (2 * Math. PI)/p) + c + B); <br/>}, <br/> easeInOut: function (t, B, c, d, a, p) {<br/> if (t = 0) return B; if (t/= d/2) = 2) return B + c; if (! P) p = d * (. 3*1.5); <br/> if (! A | a <Math. abs (c) {a = c; var s = p/4 ;}< br/> else var s = p/(2 * Math. PI) * Math. asin (c/a); <br/> if (t <1) return -. 5 * (a * Math. pow (2,10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p) + B; <br/> return a * Math. pow (2,-10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p )*. 5 + c + B; <br/>}< br/>}, <br/> Back: {<br/> easeIn: function (t, B, c, d, s) {<br/> if (s = undefined) s = 1.70158; <br/> return c * (t/= d) * t * (s + 1) * t-s) + B; <br/>}, <br/> easeOut: function (t, B, c, d, s) {<br/> if (s = undefined) s = 1.70158; <br/> return c * (t = t/D-1) * t * (s + 1) * t + s) + 1) + B; <br/>}, <br/> easeInOut: function (t, B, c, d, s) {<br/> if (s = undefined) s = 1.70158; <br/> if (t/= d/2) <1) return c/2 * (t * (s * = (1.525) + 1) * t-s) + B; <br/> return c/2 * (t-= 2) * t * (s * = (1.525) + 1) * t + s) + 2) + B; <br/>}< br/>}, <br/> Bounce :{< br/> easeIn: function (t, B, c, d) {<br/> return c-Tween. bounce. easeOut (d-t, 0, c, d) + B; <br/>}, <br/> easeOut: function (t, B, c, d) {<br/> if (t/= d) <(1/2. 75) {<br/> return c * (7.5625 * t) + B; <br/>} else if (t <(2/2. 75) {<br/> return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + B; <br/>}else if (t <(2.5/2.75 )) {<br/> return c * (7.5625 * (t-= (2.25/2.75) * t +. 9375) + B; <br/>}else {<br/> return c * (7.5625 * (t-= (2.625/2.75) * t +. 984375) + B; <br/>}< br/>}, <br/> easeInOut: function (t, B, c, d) {<br/> if (t <d/2) return Tween. bounce. easeIn (t * 2, 0, c, d )*. 5 + B; <br/> else return Tween. bounce. easeOut (t * 2-d, 0, c, d )*. 5 + c *. 5 + B; <br/>}< br/> var B = 50, c = 100, d = 100, t = 0; <br/> function Run () {<br/> var div = document. getElementById ("div1"); <br/> div. style. left = Math. ceil (Tween. bounce. easeOut (t, B, c, d) + "px"; <br/> if (t <d) {t ++; setTimeout (Run, 10 );} <br/>}< br/> </script> <br/>
Run code
This algorithm is viewed on other blogs and obtained from flash. You can use JS with a few changes. Thank you for writing this article.
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
