JavaScript 缓动算法示例

最新推荐文章于 2022-12-26 21:00:22 发布
最新推荐文章于 2022-12-26 21:00:22 发布
阅读量1.7k 收藏
点赞数
文章标签： javascript function c null 算法 fun
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_A66/article/details/5537922
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>缓动算法示例</TITLE>
  <META charset="gb2312">
 </HEAD>
<style>
#DivExpress
{
  width:400px;
  height:50px;
  border:1px solid green;
}
#Demo
{
position:relative;
border:1px solid red;
width:100px;
height:50px;
}
</style>
 <BODY >

 <center>
  <div id="DivExpress">
    <div id="Demo">
   
    </div>
   </div>


<select id="seleOption" οnchange="GetOptionValue(this)">
<option selected="true" value=-1 >
请选择缓动效果...
</option>

<option value=0 >
无缓动效果
</option>
<option value=1>
二次方的缓动
</option>
<option  value=2>
三次方的缓动
</option>
<option  value=3>
四次方的缓动
</option>
<option  value=4>
五次方的缓动
</option>
<option value=5>
正弦曲线的缓动
</option>
<option  value=6>
指数曲线的缓动
</option>
<option  value=7>
圆形曲线的缓动
</option>
<option  value=8>
指数衰减的正弦曲线缓动
</option>
<option  value=9>
超过范围的三次方缓动
</option>
<option  value=10>
指数衰减的反弹缓动
</option>
</select >

<select id="Show" disabled="true" οnchange="fun(this)">
 <option selected="true"  value="sele">
 请选择...
 </option>
 <option value="easeIn">
 easeIn
 </option>
 <option value="easeOut">
 easeOut
 </option>
 <option value="easeInOut">
 easeInOut
 </option>
<select >
<input type="button" value="运行" οnclick="Run()">
</center>

 </BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--


//d duration（持续步长）。
//c change in value（变化增量）；
//b  beginning value（位置初始值）；
//t  current time（当前步长）；

var b=0,c=300,d=100,t=0;


var obj=[];
var selectedObj=null;
var exeStr=null;

 


 function fun(ob)
 { 

   switch(ob.value)
   {
     case "easeIn":
//Tween.Quad.easeOut(t,b,c,d)
 // confirm(obj.length)

  exeStr="easeIn";
  break;
  case "easeOut":
     exeStr="easeOut";
  break;
  case "easeInOut":

     exeStr="easeInOut";
  break;

   }

 }

 

  function GetOptionValue(ob)
  {
     if(ob.value==-1||ob.value==0)
  {
  Show.disabled=true;
  return null;
  }
  else
  Show.disabled=false;

  selectedObj=obj[ob.value];

  }
function Run(){


     var tmp;
    //Demo.style.left = Tween.Quad.easeOut(t,b,c,d) + "px";
if(selectedObj!=null)
{
   if(exeStr!=null)
   {
   switch(exeStr)
   {
    case "easeIn":
    //d duration（持续步长）。
    //c change in value（变化增量）；
    //b  beginning value（位置初始值）；
    //t  current time（当前步长）；
    tmp=selectedObj.easeIn(t,b,c,d);
    break;

    case "easeOut":
  tmp=selectedObj.easeOut(t,b,c,d);
    break;
    case "easeInOut":
  tmp=selectedObj.easeInOut(t,b,c,d);
    break;
   }
   Demo.style.left=tmp+"px";
   //alert(exeObj(t,b,c,d));
     // Demo.style.left=exeObj(t,b,c,d);
   window.status= selectedObj;
 }else if(seleOption.value==0)
 {
 tmp=selectedObj.Linear(t,b,c,d);
 }else
 {
   alert("请选择后续操作！");
   return;
 }

    if(t<d)
    { t++; setTimeout(Run, 10); }
    else
    {
   
   t=0;
     }


}else
alert("请选择！");

 


}


//缓动
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) ? 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*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*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;
        }
    }
}

//Run();

 

    obj[obj.length]= Tween.Linear;
 obj[obj.length]= Tween.Quad;
 obj[obj.length]= Tween.Cubic;
 obj[obj.length]= Tween.Quart;
 obj[obj.length]= Tween.Quint;
 obj[obj.length]= Tween.Sine;
 obj[obj.length]= Tween.Expo;
 obj[obj.length]= Tween.Circ;
 obj[obj.length]= Tween.Elastic;
 obj[obj.length]= Tween.Back;
 obj[obj.length]= Tween.Bounce;

 

//-->
</SCRIPT>

