JavaScript实现的Tween算法及缓冲特效实例代码

网络编程 2024/11/16 佚名

3 1 2

本文实例讲述了JavaScript实现的Tween算法及缓冲特效。分享给大家供大家参考，具体如下：

这里演示Tween 算法及缓冲特效的JavaScript代码，利用它可以做缓动、弹簧等很多动画效果，怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果呢，看懂了本代码你就明白了。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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="easeOut" />
   easeOut </label>
  <label>
   <input name="vEase" type="radio" value="easeInOut" />
   easeInOut </label>
 </p>
 <input id="idSpeed" type="button" value="减慢速度" />
 <input id="idRun" 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 + 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) "string" == typeof id "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 style="background-color:#f60;font-size:0;width:3px;height:3px;position:absolute;left:' + (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" "idRun").onclick = function(){ SetFun(); Chart(); Move(); }
$("idSpeed").onclick = function(){
 if(iDuration == 100){
 iDuration = 500; this.value = "加快速度";
 }else{
 iDuration = 100; this.value = "减慢速度";
 }
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript,Tween算法,缓冲特效

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript实现的Tween算法及缓冲特效实例代码”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

JavaScript实现的Tween算法及缓冲特效实例代码

JavaScript实现的多种鼠标拖放效果

jQuery实现Email邮箱地址自动补全功能代码

评论“JavaScript实现的Tween算法及缓冲特效实例代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JavaScript实现的Tween算法及缓冲特效实例代码

JavaScript实现的多种鼠标拖放效果

jQuery实现Email邮箱地址自动补全功能代码

评论“JavaScript实现的Tween算法及缓冲特效实例代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存