js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

 

主要实现以下几种简单的动画效果（其实原理基本相同）：

1.匀速动画：物体的速度固定

2.缓动动画：物体速度逐渐变慢

3.多物体动画

4.透明度动画

 

具体代码点击 https://github.com/sunyan1998/Some-demos （觉得不错顺手点个☆Star哦~感谢O(∩_∩)O~）

 

里面有很多CSS3/JS/jQuery小例子哦，包括各种轮播图、电梯导航、封装的动画函数、todolist、登录模态框（可拖动）、购物车、点击换肤、密码显示隐藏、各种布局（bootstrap-flex-rem）等等......

 

 

 

效果实现：

1.匀速动画（以物体左右匀速运动为例）

动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。

将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；

然后将 物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；

当物体到达目标位置时清除定时器；

　　var box = document.querySelector('.box'); // 获取box盒子
　　box.addEventListener("mouseover", function() {
　　    animate(400);  // 当鼠标经过盒子时，让盒子运动到400的位置
　　});
　　var timer = null;  // 声明一个变量来存储定时器
　　function animate(target) {  // target 目标位置
    　　clearInterval(timer);  // 开启定时器前要先关闭上一个定时器，不然定时器会累加导致速度越来越快
    　　timer = setInterval(function() {
        　　var speed = 10;  // 速度 固定值10
        　　speed = box.offsetLeft < target ? speed : - speed;  // 判断是向左走（负）还是向右走（正）
        　　if(box.offsetLeft == target) {
            　　clearInterval(timer);  // 盒子到达目标值时清除定时器
        　　} else {
            　　box.style.left = box.offsetLeft + speed + 'px';
        　　}
    　　},25)
　　}

 

2.缓动动画（和匀速运动相同原理，只不过速度做些改变）

让速度等于 目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；

二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整；

    var box = document.querySelector('.box');
    box.addEventListener("mouseover", function() {
        animate(400);
    });
    var timer = null;
    function animate(target) {
        clearInterval(timer);
        timer = setInterval(function() {
            var speed = (target - box.offsetLeft) / 10; // 速度为目标值和当前位置之差/10
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判断speed的正负，大于0向上取整，小于0向下取整
            if(box.offsetLeft == target) {
                clearInterval(timer);
            } else {
                box.style.left = box.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

3.多物体动画（相同原理，不过要多开器几个定时器）

因为有多个物体要做动画，所以要给每个物体都要开启一个定时器，向上边那样只声明一个timer是不行的，

所以要循环遍历每个li（我是用列表写了几个小盒子），给每个li声明一个timer来存储各自的定时器，

并且要给animate函数多添加一个形参obj来区分是哪个盒子的定时器

    var lis = document.querySelectorAll('li');
    for(var i = 0; i < lis.length; i++) {   // 循环遍历li
        lis[i].timer = null;   // 给每个li声明一个timer来存储定时器
        lis[i].addEventListener("mouseover", function() {
            animate(this, 400);
        });
    }
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var speed = (target - obj.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(obj.offsetLeft == target) {
                clearInterval(obj.timer);
            } else {
                obj.style.left = obj.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

4.透明度动画（与匀速运动相似）

声明一个alpha变量来存储当前的透明度，speed为速度，当前透明度加速度 赋值给盒子的透明度样式。

（多个物体透明度也是和上边多物体动画一样的，给每个物体都添加一个定时器，并给animate函数多一个形参obj）

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        opacity: 0.3;
        filter: alpha(opacity = 30); /* 兼容IE8及以下的IE浏览器 */
    }
</style>
<script>
    window.addEventListener('load', function() {
        var box = document.querySelector('.box');
        box.addEventListener('mouseover', function() {
            animateAlpha(100);  // 鼠标经过盒子 透明度变为1
        })
        box.addEventListener('mouseout', function() {
            animateAlpha(30);  // 鼠标离开透明度变为0.3
        })
        var alpha = 30;  // 存储当前透明度 初始值为30
        var timer = null;
        function animateAlpha(target) {
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 10;
                speed = alpha < target ? speed : - speed; // 判断速度的正负
                if(alpha == target) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    /* 这里有两个样式都需要改变 */
                    box.style.filter = 'alpha(opacity = '+ alpha +')';
                    box.style.opacity = alpha / 100; // opacity别忘了除以100
                }
            }, 25);
        }
    })
</script>