首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 03, 2015

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

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

运行效果截图如下：

JavaScript实现的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="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) ? 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;
 }
 }
}
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 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" ? Tween.Linear : Tween[sTween][sEase];
}
$("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算法及缓冲特效实例代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
javascript实现漂亮的拖动层，窗口拖拽特效
Apr 24 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 #Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 #Javascript
ECMA5数组的新增方法有哪些及forEach（）模仿实现
Nov 03 #Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 #Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 #Javascript
jQuery实用技巧必备（中）
Nov 03 #Javascript
dll(1) html标准库(1) 经纬度(1) 历史记录(1) innoDB(3) 幻读(5) ctypes(1) MVCC(4) 间隙锁(2) C/C++(1)
You might like
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
php生成微信红包数组的方法
2019/09/05 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python自动化测试实例解析
2014/09/28 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
巴西一家专门从事家居和装饰的连锁店：Camicado
2019/08/14 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
文明单位申报材料
2014/12/23 职场文书
培训督导岗位职责
2015/04/10 职场文书