原生js实现简单动画效果

最新推荐文章于 2024-07-13 20:06:19 发布

小白彡不白

最新推荐文章于 2024-07-13 20:06:19 发布

阅读量1.8k

点赞数 1

分类专栏：原生js

本文链接：https://blog.csdn.net/linglingzi001/article/details/105468238

版权

本文介绍了如何使用原生JavaScript实现简单的匀速和缓动动画效果。通过示例展示了如何实现元素的水平移动，并讲解了getComputedStyle()方法来获取元素样式，为实现多属性缓动动画奠定了基础。

摘要由CSDN通过智能技术生成

使用原生js实现简单动画效果

实现动画效果可以用jQuery提供的animate方法，或一些插件来实现，但是随着前端组件化开发的流行，
jQuery大量的DOM操作已经显得十分多余，正在逐渐从前端技术栈中被淘汰，下面我们使用原生js实现简单的匀速动画效果和缓动效果

匀速动画实现水平移动
css样式

<style>
        #box {
   
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 0px;
        }

        .line400 {
   
            width: 1px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 400px;
            top: 100px;
        }

        .line800 {
   
            width: 1px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 800px;
            top: 100px;
        }
    </style>

html结构和js代码

<body>
    <div id="box"></div>
    <div class="line400"></div>
    <div class="line800"></div>

    <input type="button" value="右移400" id="r1">
    <input type="button" value="右移800" id="r2">

    <script>
        var box = document.getElementById("box");
        var box2 = document.getElementById("box2");
        var btnR1 = document.getElementById("r1");
        var btnR2 = document.getElementById("r2");

        btnR1.onclick = function () {
   
            Animation(box, 400);
        };

        btnR2.onclick = function () {
   
            Animation(box, 800);
        };

        // 封装动画函数
        function Animation(ele, target) {
   
            // 先清除动画
            clearInterval(ele.tid);
            // 获取当前位置
            var currentLeft = ele.offsetLeft;
            // 判断左移右移
            var isLeft = (currentLeft