Flash做動畫時會用到Tween類,利用它可以做很多動畫效果,例如緩動、彈簧等等。我這裡要教大家的是怎麼利用flash的Tween類的算法,來做js的Tween算法,並利用它做一些簡單的緩動效果。
完整實例下載
運行代碼框<!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 style="padding-left:50px;"> <div style="position:relative; border:1px solid #000000; width:550px; height:50px;"> <div id="idMove" style="width:50px; height:50px; background:#930; position:absolute;"></div> </div> <div style="position:relative;width:550px;height:200px; margin-top:50px;"> <div id="idChart" style="border:1px solid #000;height:200px;"> </div> <div id="idLine" style="position:absolute;top:0;left:0;height:200px;width:1px;background:#000;"></div> </div> </div> <div> <p> Tween類型: <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類型: <br /> <label> <input name="vEase" type="radio" value="easeIn" checked="checked" /> easeIn </label> <label> <input name="vEase" type="radio" value="ea