匀速运动任何人都非常明白是怎么回事，而缓【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net动则比较少提到，其实说的简单一点，匀速运【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】动通常指的是“匀速直线运动”，缓动指“变【版权所有，侵权必究】【未经授权禁止转载】速直线运动”。速度，包含大小和方向两个维原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】度，大小变化或方向变化都叫变速。作为初中【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。课本里面两种常见的现象，在我们前端如何去本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】实现它，却成了一件复杂的事。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【转载请注明来源】问题的分解【关注微信公众号：wwwtangshuangnet】
【本文首发于唐霜的博客】【转载请注明来源】【转载请注明来源】运动的本质【未经授权禁止转载】
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。运动的本质就是形态或者位置的改变，在我们【转载请注明来源】未经授权，禁止复制转载。的页面上，一个对象位置发生变化，或者形状【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】、颜色发生变化，都是运动。但是我们现在要【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】研究的，主要是指位置发生变化。而如果是对【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net象大小变化引起的位置变化，我们需要把对象【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net进行拆解，去看它的某个细节部位，实际上就【版权所有，侵权必究】【本文受版权保护】是这个部位的位置变化。因此，我们在研究这未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。类问题时，其实是在研究页面上某一个元素的【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net位置发生变化的规律。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。位置的变化包含两个方面，一是位移，一是路【原创不易，请尊重版权】【作者：唐霜】径。因此，我们在构建页面上元素的位置变化【原创不易，请尊重版权】【本文首发于唐霜的博客】时，要从这两个方面去构建。而运动，意味着本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】时间，因此，我们通常的做法是给运动过程规转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。定一个特定的时间周期，比如要求整个运动过【未经授权禁止转载】【原创内容，转载请注明出处】程在0.5s内完成，当然，有的时候我们允【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。许它重复该周期，甚至间隔周期反向运动，形本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。成周而复始的运动过程。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】所以，最终，我们的问题被分解为：位移、路未经授权，禁止复制转载。【作者：唐霜】径、周期时间。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】起始位置和结束位置【本文受版权保护】
【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。位移只关注你的开始位置和结束位置。这是匀【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。速运动的时候，而如果当我们处理到缓动时，【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。往往就需要在增加一些位置节点，例如当运动原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。一开始后加速运动，而达到整个路程的60%【转载请注明来源】【关注微信公众号：wwwtangshuangnet】位置时，开始减速运动，直至终点。当然，无【版权所有，侵权必究】【本文首发于唐霜的博客】论加速还是减速，整个路程的运动时间被我们转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net确定为0.5s，不会多也不会少。
【版权所有，侵权必究】【本文受版权保护】【未经授权禁止转载】但是在不同的技术里面，位移的表达方式并不【本文受版权保护】【版权所有，侵权必究】一样，比如在css里面，我们有的时候通过【本文首发于唐霜的博客】原创内容，盗版必究。margin-left来确定某个对象的位未经授权，禁止复制转载。【作者：唐霜】置，通过改变margin-left的值来【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】实现运动。当然，我们更加推荐使用posi【版权所有，侵权必究】【转载请注明来源】tion的left、top值，因为这更好转载请注明出处：www.tangshuang.net【未经授权禁止转载】理解，计算时也可以套用数学模型。
【未经授权禁止转载】【作者：唐霜】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】变速运动的路径【本文首发于唐霜的博客】
原创内容，盗版必究。【转载请注明来源】【未经授权禁止转载】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】我们前面说到，缓动是一个变速直线运动，直未经授权，禁止复制转载。原创内容，盗版必究。线就是运动的路径。从空间的角度讲这是没有原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】错的，但是从时间的角度讲，则不是这样。我【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】们将它用曲线表达出来：
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net原创内容，盗版必究。
如果我们仅看空间上的运动轨迹，那么就是第【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一个图，而如果加上时间维度，就会看到第二【原创不易，请尊重版权】未经授权，禁止复制转载。个图和第三个图，它们的轨迹是不同的。这好【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。像有点抽象，但是我提一个问题：在java【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。script里面，如何实现第三幅图这种缓著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】动呢？很好玩儿，jQuery给我们提供了本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】animate方法来实现，但实际上，它也【作者：唐霜】【版权所有】唐霜 www.tangshuang.net依赖于css，也就是说你必须把要改变的c【作者：唐霜】转载请注明出处：www.tangshuang.netss属性值作为参数传入。如何通过程序的方未经授权，禁止复制转载。未经授权，禁止复制转载。式实现这一特性呢？还需要我们另外再做思考【本文首发于唐霜的博客】【版权所有，侵权必究】。
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。而如何来确定这个路径呢？起始我们只需要构著作权归作者所有，禁止商业用途转载。【作者：唐霜】建数学模型即可。例如第一个图，我们只需要【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。确定在单位时间里，x和y各自匀速增加的大【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。小，当它们在周期时间内完成运动之后，得到转载请注明出处：www.tangshuang.net【作者：唐霜】的路径自然就是图中所显示的。而加上时间维【转载请注明来源】【版权所有】唐霜 www.tangshuang.net度的时候，无非增加一个时间变量。只不过在【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一般的编程中，我们很难实现类似如下的编码【原创内容，转载请注明出处】【未经授权禁止转载】：
【版权所有，侵权必究】【未经授权禁止转载】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。{x1,y1,t1},{x2,y2,t2},
{x3,y3,t3}
但是我们要实现下面的编码，就简单多了：转载请注明出处：www.tangshuang.net
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【未经授权禁止转载】{
t1: {x1,y1},
t2: {x2,y2},
t3: {x3,y3}
}
所以，我们在编码时，往往会先考量时间维度【作者：唐霜】未经授权，禁止复制转载。，在时间维度上选取特定的刻度后，再在该刻【原创不易，请尊重版权】【原创不易，请尊重版权】度上进行空间规定。这也是css @key本文作者：唐霜，转载请注明出处。【本文受版权保护】frames的定义方法。因此，我们在自己未经授权，禁止复制转载。【版权所有，侵权必究】写方案的时候，最好也这样去考虑。
转载请注明出处：www.tangshuang.net【本文受版权保护】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】匀加速运动原创内容，盗版必究。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】在上面定义的这种编码形式中，即使我们找到【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。了用时间节点作为刻度进行速度的调整，但是【转载请注明来源】【版权所有，侵权必究】仍然会有一个问题，如果从t1到t2的过程原创内容，盗版必究。【版权所有，侵权必究】中，速度是匀速的，上面的第三个图就不会是未经授权，禁止复制转载。【版权所有，侵权必究】曲线，而是折线。对于界面上的运动效果而已原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，也会变得很奇怪，就像在运动过程中，突然未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。进入另外一个空间一样，速度突然变化。想要【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。平滑过渡，我们还需要从加速度的角度考虑，【转载请注明来源】本文作者：唐霜，转载请注明出处。使速度在变化过程中，可以很好的契合，实现【转载请注明来源】【本文首发于唐霜的博客】平滑过渡。
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】从编码的角度讲，我们不得不重新计算从t1未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。到t2这个过程中，速度到变化规律。比如类【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】似得到：v = at 这样一个公式，找到【作者：唐霜】【原创不易，请尊重版权】一个常量a来确定每一个时刻所对应到速度。
【关注微信公众号：wwwtangshuangnet】【本文受版权保护】转载请注明出处：www.tangshuang.net匀速直线运动的实现本文作者：唐霜，转载请注明出处。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。假定我们现在要实现这样一个场景，当用户在【转载请注明来源】【版权所有】唐霜 www.tangshuang.net看视频的时候，弹幕从屏幕上匀速飘过。
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【本文首发于唐霜的博客】css实现方法【本文首发于唐霜的博客】
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】在css3中有一个基本的transiti【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.neton属性实现动画，当然，它是一个结合体，【转载请注明来源】原创内容，盗版必究。就像font, background一样【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，它有一个transition-timi著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ng-function属性，当它当值为l【本文受版权保护】【原创不易，请尊重版权】ine的时候，表示匀速（直线）运动，当然转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，我们在看到这里的匀速运动时，应该把时间【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。维度也考虑进来，也就是说在空间和时间上，【未经授权禁止转载】【版权所有，侵权必究】动画效果都是line（直线），也就是我们未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net上面看到的第二个图。例如：
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。img {
width:45px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: line;
}
img:hover {
width: 90px;
}
这样可以实现图片在被鼠标访问时，宽度放大原创内容，盗版必究。【原创内容，转载请注明出处】一倍。我们可以把要改变的元素的posit本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netion值重新进行设定，从而改变整体的位置原创内容，盗版必究。【未经授权禁止转载】。所以，在弹幕这个事情上，就是这样：
【未经授权禁止转载】【原创内容，转载请注明出处】【作者：唐霜】本文作者：唐霜，转载请注明出处。div.words {
position: absolute;
top: 100px;
left: 120%;
transition: left 2s line;
}
div.words.fly {
left: -1000%;
}
这需要配合javascript来实现。当本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。一条新的弹幕出现时，javascript【版权所有】唐霜 www.tangshuang.net【作者：唐霜】给它加上.fly这个class，于是它就【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net开始往左边飞。但是这还没有结束，你还要根【本文首发于唐霜的博客】【原创内容，转载请注明出处】据这一弹的字数，计算它的宽度，通过一个随原创内容，盗版必究。【本文首发于唐霜的博客】机种子，让它的top值改变，以及结尾le【未经授权禁止转载】未经授权，禁止复制转载。ft值得到一个适当的改变，甚至改变它飞翔本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】的速度，当然，这些都是比较简洁的。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。但是transition仅能在被触发时执【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】行，无法自己执行。所谓触发，就是从div转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】.words变为div.words.fl【本文首发于唐霜的博客】【转载请注明来源】y，或者反过来，.fly被去掉，它无法自未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。执行。这个时候，需要用到另外一个属性an原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。imate，而animate大部分情况下【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】，需要配合@keyframes来实现。
【本文受版权保护】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】同样是上面这个效果，我们用animate【原创不易，请尊重版权】【本文受版权保护】来实现：
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【未经授权禁止转载】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net@keyframes fly{ 100% { left: -1000%; } } div.words { position: absolute; top: 100px; left: 120%; animate: 2s fly; }
当一个div.words出现之后，会自己著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】执行fly这个关键帧动作。当然，anim【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ate还有更多漂亮的用法，需要你自己去了【本文受版权保护】本文版权归作者所有，未经授权不得转载。解。而且，用javascript无法修改未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netfly的100%的属性信息，所以也有缺点【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。。
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】jQuery实现方法转载请注明出处：www.tangshuang.net
【原创不易，请尊重版权】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net和css不同，css是靠浏览器渲染引擎来【原创不易，请尊重版权】【作者：唐霜】实现动画效果，而jQuery则通过一点点【转载请注明来源】【转载请注明来源】的改变css样式，来改变当前的状态。jq【作者：唐霜】【原创不易，请尊重版权】uery的animate方法有一个eas未经授权，禁止复制转载。【作者：唐霜】ing参数，该参数定义了运动路径效果，包【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。括linear和swing等。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】$('div.words').animate({left:-1000%}, 2000, 'linear');
javascript的实现方法【访问 www.tangshuang.net 获取更多精彩内容】
【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netjavascript目前能够处理这类问题【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。的主要思路，就是做一个定时器，按每0.1未经授权，禁止复制转载。【本文首发于唐霜的博客】s或更多移动一个像素从而实现运动效果。例未经授权，禁止复制转载。【原创不易，请尊重版权】如：
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【转载请注明来源】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netvar words = document.getElementById('words');
var interval = 2000;
var timer = setInterval(function() {
var left = words.style.left;
left = left - 1% * interval / 100; // 这里其实计算有问题，仅作演示
words.style.left = left;
interval -= 100;
if(interval == 0) clearInterval(timer);
},100);
但是我们知道弹幕的数量有的时候会瞬间爆发【关注微信公众号：wwwtangshuangnet】【转载请注明来源】，这种情况下，如何解决卡机问题是一个非常本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。重要的问题。卡机就是内存不够用，性能受到本文作者：唐霜，转载请注明出处。原创内容，盗版必究。局限，在这种情况下，假设浏览器允许同一时【原创内容，转载请注明出处】原创内容，盗版必究。间interval的执行动作只有1000【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。个，而你的interval竟然达到了10【作者：唐霜】本文版权归作者所有，未经授权不得转载。000个，那么就会有9000个在排队，虽【原创不易，请尊重版权】【未经授权禁止转载】然你规定interval时间结束后就要执未经授权，禁止复制转载。【转载请注明来源】行setInterval的回调函数，但是转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。由于前面已经卡机了，所以这个动作得等会儿【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】再执行，而效果是什么呢？就是弹幕突然停在【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原地不动了，过了可能1s，它有继续往前跑未经授权，禁止复制转载。【作者：唐霜】，甚至一下子冲出去老远，出现了卡顿现象。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】解决这种情况，就要涉及到javascri【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】pt的性能优化问题。我的思路是，把100【原创不易，请尊重版权】【作者：唐霜】个合并为一个去实现匀速，我们把所有的弹幕【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。文字进行分组，每100个一组，屏幕上出现转载请注明出处：www.tangshuang.net【作者：唐霜】，然后将它们全部放在同一个容器里面，通过原创内容，盗版必究。【作者：唐霜】改变容器来改变弹幕文字的位置，这样上面那转载请注明出处：www.tangshuang.net原创内容，盗版必究。10000个interval瞬间就变成了【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。100个，那也就在我们的极限1000范围【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net内了。具体怎么操作呢？
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。未经授权，禁止复制转载。<style>
div.container {
position: relative;
margin-left: -100%;
width: 200%;
}
div.words {
position: absolute;
}
</style>
<script>
var container = document.createElement('div');
container.className = 'container';
var words = document.getElementsByClassName('words');
var lenth = words.length,style;
for(var i = length - 1;i --;) {
words[i].style.cssText += ';
left: ' + rand('left') + '%;
top: ' + rand('top') + '%;';
container.insertBefore(words[i]);
}
var interval = 2000;
var timer = setInterval(function() {
container.style.width = (interval / 10.00) + '%';
interval -= 1;
if(interval == 0) clearInterval(timer);
},1);
function rand(type) {} // 用于计算一个随机值的函数，略</script>
当然，这个写法只是一个思路，并不可以直接【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net用于项目中。你可以看到，在整个inter【版权所有，侵权必究】【原创不易，请尊重版权】val中，一直在改变container的【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】宽度，而对弹幕文字没有任何操作，而通过百【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。分百定位，可以让container宽度减转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net小过程中，改变弹幕文字的位置，直至最后消【作者：唐霜】著作权归作者所有，禁止商业用途转载。失在屏幕中。由于是实用百分比定位，这也导本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。致实际过程中，移动的速度和位置都不同。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创不易，请尊重版权】当然，这真的只是一种思路，而且里面还要考本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】虑很多因素。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文受版权保护】2016-04-28 7053
