Web前端开发笔记46——动画原理、缓动效果、页面返回特定位置

最新推荐文章于 2024-07-22 17:13:29 发布

原创最新推荐文章于 2024-07-22 17:13:29 发布 · 436 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js

#Web前端开发入门专栏收录该内容

57 篇文章

订阅专栏

本文讲解了利用定时器实现动画的基本原理，如何设置position使元素移动，如何为每个元素单独设置timer，并提到了清除叠加定时器的方法。还介绍了缓动效果和给动画函数添加回调，以及滚动窗口至特定位置的技术。

1.动画原理：最核心的原理，通过定时器（setInterval）不断移动盒子位置。

2.动画在制作的时候，要对对象施加position参数，不然元素对象是不会动的。

3.我们对不同的对象设置不同的timer可以使用‘obj.元素’的方式来声明timer，这样每个元素都有属于自己的timer了。

4.上面的代码有一个bug，就是在多次触发的情况下timer会多次叠加，这个时候我们就要用到clearInterval来先清楚，在执行。

5.缓动效果。

<button id="clickme">click</button>
<div class="newdiv" id="newdiv"></div>
<script>
    var clickme = document.getElementById('clickme');
    var getdiv = document.getElementById('newdiv');

    function animateslowmove(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + (target - obj.offsetLeft) / 50 + 'px';
        }, 30);
    }

    clickme.addEventListener('click', function () {
        animateslowmove(getdiv, 500)
    })


</script>

上面是一个典型的例子。

6.给动画函数添加回调函数。