动画封装一：实现水平匀速运动

最新推荐文章于 2022-06-28 15:06:06 发布

原创最新推荐文章于 2022-06-28 15:06:06 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了使用JavaScript和CSS实现元素水平平移动画的方法，包括HTML骨架布局、CSS清除默认样式、JavaScript事件监听和动画函数封装。

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/
*{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>
<div id='div'></div>

javascript 结构：

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var div = document.getElementById('div');
// 这个是运动完成的一个标识
var finish = true;
btn1.onclick = function () {
    animateOver(div,400,finish,over);
}
btn2.onclick = function () {
    animateOver(div,200,finish,null);
}

/**
 * 这个函数的 if 判断 和 animate 里面的 finish 赋值
 * 是防止 连续点击不同按钮造成死锁
 * 状态，应该对点击进行节流处理
 */
function animateOver(obj,target,flag,fn) {
    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 = 10;
    obj.timer = setInterval(function() {
        step = target > obj.offsetLeft ? 10 : -10;
        // 先检测距离得到一个值
        var result = target - obj.offsetLeft ;
        // 再实现缓动运动
        obj.style.left = obj.offsetLeft + step + 'px';
        finish = false;
        if( result == 0 ) {
            // 直接赋值，解决抖动问题
            obj.style.left = target + 'px';
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
            finish = true;
        }
    },10);
}

// 得到对象当前的样式函数
function getStyle(obj,attr) {
    return obj.currentStyle?obj.currentStyle[attr]:window.getComputedStyle(obj,null)[attr];
}