js 模拟css3 动画3

<!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>

/*

算法来源：http://www.robertpenner.com/easing/
动画曲线图 http://easings.net/zh-cn

*/

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>

js 模拟css3 动画3的更多相关文章

JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
js 模拟css3 动画1
<html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...
js 模拟css3 动画
<html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...
js 模拟css3 动画2
<html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...
如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
原生js判断css3动画过度(transition)结束 transitionend事件以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
显示层封装及实现与优化（无动画+css3动画+js动画）
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

Windows下运行Linux命令
安装Gow软件,Gow-0.7.0.exe,这样就可以在Windows命令行运行Linux命令,比如通过scp把Windows下的文件拷贝到Linux下. 直接运行安装,不会生成任何客户端,直接使用W ...
vue2.0 父子组件通信兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
【python接口自动化框架-unittest】如何传参数到下一个case
1.前提平时我们用unittest的时候,都知道每个test_ 都是相互独立的,但是很多现实情况是,我们下一个接口参数,可能会用到上一个接口返回的json字段,那么,我们怎么去实现呢 2.实例 1. ...
PythonStudy——字符串类型 String type
# 1.定义# 需求:你是"好学生" s1 = "你是\"好学生\"" print(s1) # 可以通过引号的嵌套,使内部不同的引号在不转义 ...
Ansible 快速部署 Zabbix 4
阅读本文章需要具有Ansible.Zabbix基础.本次教程基于如下环境: CentOS 7.x Zabbix 4.0 Ansible 2.5 服务器初始化关闭防火墙.selinux,添加epel常 ...
1.1.15 word调整文字与下划线之间的间距
先请按CTRL+U快捷键,或点击“下划线”按钮,然后输入一个空格,再输入文字“下划线间距”,在文字的尾部再添加一个空格.选中文字内容(注意不要选中首尾的空格),单击菜单“格式”→“字体”,在“字体”设 ...
C# System.IO和对文件的读写操作
System.IO命名空间中常用的非抽象类 BinaryReader 从二进制流中读取原始数据 BinaryWriter 从二进制格式中写入原始数据 BufferedStream 字节流的临时存储 ...
[转]使用Cython来保护Python代码库
转自:http://blog.csdn.net/chenyulancn/article/details/77168621 最近,我在做一个需要使用Cython来保护整个代码库的Python项目. 起初 ...
MySQL Point in Time Recovery the Right Way
In this blog, I’ll look at how to do MySQL point in time recovery (PITR) correctly. Sometimes we nee ...
爬虫-day01-基础知识
'''爬虫的构成下载器: 抓取页面 urllib equests selenium + webdriver解析器: 解释并提取页面元素 BeautifulSoup4 PyQuery Xpath Reg ...

js 模拟css3 动画3

js 模拟css3 动画3的更多相关文章

随机推荐

热门专题