运动函数以及抖动函数的封装

最新推荐文章于 2022-11-16 22:00:42 发布

当时惘然

最新推荐文章于 2022-11-16 22:00:42 发布

阅读量797

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/u010528093/article/details/51459264

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、运动函数
考虑一下问题：有一目标处于left值为10px位置处，需要运动到left位1000px位置处。

var oDiv = document.getElementById('div1');

var timer = null;

timer = setInterval(function(){

    oDiv.style.left = parseInt(getStyle(oDiv, 'left')) + 10 + 'px';

    if( parseInt(getStyle(oDiv, 'left'))>=1000 ){
        clearInterval(timer);
        oDiv.style.left = 1000 + 'px';
        } 

    },30)

为了防止到达目标点后的抖动幅度过大问题，可以将目标点判断放在外面：

var oDiv = document.getElementById('div1');

var timer = null;

timer = setInterval(function(){

    var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;

    if(iSpeed>=1000){
        iSpeed = 1000;
        }

    oDiv.style.left = iSpeed + 'px';

    if ( ispeed == 1000 ) {
        clearInterval(timer );
        }

    },30)

为了后续封装函数的方便，避免全局变量，可以将定时器设为自定义属性管理：

var oDiv = document.getElementById('div1');

oDiv.timer = setInterval(function(){

    var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;

    if(iSpeed>=1000){
        iSpeed = 1000;
        }

    oDiv.style.left = iSpeed + 'px';

    if ( ispeed == 1000 ) {
        clearInterval( oDiv.timer );
        }

    },30)

接下来对函数进行抽象：
需要考虑改变的因素有目标体、目标点、变化属性、变化速度，已经到达目标值得后续操作（回调函数）

function doMove ( obj, attr, dir, target, endFn ) {

    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;  //判断方向

    clearInterval( obj.timer );

    obj.timer = setInterval(function () {

        var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长

        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }

        obj.style[attr] = speed + 'px';

        if ( speed == target ) {
            clearInterval( obj.timer );

            endFn && endFn();             //回调函数存在则执行
        }

    }, 30);
}

2、抖动函数

function shake ( obj, attr, endFn ) {
    var pos = parseInt( getStyle(obj, attr) );
    var arr = [];           // 20, -20, 18, -18 ..... 0
    var num = 0;

    for ( var i=20; i>0; i-=2 ) {
        arr.push( i, -i );
    }
    arr.push(0);

    clearInterval( obj.shake );
    obj.shake = setInterval(function (){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if ( num === arr.length ) {
            clearInterval( obj.shake );
            endFn && endFn();
        }
    }, 50);
}