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

网络编程 2024/11/9 佚名

3 2 1

本文实例讲述了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算法,缓冲特效

标签：

JavaScript,Tween算法,缓冲特效

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

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

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

JavaScript,Tween算法,缓冲特效

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

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

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

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

更新动态

友情链接

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

JavaScript,Tween算法,缓冲特效

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

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

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

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

更新动态

友情链接

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