js动画效果（移动、变化效果）实现整理

JavaScript动画效果实现与步骤解析

最新推荐文章于 2025-10-11 09:15:03 发布

原创

最新推荐文章于 2025-10-11 09:15:03 发布 · 2w 阅读

6 ·

CC 4.0 BY-SA版权

本文总结了JavaScript实现图片减速滑动等动画效果的常见步骤。首先定义当前属性值current和目标值target，然后使用setInterval定时器按一定间隔更新current值，当current等于target时停止定时器。这种模式在创建网页动态效果中十分常见。

如在前两篇博客中的效果，图片实现减速滑动到指定位置，在网页效果上看起来比较美观，对用户比较友善，这种效果的实现整理下发现有一个固定的模式。

实现步骤：

定义需要修改的属性当前值：var current = 0；
定义需要修改的属性目标值：var target = 值；
定义一个定时器对象：var timeinter= null;
借助setInterval来循环按针每20毫秒修改current值一次
当current值和target值相等时，则停止setInterval方法的执行

值得注意的是，在每次调用setinterval这个方法前，要清空之前的setinterval，不然会出现多个同时跑。这里可以理解为java的线程，每次运行setinterval都跑了一个小线程，而我们想要的效果是每次只跑一个线程，如果不清空就会导致多个setinterval作用在一个对象上面，使得动画效果越来越快或出现其他不正常的效果。定时器timeinter的作用就是在下一个setingerval跑之前清空前一个。

代码结构示例：

var srcInter = null; 
var current = 0;
    window.onscroll = function () {
        var target = 400;
        clearInterval(timeinter);
        timeinter= setInterval(function(){
            current = current +(target-current)/20;
            obj.style.top = current+"px";		//实现obj对象的移动效果
        },20);
    }