JavaScript 如何做动画

你有没有刷到过电商网站上那种“加购按钮一点就弹个小爱心飘起来”的效果？或者打开手机APP时，页面从一侧慢慢滑进来的过渡动画？这些看起来很炫酷的效果，大多是用JavaScript做的。很多人觉得动画是专业设计的事情，其实用代码就能轻松实现，不用复杂的软件，今天就用生活化的例子给你讲明白。

先搞懂：JS动画和生活里的“移动物体”一样

想象你手里拿个乒乓球，要把它从桌子左边移到右边，你会怎么做？肯定是一只手托着球，慢慢往右边挪，而不是突然让球“瞬移”过去——这就是动画的核心：不是一下子改变状态，而是分很多小步骤慢慢变。

JS做动画也是这个道理：它会把你要的最终效果（比如“按钮从左到右移100像素”）拆成几十甚至上百个小“帧”，每隔很短的时间（比如0.016秒，刚好对应手机屏幕每秒刷新60次的速度）就更新一次，最后连起来就成了流畅的动画。比如手机APP的启动页，就是JS控制页面从左到右慢慢移动，每0.016秒移1像素，100帧之后刚好移100像素，看起来就像“滑过来”一样。

最基础的写法：用定时器做动画

刚学JS做动画的人，大多会用“定时器”，就是让浏览器每隔一小段时间执行一次代码，改变元素的位置。举个例子：你有一个红色的小方块，要让它从页面左边移到右边，先给它定个初始位置——离页面左边缘0像素，然后写一段代码，每隔10毫秒就让它的左边缘位置加1像素，直到移到离页面左边缘100像素的地方就停下。

听起来简单，但要注意几个小细节：首先，定时器的时间不能太长，不然动画会卡；其次，要给动画设个“结束条件”，不然方块会一直移到页面外面去，再也看不到。比如写个小例子：“按钮点击后，方块开始移动，每次加1像素，直到左边缘到100像素就停止”——这样用户点一下按钮，就能看到方块慢慢滑过去，就像你小时候玩的“推积木”游戏，一步一步推到指定位置。

进阶的写法：用CSS动画辅助，减少代码量

很多人会觉得，刚才的定时器写法有点麻烦，还要自己控制停止。其实JS可以和CSS一起用，不用写那么多重复代码。还是拿刚才的方块举例：你可以在CSS里先写好“方块从左到右移动100像素”的样式规则，然后用JS告诉浏览器“当按钮被点击时，触发这个CSS动画”。

这种方法的好处是，CSS本身就会处理流畅度，不用你自己算每一步的时间，而且代码更简洁。比如你给按钮加个点击事件，只要写“点击按钮后，给方块加一个‘slide’的CSS类，这个类里定义了移动的动画”，就搞定了。就像你要出门，不用自己一步步走路，只要告诉家人“我要去公园”，家人帮你准备好路线，你直接走过去就行。

避免踩坑：别让动画“卡壳”

很多新手做出来的动画会很卡，其实是踩了两个常见的坑：第一个是动画的元素太多，同时有好几个元素在动，浏览器处理不过来；第二个是动画的属性选得不对，比如同时改变元素的“宽度”和“位置”，这两个属性改变时，浏览器要重新计算布局，就会卡。

怎么避免？如果动画效果只是“左右移动”，最好选CSS的“transform”属性，这个属性是专门用来做动画的，浏览器不会重新计算布局，就像你推一个玩具车，只推轮子，不碰车身，所以很快。另外，一次别让太多元素同时动，比如做商品列表的加载动画，一次只让3个商品慢慢出现，比让10个一起动流畅得多。

其实JS做动画没有那么复杂，核心就是“把大变化拆成小步骤”，就像生活里做事情，把大目标拆成小任务，一步步做，最后就能得到想要的效果。小到网页的小爱心，大到游戏里的角色移动，都是这个道理。