js animate动画基础

不愿意做鱼的小鲸鱼

发布于 2022-08-23 19:54:59

6.6K0

发布于 2022-08-23 19:54:59

文章被收录于专栏：web全栈web全栈

什么是animate

js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。

我们知道从a这一点到b这一点我们的运动方式有很多，

1.比如匀速运动到这一点

2.比如先快后慢，

3.必须先慢后快等等

animate就是这些运动的一个实现过程，js可以实现animate，运动的过程大多数也被封装在JQuery库中，下面就是用js来实现animate方法

封装animate

什么是封装：js封装就是将一些常用的函数方法写到一个.js文件里面，用函数的范式，以便于下次调用，或者多次调用。（必须先导入js文件）

下面就是animate的封装方法：

//返回el对象css样式中的property属性值
function getStyle(el, property) {
    if (getComputedStyle) {
        return getComputedStyle(el)[property];
    } else {
        return el.currentStyle[property];
    }
}
/* 对el对象css样式中的属性值进行更改，更改的内容在properties里面，properties是一个
属性对象数组，对每一个properties里的每一个对象值进行修改，并且产生由快到慢的动画
效果变化 */
function animate(el, properties) {
    clearInterval(el.timeId);
    //产生动态效果的方法
    el.timeId = setInterval(function() {
        for (var property in properties) {
            var current;
            var target = properties[property];
            //分为两种参数，一种是透明度，范围是0到1的变化
            if (property == "opacity") {
                current = Math.round(getStyle(el, "opacity") * 100);
            }
            //另一种是像素的变化，如width , height 等
            else {
                current = parseInt(getStyle(el, property));
            }
            //属性的变化速度（由快到慢）
            var speed = (target - current) / 30;
            //ceil向上取整  floor向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //重新设置el对象 css中的样式
            if (property == "opacity") {
                el.style.opacity = (current + speed) / 100;
            } else {
                el.style[property] = current + speed + "px";
            }
        }
    }, 20);

}

animate方法测试

1.首先在HTML里写个一盒子div 2.再在javascript中用document.querySelector()方法获取盒子样式对象 3.最后调用animate方法来使盒子产生运动

实现代码（ps：必须先将animate封装）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0px;
                padding: 0px;
            }
            #btn1{
                width: 100px;
                height: 100px;
                background-color: #ADFF2F;
                left: 0px;
                top: 0px;
                position: absolute;
                /* 透明度 */
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="btn1"></div>
        <script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var div = document.querySelector("#btn1");
            // alert(getStyle(div,"height"));
            animate(div,{
                width:200,
                left : 500,
                opacity:20
            });
        </script>
    </body>
</html>