让div运动起来 js实现缓动效果

让div运动起来并实现缓动效果是Web开发中常见的需求之一。JS可以实现动态控制DOM节点的属性值，通过操作CSS属性的变化来实现节点的平移、缩放、旋转等动画效果，同时还可以结合缓动算法，使得CSS属性的变化更加平滑、自然。以下是一些实现div缓动效果的攻略和示例：

1.缓动算法介绍

在实现缓动效果时，使用缓动算法可以让CSS属性的变化更加自然、平缓，提升动画的质量和用户体验。缓动算法是指根据某个物体的移动距离和时间差，计算出合适的加速度来使物体的移动呈现出渐变性。

例如，我们常用的Tween.js库中封装了多个缓动算法，如线性缓动、二次缓动、三次缓动、四次缓动、正弦缓动、指数缓动等。不同的缓动算法可以满足不同的需求，选择合适的缓动算法可以让动效更加符合人类行为规律，视觉效果更佳。

2.实现缓动动画的核心代码

在实现缓动动画时，我们需要做到以下几点：

• 获取节点初始位置、目标位置
• 计算出节点应该移动的距离和时间差
• 基于缓动算法，根据时间比例计算出当前的加速度值
• 更新节点的CSS属性，实现动画效果

核心代码如下所示：

//获取节点样式
function getStyle(node,styleName) { 
    var styleValue="";
    if(node.style[styleName]){
        styleValue=node.style[styleName];
    }else if(node.currentStyle){ 
        styleValue=node.currentStyle[styleName];
    }else if(document.defaultView && document.defaultView.getComputedStyle){
        styleName=styleName.replace(/([A-Z])/g,'-$1');
        styleName=styleName.toLowerCase();
        var nodeList=document.defaultView.getComputedStyle(node,null);
        if(nodeList){
            styleValue=nodeList.getPropertyValue(styleName);
        }
    }
    return styleValue;
}

//缓动函数，返回当前时间下应移动的距离
function easeIn(startPos,endPos,t,duration) {
    var dis=endPos-startPos;
    return dis*(t/duration)*t+startPos;  //缓动算法的实现
}

//更新节点的CSS属性
function render(node,attr,value) {
    node.style[attr]=value+"px";
}

//缓动动画的实现
function animate(node,attr,endPos,duration) { 
    clearInterval(node.timer);
    var startPos=parseInt(getStyle(node,attr));
    var t=0;
    node.timer=setInterval(function() {
        t+=50;
        if(t>=duration){
            t=duration;
            clearInterval(node.timer);
        }
        var currentValue=easeIn(startPos,endPos,t,duration);
        render(node,attr,currentValue);
    },50);
}

3.示例一：应用缓动算法实现图片轮播动画

我们可以通过缓动算法实现图片轮播的动画效果，下面是示例代码：

<style>
    #wrap {
        position: relative;
        height: 200px;
        overflow: hidden;
    }
    #imgList {
        position: absolute;
        width: 1500px;
        height: 200px;
        left: 0;
        top: 0;
    }
    #imgList img {
        width: 500px;
        height: 200px;
        float: left;
    }
    #prevBtn, #nextBtn {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: white;
        top: 75px;
        opacity: 0.7;
        z-index: 999;
        cursor: pointer;
    }
    #prevBtn:hover, #nextBtn:hover {
        opacity: 1;
        background-color: yellow;
    }
    #prevBtn {
        left: 0;
    }
    #nextBtn {
        right: 0;
    }
</style>
<div id="wrap">
    <div id="imgList">
        <img src="./images/0.jpg" alt="0">
        <img src="./images/1.jpg" alt="1">
        <img src="./images/2.jpg" alt="2">
        <img src="./images/3.jpg" alt="3">
        <img src="./images/4.jpg" alt="4">
    </div>
    <div id="prevBtn">&lt;</div>
    <div id="nextBtn">&gt;</div>
</div>
<script>
    var wrap=document.getElementById("wrap");
    var imgList=document.getElementById("imgList");
    var prevBtn=document.getElementById("prevBtn");
    var nextBtn=document.getElementById("nextBtn");
    var currentIndex=0;
    var imgWidth=500;
    var duration=500;
    var easingFunction=TWEEN.Easing.Quadratic.Out; //缓动函数
    prevBtn.onclick=function() {
        currentIndex--;
        if(currentIndex<0){
            currentIndex=4;
            imgList.style.left=-2500; //循环轮播
        }
        var targetPos=-currentIndex*500;
        animate(imgList,"left",targetPos,duration,easingFunction);
    };
    nextBtn.onclick=function() {
        currentIndex++;
        if(currentIndex>4){
            currentIndex=0;
            imgList.style.left=0; //循环轮播
        }
        var targetPos=-currentIndex*500;
        animate(imgList,"left",targetPos,duration,easingFunction);
    };
</script>

4.示例二：应用缓动算法实现音量控制动画

我们可以通过缓动算法实现音量控制的动画效果，下面是示例代码：

<style>
    #volumeSlider {
        position: relative;
        width: 200px;
        height: 10px;
        background-color: gray;
        cursor: pointer;
    }
    #volumeSlider #thumb {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        top: -5px;
        left: 0;
    }
</style>
<div id="volumeSlider">
    <div id="thumb"></div>
</div>
<script>
    var volumeSlider=document.getElementById("volumeSlider");
    var thumb=document.getElementById("thumb");
    var startPos=0; //初始值为0
    var endPos=180; //最大值为180
    var duration=500;
    var easingFunction=TWEEN.Easing.Quadratic.Out; //缓动函数
    var currentValue=startPos;
    thumb.onmousedown=function(event) { //添加鼠标按下事件
        var startX=event.clientX;
        var left=parseInt(getStyle(thumb,"left"));
        var current=target=startX-left;
        var dis=endPos-startPos;
        document.onmousemove=function(event) { //添加鼠标移动事件
            current=event.clientX-startX;
            target=startX-left+current;
            if(target<0){
                target=0; //防止拖出范围
            }
            if(target>180){
                target=180; //防止拖出范围
            }
            currentValue=easeIn(startPos,endPos,target,duration); //根据时间比例计算出当前的加速度值
            render(thumb,"left",currentValue); //更新节点的CSS属性
            event.preventDefault();
        };
        document.onmouseup=function() { //添加鼠标抬起事件
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
</script>