运动—运动框架

第一步:
首先要获取你要改变的那个div。
var oBox=document.getElementById(‘box‘); //div对象

第二步:
(1). 定义一个move函数。怎么定义?
首先我们要操作什么?怎么操作?操作结束后的收尾工作?
-----> oBox (div对象)
-----> 我们希望他变成什么样子的?例如left改变,例如top改变。这个肯定是json的形式. {left:200, top:400}
----->收尾工作?那就是一个function. 可选.
move(obj, json, options)

第三步:
在move函数中的步骤:
(1). 因为第三个参数options是可选的,所以我们首先需要对这个参数进行确定,如果有就使用,如果没有,就进行默认参数设置。
options=options||{};
options.duration=options.options||700;
options.easing=options.easing||‘liner‘;

(2)设置初始值和距离

因为我们的物体的运动结束后有一个结束位置,这个位置是move第二个参数json指定的,既然有结束位置,那我们需要确定起始位置,变化的范围就是结束位置减去开始位置,在这里我们指代的就是距离

var start={};  //初始值
var dis={};  //变化的值
for(var name in json){
start[name]=parseFloat(getStyle(obj,name)); //获得初始值
dis[name]=json[name]-start[name];   //变化的值等于结束值减去初始值
};

(3). 我们希望多久走完全程。这个是在第三个参数中指定的options.duration。并且总共需要运动count次。

var count=Math.floor(options.duration/30);

定义一个变量,存放当前已经运动的次数:

var n=0;

(4). 开定时器,每30ms运动一次

obj.timer=setInterval(function(){
            n++;
            for(var name in json){
                switch(options.easing){
                    case ‘liner‘:
                        var a=n/count;
                        var cur=start[name]+dis[name]*a;
                    break;

                    case ‘ease-in‘:
                        var a=n/count;
                        var cur=start[name]+dis[name]*Math.pow(a,3);
                    break;

                    case ‘ease-out‘:
                        var a=1-n/count;
                        var cur=start[name]+dis[name]*(1-Math.pow(a,3));
                    break;
                };

                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.complete&&options.complete();
            }
        },30);

(a).第一次运动:

(1). n=n+1,此时n就是1了。

(2). 判断物体的运动方式,匀速,加速等。在这里,我们分析匀速运动。

此时我们走的总的全程是:n/count--------> 1/count, 运动的比例。

我们的全程运动距离是dis[name], 例如说我们现在分析的是left的运动,就是匀速向左运动,改变的就是left的值,那么这里的全程距离就是dis[left]。例如等于200px.

那么我们的第一次运动的距离就是:dis[left] * (1/count) ===200*(1/count).

那么我们的物体第一次运动结束后的结束距离是等于初始值加上第一次运动的距离: cur = start[left] + 200*(1/count)

那么第一次运动结束后,物体的所在位置:obj.style[left]=cur+‘px‘;

(b).第二次运动:

(1). n=n+1,此时n就是2了。

(2). 判断物体的运动方式,匀速,加速等。在这里,我们分析匀速运动。

此时我们走的总的全程是:n/count--------> 2/count, 运动的比例。

我们的全程运动距离是dis[name], 例如说我们现在分析的是left的运动,就是匀速向左运动,改变的就是left的值,那么这里的全程距离就是dis[left]。例如等于200px.

那么我们的第一次运动的距离就是:dis[left] * (2/count) ===200*(2/count).

那么我们的物体第一次运动结束后的结束距离是等于初始值加上第一次运动的距离: cur = start[left] + 200*(2/count)

那么第一次运动结束后,物体的所在位置:obj.style[left]=cur+‘px‘;

........后面依次类推

(5)当n==count运动结束

(a)关闭定时器,此次运动结束

(b)判断options中是否有传入回调函数,如果有传入回调函数,则执行此回调函数

if(n==count){
    clearInterval(obj.timer)
    options.complete&&options.complete();
}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #box{
            width: 150px;
            height: 150px;
            background: red;
            position: absolute;
            left: 0;
            top:0;
        }
    </style>
    <script>
    function getStyle(obj,name){
        return (obj.currentStyle||getComputedStyle(obj,false))[name];
    }

    function move(obj,json,options){
        //设置默认值

        options=options||{};
        options.duration=options.options||700;
        options.easing=options.easing||‘liner‘;

        //总次数
        var count=Math.floor(options.duration/30);

        //设置初始值和距离
        var start={};
        var dis={};
        for(var name in json){
            start[name]=parseFloat(getStyle(obj,name));
            dis[name]=json[name]-start[name];
        };

        //当前走的次数
        var n=0;

        obj.timer=setInterval(function(){
            n++;
            for(var name in json){
                switch(options.easing){
                    case ‘liner‘:
                        var a=n/count;
                        var cur=start[name]+dis[name]*a;
                    break;

                    case ‘ease-in‘:
                        var a=n/count;
                        var cur=start[name]+dis[name]*Math.pow(a,3);
                    break;

                    case ‘ease-out‘:
                        var a=1-n/count;
                        var cur=start[name]+dis[name]*(1-Math.pow(a,3));
                    break;
                };

                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.complete&&options.complete();
            }
        },30);

    }

    window.onload=function(){
        var oBox=document.getElementById(‘box‘);
        move(oBox,{left:300,width:300},{
            complete:function(){
                move(oBox,{top:200})
            }
        })
    };

    </script>

</head>
<body>
    <div id="box"></div>
</body>
</html>
时间: 2024-10-17 11:01:13

运动—运动框架的相关文章

缓冲运动之框架開始一级简单框架实例

***********************缓冲运动[框架開始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

缓冲运动之框架开始一级简单框架实例

***********************缓冲运动[框架开始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

运动高级--框架开发

链式运动框架开发 回调函数 •运动停止时,执行函数 /** * @author miaov */ //获取行间样式 function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } //计算对象 属性 数值 未执行函数 function startMove(obj, attr, iT

js实现运动的框架实例

html代码:鼠标移入时多物体实现高宽同时变化接着改变透明度 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="t.css"

js运动 运动效果留言本

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #ul1 { margin: 0; position: absolute; right: 10px; top: 8px; width

JS运动---运动基础(缓冲运动)

(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数值并没有四舍五入计算,200.9px最后依然是200px 速度不能是小数,需要取整,所以接下来进行取整 因为从左到右运动和从右到左运动不一样,所以需要判断 (3)右侧悬浮框缓冲运动 <!DOCTYPE HTML> <html> <head> <meta charset

简单的JS多物体的运动---运动和透明度的变化

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. http://blog.csdn.

使用原生JS实现一个风箱式的demo,并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. 1 function getStyle(obj,attr) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr];//为了获取IE下的属性值 4 }else{ 5 return window.getComputedStyle(ob

JavaScript 基础入门11 - 运动框架的封装

目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 JavaScript 运动原理 运动基础 在JavaScript中,如何让一个页面元素动起来? 首先,我们需要了解的是,在JavaScript中如何让一个页面元素动起来. 我们先来实现一个简单的功能,当我们点击按钮之后,让一个元素动起来.并且到达500的边界之后立刻停止下来. <!DOCTYPE html> <html> &l