缓冲运动

缓冲运动原理:当一个元素离目标点越来越远时,速度是大的,离目标点越近,速度在不断减小,可以得出速度和距离成正比。

例:


css代码:思路:   1.目标点为300   那么(300 - 20)/ 10 = 28   (300 - 100) / 10 = 2 ,从上面的公式可以看出方块左边距离目标点越近,速度越慢     2.目标点、均速有可能是小数,因此还要取整,判断元素是往右走还是往左走,当往右走时,是正的,那么要向上取整,往左走是负的,向下取整。4.因为有定时器,如果没停止的话,定时器会一直计算,那应该在哪里设置停止呢?当元素到达目标点时设置停止定时器。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 缓冲运动和匀速运动的区别 匀速运动:速度一直不变的运动缓冲运动:速度逐渐加快或者减慢的运动缓冲运动的速度处于不断的...
    柏丘君阅读 306评论 0 0
  • HTML部分: CSS部分: JS部分: 这样我们,就可以简单的通过单击按钮使得DIV运动起来,实现简单的动画 ...
    duJing阅读 384评论 0 1
  • 系列文章导航 JavaScript动画1-速度动画JavaScript动画2-缓冲运动JavaScript动画3-...
    你好星期四阅读 934评论 0 3
  • 缓冲运动就是运动的速度越来越慢,直到到达目标位置停止实现原理和上一篇文章淡入淡出相似,都是动态的修改某个值缓冲运动...
    super静_jingjing阅读 304评论 0 1
  • block 顾名思义就是代码块,将同一逻辑的代码放在一个块,使代码更简洁紧凑,易于阅读,而且它比函数使用更方便,代...
    KAKA_move阅读 459评论 0 0