JavaScript-implemented Tween algorithm and Buffer Effect instance code _ javascript skills

This article mainly introduces the Tween algorithm and buffer effects implemented by JavaScript. It involves the effects of mathematical operations and style attribute operations on JavaScript, such as easing and elastic motion. It has some reference value, if you need it, refer to the examples in this article to describe the Tween algorithm implemented by JavaScript and the buffer effect. We will share this with you for your reference. The details are as follows:

Here we will demonstrate the Tween algorithm and the JavaScript code for buffering special effects. It can be used for easing, spring, and many other animation effects. How can we use the flash Tween algorithm to do the js Tween algorithm, and use it to do some simple easing effect, you will understand this code.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-tween-run-style-codes/

The Code is as follows:

 Tween
 
  
 
 
  
 
  
 
 
Tween type:
     Linear     Quadratic     Cubic     Quartic     Quintic     Sinusoidal  
     Exponential     Circular     Elastic     Back     Bounce 
 
Region type:
     EaseIn     EaseOut     EaseInOut 
  
Script 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) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (-- t) * (t-2) -1) + B ;}}, Cubic: {easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (T = t/D-1) * t + 1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return c/2 * (t-= 2) * t + 2) + B ;}, Quart: {easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return-c * (t = t/D-1) * t-1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (t-= 2) * t-2) + B ;}, Quint: {eas EIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (t = t/D-1) * t + 1) + B ;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return c/2 * (t-= 2) * 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, 10 * (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, 10 * (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;}, easeIn Out: 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,, 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 * (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) + B;} else if (t <(2/2. 75) {return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + 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; }}var $ = function (id) {return "string" = typeof id? Document. getElementById (id): id ;}; var Each = function (list, fun) {for (var I = 0, len = list. length; I <len; I ++) {fun (list [I], I) ;}; var fun, iChart = 550, iDuration = 100; function Move () {var oM = $ ("idMove "). style, oL = $ ("idLine "). style, t = 0, c = 500, d = iDuration; oM. left = oL. left = "0px"; clearTimeout (Move. _ t); function _ run () {if (t
 
  
<\/P> ');} $ ("idChart "). innerHTML =. join ("");} var arrTween = document. getElementsByName ("vTween"); var arrEase = document. getElementsByName ("vEase"); Each (arrTween, function (o) {o. onclick = function () {SetFun (); Chart () ;}}) Each (arrEase, function (o) {o. onclick = function () {SetFun (); Chart () ;}}) function SetFun () {var sTween, sEase; Each (arrTween, function (o) {if (o. checked) {sTween = o. value ;}} ) Each (arrEase, function (o) {if (o. checked) {sEase = o. value ;}}) fun = sTween = "Linear "? Tween. linear: Tween [sTween] [sEase] ;}$ ("idRun "). onclick = function () {SetFun (); Chart (); Move () ;}$ ("idSpeed "). onclick = function () {if (iDuration = 100) {iDuration = 500; this. value = "Speed Up";} else {iDuration = 100; this. value = "slowing down";} script
 

I hope this article will help you design JavaScript programs.