Home>

Here demonstrates the tween algorithm and the javascript code for buffering special effects. You can use it to do many animation effects such as easing, spring, etc.How to use flash's tween class algorithm,Let's make the tween algorithm of js and use it to do some simple easing effects.After understanding this code, you will understand.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>tween</title>
</head>
<body>
<div>
 <div>
  <div></div>
 </div>
 <div>
  <div></div>
  <div></div>
 </div>
</div>
<div>
 <p>tween type:<br />
  <label>
   <input name="vtween" type="radio" value="linear" checked="checked" />
   linear</label>
  <label>
   <input name="vtween" type="radio" value="quad" />
   quadratic</label>
  <label>
   <input name="vtween" type="radio" value="cubic" />
   cubic</label>
  <label>
   <input name="vtween" type="radio" value="quart" />
   quartic</label>
  <label>
   <input name="vtween" type="radio" value="quint" />
   quintic</label>
  <label>
   <input name="vtween" type="radio" value="sine" />
   sinusoidal</label>
  <br />
  <label>
   <input name="vtween" type="radio" value="expo" />
   exponential</label>
  <label>
   <input name="vtween" type="radio" value="circ" />
   circular</label>
  <label>
   <input name="vtween" type="radio" value="elastic" />
   elastic</label>
  <label>
   <input name="vtween" type="radio" value="back" />
   back</label>
  <label>
   <input name="vtween" type="radio" value="bounce" />
   bounce</label>
 </p>
 <p>ease type:<br />
  <label>
   <input name="vease" type="radio" value="easein" checked="checked" />
   easein</label>
  <label>
   <input name="vease" type="radio" value="easeout" />
   easeout</label>
  <label>
   <input name="vease" type="radio" value="easeinout" />
   easeinout</label>
 </p>
 <input type="button" value="slow speed" />
 <input type="button" value="run" />
</div>
<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 * 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 + t;
  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, 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;
 }, 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 * ds) * (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 + .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<d) {
  t ++;
  om.left=math.ceil (fun (t, 0, c, d)) + "px";
  ol.left=math.ceil (tween.linear (t, 0, ichart, d)) + "px";
  move._t=settimeout (_run, 10);
 } else {
  om.left=c+ "px";
  ol.left=ichart + "px";
 }
 }
 _run ();
}
function chart () {
 var a=[];
 for (var i=0;i<ichart;i ++) {
 a.push ("<div + (i-1) +" px;top:"+ (math.ceil (fun (i, 200, -200, ichart))) +" px;"><\/div>");
 }
 $("idchart"). innerhtml=a.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="slow down";
 }
}
</script>
</body>
</html>
  • Previous jQuery implements text flashing prompt code that mimics QQ avatar flashing effect
  • Next Detailed Java operation Properties configuration file