动画封装四：用json实现多条样式的缓动运动

JavaScript动画实现页面元素运动

最新推荐文章于 2025-09-11 09:44:35 发布

原创最新推荐文章于 2025-09-11 09:44:35 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了使用JavaScript结合HTML和CSS实现页面元素的动画运动，包括定义动画结构、使用JSON对象设置目标样式以及通过定时器函数实现缓动效果。重点阐述了如何在不同样式属性间平滑过渡，同时提供了关键代码片段和示例。

基础样式：

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

html 骨架：

<button id='btn'>运动</button>
<div id='div'>变</div>

javascript 结构：

var div = document.getElementById('div');
var json = {'width':50,'height':50,'line-height':50,
            'left':200,'top':200,'opacity':60,
            'zIndex':2,'font-size':16
           };
btn.onclick =  function () {
    animate(div,json,over);
}
// 这里定义一个回调函数
function over() {
    alert('当前动画执行完毕');
}

/**
 * 用json实现多条样式的缓动运动函数封装
 * @param  {[type]}   obj       运动对象
 * @param  {[type]}   json      目标距离
 * @param  {Function} fn        回调函数
 * @return {[type]}             null
 */
function animate(obj,json,fn) {
    clearInterval(obj.timer);
    var step = 0;
    var current = 0; // 当前值
    obj.timer = setInterval(function() {
        var flag = true;
        for(var k in json) {
            // 对 opacity 初始化处理，乘上100来参与缓动运算
            if( k == 'opacity' ) {
                current = Math.round( getStyle(obj,k) * 100 ) ;
                if(getStyle(obj,k) == 0) {
                  json[k] *=100;
               }
            } else if( k == 'z-index' ||  k == 'zIndex') {
                // 如果得不到z-index ，那么赋0处理
                current = getStyle(obj,k) || 0;
            } else {
                // 把字符串变成纯数字 若是top,left等没定义默认给0
                current = parseInt( getStyle(obj,k) ) || 0;
            }
            step = (json[k] - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            // 对 opacity 进行样式处理
            if( k == 'opacity' ) {
                // 把不透明度除100 还原 ，并赋值。
                obj.style[k] = current / 100 ;
                obj.style['filter'] = 'alpha(opacity='+ current / 100 +')';
            } else if ( k == 'z-index' || k == 'zIndex' ) {
                current = json[k];
                // 直接变化，不需渐变
                obj.style.zIndex = json[k];
            } else {
                obj.style[k] = current + 'px';
            }
            if( current != json[k] ) {
                flag = false;
            }
        }
        if(flag) {
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
        }
    },10);
}

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