动画封装二：实现水平缓动运动

最新推荐文章于 2018-03-25 22:47:52 发布

原创最新推荐文章于 2018-03-25 22:47:52 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript 基本小效果的实现 #函数

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用CSS和JavaScript实现的水平运动动画案例。通过不同的按钮触发，可以使一个div元素移动到指定的位置，并且在到达目标位置时可以触发回调函数进行通知。本文详细解释了如何利用JavaScript控制DOM元素的动画效果。

基础样式结构：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/ 
*{margin: 0;padding: 0;list-style: none;outline: none;}
div{position: absolute;left: 0;width: 200px;height: 200px;background-color: pink;}

html 骨架：

<button id="btn1">运动400px</button>
<button id="btn2">运动200px</button>
<button id="btn3">运动0px</button>
<div id='div'></div>

javascript 结构：

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var div = document.getElementById('div');
var finish = true;
btn1.onclick = function () {
    animateOver(div,400,over,finish);
}
btn2.onclick = function () {
    animateOver(div,200,null,finish);
}
btn3.onclick = function () {
    animateOver(div,0,null,finish);
}

// 同水平匀速运动，点击事件的节流
function animateOver(obj,target,fn,flag) {
    if( flag ) {
        animate(obj,target,fn);
        return ;
    }
    flag = false;
}
// 这里定义一个回调函数
function over() {
    alert('动画执行完毕');
}

/**
 * 实现可来回水平缓动函数的封装
 * @param  obj       运动对象
 * @param  target    目标距离
 * @param  fn        回调函数
 * @return           null
 */
function animate(obj,target,fn) {
    if( target == parseInt( getStyle(obj,'left') ) ) {
        alert( '当前状态与运动类型相同，请重新选择运动类型！' );
        return;
    }
    obj.timer = null;
    clearInterval(obj.timer);
    var step = 0;
    obj.timer = setInterval(function() {
        step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        obj.style.left = obj.offsetLeft + step + 'px';
        finish = false;
        if( obj.offsetLeft == target ) {
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
            finish = true;
        }
    },10);
}
// 得到对象当前样式的值函数
function getStyle(obj,attr) {
    return obj.currentStyle?obj.currentStyle[attr]:window.getComputedStyle(obj,null)[attr];
}