A_A66
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasingExample:演示各种类型的缓动如何工作的示例应用程序
07-09
缓动示例 演示各种类型的缓动如何工作的示例应用程序。
js 缓动算法
weixin_33869377的博客
12-28 315
2019独角兽企业重金招聘Python工程师标准>>> ...
JS缓动动画计算公式
最新发布
weixin_48763229的博客
12-26 226
1
简单易用的缓动算法
weixin_30786657的博客
02-10 210
返回顶部按钮执行的函数 var backToTop = function (rate){ var doc = document.body.scrollTop? document.body : document.documentElement; var scrollTop = doc.scrollTop; if(!window.requestA...
tweenjs缓动算法使用小实例
weixin_30763397的博客
04-22 199
这里的tweenjs不是依托于createjs的tewwnjs，而是一系列缓动算法集合。因为本身是算法，可以用在各个业务场景中，这也正是总结学习它的价值所在。tweenjs代码详情： 1 /* 2 * Tween.js 3 * t: current time（当前时间）； 4 * b: beginning value（初始值）； 5 * c: change...
javascript动画算法实例分析
10-23
总之，JavaScript动画算法涉及了数学、物理学和艺术设计等多个领域，通过精心设计的缓动函数和时间函数，开发者可以实现从简单到复杂的各种动态效果。理解并掌握这些算法，对于提升JavaScript编程能力，特别是前端...
JSAlgorithms:用 JavaScript 实现的算法示例
07-08
"JSAlgorithms:用 JavaScript 实现的算法示例"项目，正是为了帮助开发者通过JavaScript语言来实践和理解各种经典算法。 这个项目源于作者在学习可汗学院课程时的实践，可汗学院是一个提供大量在线教育资源的平台，...
JavaScript实现的贝塞尔曲线算法简单示例
11-26
本文实例讲述了JavaScript实现的贝塞尔曲线算法。分享给大家供大家参考，具体如下： 如果在HTML5支持好的浏览器中，可以看到用svg绘制的路径线。 在所有浏览器中，均可以看到一个小方块沿着贝塞尔曲线路径来回运动。...
JavaScript笛卡尔积超简单实现算法示例
10-18
主要介绍了JavaScript笛卡尔积超简单实现算法,涉及javascript数组遍历、添加简单操作技巧,需要的朋友可以参考下
基于JavaScript实现的折半查找算法示例
10-20
主要介绍了基于JavaScript实现的折半查找算法,结合实例形式分析了折半查找的原理、操作步骤及javascript实现折半查找的相关操作技巧与注意事项,需要的朋友可以参考下
tween.js缓动补间动画算法示例
11-27
一、理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先
完整Tween动画缓动算法
12-31
完整Tween动画缓动算法，值得学习一下
js 匀速/缓动动画 简单封装
09-10 6453
.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;
JavaScript之实现缓动动画效果
weixin_53849180的博客
10-23 3677
思路 1.首先缓动动画函数封装 ，obj目标对象 ，target目标位置，这样可以不用每次要使用动画效果的时候都写一次js代码， 2.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来 3.核心算法：（目标值-现在的位置）/10作为每次移动得距离 步长(这里步长要取整) 4.停止条件：让当前盒子位置等于目标位置就停止定时器 js代码如下 function animate(obj,target){ // 先清除以前得定时器，只保留当前得一个定时器执行 clearInterval(
缓动类算法
c332937586的专栏
07-31 1510
缓动类算法
缓动小算法
weixin_30794851的博客
09-01 80
/*1.每次移动剩余距离的一半。简单的公式表示 nA = A - (A - B) / 2简单的公式表示 48 = 64 - (64 - 32) / 2我下一秒的位置 = 现在位置 - 现在和初恋之间距离的一半*/ window.requestAnimFrame = (function(){ return window.requestAnimationFrame ...
终于找齐了梦寐以求的物体缓动算法（Tween）
问道·六韬
11-01 4039
先说一下算法原理：        x轴是时间，y轴是当前值，b是y轴的初始值，x轴的初始值是0，t是当前时间。当t（x轴）逐渐增加到达d时，当前值（y轴）会到达目标值（b+c）。       想详细理解的话可以找资料看看吧（貌似跟数学关系比较大）。      下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。
JavaScript动画缓冲算法总结 转
weixin_30760895的博客
07-26 130
/** * 以下是各种缓动公式算法 * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间） */ var Easing = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { ...
JavaScript Tween算法及缓动效果javascript
chaoxidawang的专栏
01-09 1848
javascript tween算法及缓动效果 flash做动画时会用到tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。 我这里要教大家的是怎么利用flash的tween类的算法,来做js的tween算法,并利用它做一些简单的缓动效果。 实例效果 tween类型: linearquadraticcubicquarticquinticsinusoidal exponentia
前端面试题：常用算法.pdf
12-18
"此资源主要涵盖了20多种JavaScript中常见的算法示例，旨在帮助前端开发者准备面试，提升算法理解与应用能力。" 在前端开发中，掌握算法是至关重要的，这不仅可以优化代码性能，还能在面试中展现出扎实的技术基础。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值