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 代 ...

随机推荐

python自学第12天模块
json , pickle模块 json,用于字符串和python数据类型间进行转换 pickle,用于python特有的类型和python数据类型间的进行转换 shelve 模块是一个简单的k,v ...
thinkphp获取后台所有控制器和action
<?phpnamespace Admin\Controller;use Think\Controller;class AuthorController extends PublicControl ...
api管理平台
安装和介绍安装要求:(centos安装环境) nodejs(7.6+) mongodb(2.6|+) 安装get和编译的工具 yum -y install wget make gcc gcc-c++ ...
Git 简介及简单操作
一.GIT是什么 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...
pytorch中，不同的kernel对不同的feature map进行卷积之后输出某一个channel对应的多个feature map如何得到一个channel的feature map
实际上在卷积操作的时候,比如说,我某一层输出的feature map的size为4713*13 channel的数目为7,设经过某卷积层之后,网络输出的feature map的channel的数目为1 ...
flask自定义转换器
根据具体的需求,有些时候是需要用到正则来灵活匹配URL,但是Flask的路由匹配机制是不能直接在路由里直接写正则的,这时候就需要使用转换器! Flask的默认转换器: DEFAULT_CONVERTE ...
【HDU5187】contest
真的没有什么会写的东西了QAQ 原题: As one of the most powerful brushes, zhx is required to give his juniors n probl ...
解决WPF中异常导致的程序Crash
通常在WPF中出现异常,会导致程序Crash,即使把异常Throw出来,依旧会报错,解决方法只需在App.xaml.cs中进行处理即可,废话不说,代码如下: private int exception ...
1.1.18 Word里将“字体加红”自定义为快捷方式
1.单击[文件]>[选项]: 2.选择[自定义功能区],单击[键盘快捷方式]旁的[自定义]: 3.在[类别]菜单中选择[开始选项卡]:在[命令]菜单中选择[FontColorPicker] (或 ...
Spring生态研习【三】：Spring-kafka
1. 基本信息介绍基于spring的kafka应用,非常简单即可搭建起来,前提是要有一个kafka的broker集群.我在之前的博文里面已经介绍并搭建了一套broker环境,参考Kafka研究[一] ...

js 模拟css3 动画3

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

随机推荐

热门专题