动画封装三：单条样式的缓动运动_typescript缓动函数-CSDN博客

本文链接：https://blog.csdn.net/Tyro_java/article/details/50449892

本文介绍如何通过JavaScript实现按钮控制网页元素的宽度、高度、偏移等动态变化，展示网页交互设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/ 
*{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">高度变成400px</button>
<button id="btn3">偏移运动800px</button>
<button id="btn4">偏移运动0px</button>
<button id="btn5">宽度变成200px</button>
<button id="btn6">高度变成200px</button>
<div id='div'></div>

javascript 结构：

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var btn5 = document.getElementById('btn5');
var btn6 = document.getElementById('btn6');
var div = document.getElementById('div');


// 节流的标识
var finish = true;


btn1.onclick = function () {
    animateOver(div,'width',400,over,finish);
}
btn2.onclick = function () {
    animateOver(div,'height',400,null,finish);
}
btn3.onclick = function () {
    animateOver(div,'left',800,null,finish);
}
btn4.onclick = function () {
    animateOver(div,'left',0,null,finish);


}
btn5.onclick = function () {
    animateOver(div,'width',200,null,finish);
}
btn6.onclick = function () {
    animateOver(div,'height',200,null,finish);
}
// 同水平匀速运动，点击事件的节流
function animateOver(obj,attr,target,fn,flag) {
    if( flag ) {
        animate(obj,attr,target,fn);
        return ;
    }
    flag = false;
}


// 这里定义一个回调函数
function over() {
    alert('当前动画执行完毕');
}
/**
 * 单个样式的缓动运动函数封装
 * @param  obj       运动对象
 * @param  attr      样式属性
 * @param  target    目标距离
 * @param  fn        回调函数
 * @return           null
 */
function animate(obj,attr,target,fn) {
    if( target == parseInt( getStyle(obj,attr) ) ) {
        alert( '当前状态与运动类型相同，请重新选择运动类型！' );
        return;
    }
    obj.timer = null;
    clearInterval(obj.timer);
    var step = 0;
    var current = 0;
    obj.timer = setInterval(function() {
        current = parseInt( getStyle(obj,attr) );
        step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        obj.style[attr] = current + step + 'px';
        finish = false;
        if( current == 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];
}