Javascript之运动框架2

运动框架2与运动框架1的不同之处在于，运动框架2是框架1的升级版，首先完善了传入值，改为move（obj，json，options）,在options里面，可以选择传入或者不传入时间，运动形式，以及函数。其次，增加了多种运动形式,即引入了tween.js,其里面包含了多种运动形式，具体如下：

tweens.js:

在move.js里直接引进用即可；

/**
 * Created by 潘泽慧 on 2016/11/7.
 */
//t  当前时间
//b  初始值
//c  总距离
//d  总时间
//var cur=option.easing(t,b,c,d)
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*0.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*0.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*(0.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 -0.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)*0.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+0.75)+b}else{if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b}}}},
        easeInOut:function(t,b,c,d){if(t<d/2){return Tween.Bounce.easeIn(t*2,0,c,d)*0.5+b}else{return Tween.Bounce.easeOut(t*2-d,0,c,d)*0.5+c*0.5+b}}}};

move.js:

　　　　　　不同之处在于红色加粗斜体部分。

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*0.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*0.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*(0.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 -0.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)*0.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+0.75)+b}else{if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+0.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+0.984375)+b}}}},easeInOut:function(t,b,c,d){if(t<d/2){return Tween.Bounce.easeIn(t*2,0,c,d)*0.5+b}else{return Tween.Bounce.easeOut(t*2-d,0,c,d)*0.5+c*0.5+b}}}};

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

function move(obj, json, options) {
    clearInterval(obj.timer);
    options = options || {};
    options.time = options.time || 500;
    options.easeing = options.easeing || Tween.Expo.easeOut;
    var dis = {};
    var start = {};
    for (var name in json) {
        start[name] = parseFloat(getStyle(obj, name));
        dis[name] = json[name] - start[name];
    }
    var count = Math.floor(options.time / 30);
    var n = 0;
    obj.timer = setInterval(function () {
        n++;
        for (var name in json) {
            var cur = options.easeing(n/count*options.time,start[name],dis[name],options.time);
            if (name == 'opacity') {
                obj.style.opacity = cur;
                obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
            } else {
                obj.style[name] = cur + 'px';
            }
        }
        if (n == count) {
            clearInterval(obj.timer);
            options.fn && options.fn();
        }
    }, 30);
}
html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background:red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function(){
            var oBox = document.getElementById('box');
            //var b = Tween.Back.easeIn;
            //var b = Tween.Bounce.easeOut;
            //var b = Tween.Circ.easeInOut;
            //var b = Tween.Elastic.easeIn;
            //var b = Tween.Expo.easeOut;
            //var b = Tween.Quad.easeIn;
            //var b = Tween.Quart.easeOut;
            //var b = Tween.Quint.easeIn;
            //var b = Tween.Sine.easeInOut;
            var b = Tween.Back.prototype;
            oBox.onclick = function(){
                move(this,{left:700},{easeing:b});
            }
        }
    </script>
</head>

<body>
<div id="box"></div>
</body>
</html>

Javascript之运动框架2的更多相关文章

【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
javascript：运动框架
function startMove(obj,json,fnEnd) { clearInterval(obj.timer);//清除定时器 obj.timer=setInterval(function ...
javascript中的动画的实现以及运动框架的编写（1）
大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理
等待已久的可变大,变宽等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...
javascript运动框架（三）
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...

随机推荐

php日期，时间相关知识整理
unix 时间戳:从1970年1月1日0点开始到当前时间所经过的秒数. 1.将日期转换为UNIX时间戳 mktime():可以自动校正越界的输入原型 : mktime(hour,minute,sec ...
CPlus的简单线程的制作
1.线程需要用到<widnows.h> 2.利用句柄创建并执行线程: HANDLE hThread = CreateThread(NULL, 0, Fun, &tp, 0, NUL ...
Pyhton 学习总结 20 ：执行系统命令
在Python中执行系统命令有os.system().os.popen().commands.getstatusoutput().subprocess.Popen等 1.os.system() ...
。。。contentType与pageEncoding的区别。。。
今天,开始换了一个新的开发工具IDEA,目前还不熟悉,新建了一个简单的Web项目,用到了Servlet,out.print("大家好!");然后就输出乱码了,用了response. ...
C语言通用双向循环链表操作函数集
说明相比Linux内核链表宿主结构可有多个链表结构的优点,本函数集侧重封装性和易用性,而灵活性和效率有所降低. 可基于该函数集方便地构造栈或队列集. 本函数集暂未考虑并发保护. 一 ...
SQL优化大全
1. 优化SQL步骤 1. 通过 show status和应用特点了解各种 SQL的执行频率通过 SHOW STATUS 可以提供服务器状态信息,也可以使用 mysqladmin extende d ...
多浏览器兼容用javascript获取url参数的方法比较推荐的一种
多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...
初识Python第二天（1）
在Python中,一切事物都是对象,对象是基于类创建的,对象继承了类的属性,方法等. 一.传递参数 1.1新建python文件,名为twoday_args.py,输出以下代码 import sys p ...
HTML5 aria- and role
HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet ...
20160622001 GridView 删除列用模板实现删除时提示确认框
GridView在使用CommandField删除时弹出提示框,在.net2005提供的GridView中我们可以直接添加一个 CommandField删除列:<asp:CommandField ...

Javascript之运动框架2

Javascript之运动框架2的更多相关文章

随机推荐

热门专题