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

随机推荐

理解微信小程序的生命周期和运行原理
写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...
我的第一个爬虫程序：利用Python抓取网页上的信息
题外话我第一次听说Python是在大二的时候,那个时候C语言都没有学好,于是就没有心思学其他的编程语言.现在,我的毕业设计要用到爬虫技术,在网上搜索了一下,Python语言在爬虫技术这方面获得一致好 ...
【paper】MTCNN
参考 1. MTCNN笔记; 完
软件工程 week 03
一.效能分析 1.作业地址:https://edu.cnblogs.com/campus/nenu/2016CS/homework/2139 2.git地址:https://git.coding.ne ...
mysql连接拍错总结
1. ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10060) ? 关闭网络防火墙.
加载XML文件到系统中
using System;using System.Data;using System.IO;using System.Xml;using System.Collections.Generic; na ...
Java web现在流行用什么框架?
Java是开源的,框架很多,这些框架都能解决特定的问题,提高开发效率.简化我们的代码复杂度,现在除了很多大家通用的一些主流框架外,很多公司针对自己的业务会自定义一些公司内部的框架,当然作为学习者我们首 ...
Dynamics 365 CRM Free up storage 清理Dynamics 365 CRM的空间
Dynamics 365 CRM 的空间是要买的. 但是很多情况下用户可以去清理CRM从而达到给空间减重的方法两大使用DB空间大的功能 1. Audit log 审计记录审计记录是用来记录各个fi ...
Java注解总结2
注解是Java元数据,可以理解成代码的标签,正确使用能极大的简化代码的编写逻辑,在各种框架代码中使用也越来越多. 一.注解的应用场景生成doc文档: 编译器类型格式检查: 运行时处理如注入依赖等二 ...
python 常用的模块
面试的过程中经常被问到使用过那些python模块,然后我大脑就出现了一片空白各种模块一顿说,其实一点顺序也没有然后给面试官造成的印象就是自己是否真实的用到这些模块,所以总结下自己实际工作中常用的模块: ...

js 模拟css3 动画3

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

随机推荐

热门专题