JS-动画

喜欢ヅ旅行 2024-03-17 23:51 82阅读 0赞

### 动画 ###

#### 动画实现原理 ####

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1.  获得盒子当前位置
2.  让盒子在当前位置加上1个移动距离
3.  利用定时器不断重复这个操作
4.  加一个结束定时器的条件
5.  注意此元素需要添加定位，才能使用element.style.left

// 实现了一个简单的动画效果
    <style>
        div {
            position: absolute;
            left = 0;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <body>
        <div></div>
        <script>
            div = document.querySelector('div');
            var timer = setInterval(function(){
                if(div.offsetLeft >= 400){
                    clearInterval(timer);
                }
                div.style.left = div.offsetLeft + 1 + 'px';
            } , 100);
        </script>
    </body>

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自 己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

// 用函数封装 传入对象 将定时器作为对象的一个属性
    var obj.timer = setInterval(function(){
                if(div.offsetLeft >= 400){
                    clearInterval(timer);
                }
                div.style.left = div.offsetLeft + 1 + 'px';
            } , 100);

#### 缓动效果原理 ####

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

**实现：**

1.  让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2.  核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
3.  停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4.  注意步长值需要取整