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

随机推荐

洛谷p1067
题目https://www.luogu.org/problemnew/show/P1067 #include<iostream> #include<cstdio> #inclu ...
php优秀框架codeigniter学习系列——CI_Router类学习
这篇文章主要介绍CI核心框架工具类CI_Router. 如果说CI_URI类是用来解析URI,那么CI_Router类就应该是根据解析出来的URI来决定究竟访问哪一个文件和哪一个function. 详 ...
WCF分布式服务1-核心概念
参考msdn library for WCF Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架. 借助 WCF,可以将数据作为异步消息从 ...
jmeter4.0安装记录
前提:jmeter需配置环境变量jdk,jmeter4.0版本需1.7以上版本, 查看jdk版本命令java -version 1.官网http://jmeter.apache.org/downloa ...
centos安装tomcat步骤
1.官网或wget下载apache-tomcat-8.5.9.tar.gz: cd /home/tar wget xxxxxxxxxx cp /home/tar/apache-tomcat-8.5.9 ...
【Jmeter】api性能测试总结
1.前提概念平时常用的性能测试:api性能测试+场景性能测试:今天就说一说api性能测试 2.如何进行性能测试? 需求:对某api进行性能测试,看看最大承受的并发数,分析下图表分析: 错误思路:当 ...
H3C交换机限制子网之间的相互访问
acl number 3000 rule 1 permit ip source 10.0.5.0 0.0.0.255 destination 172.16.1.100 0 #允许10.0. ...
Asp.net：上传文件超过了最大请求长度
错误消息:超过了最大请求长度错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S. 解决方案 1. 修改web.config文件可以改变这个默认值 ...
c++ CreateProcess调用dos命令
// test.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h> #include &l ...
ES6 基本语法
ECMAScript 6 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScrip ...

js 模拟css3 动画3

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

随机推荐

热门专题