缓冲运动

  逐渐变慢,最后停止

  距离越远速度越大

     速度由距离决定

    速度=(目标值-当前值)/缩放系数

  存在Bug

    速度取整

    跟随页面滚动的缓冲侧边栏

      潜在问题:目标值不是整数时

缓冲运动的停止条件

  运动终止条件:两点重合(即运动物体和目的地重合)

Demo代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>缓冲运动</title>
<style>
.sport {
width: 60px;
height: 60px;
background-color: #FC4209;
border-radius: 5px;
position: absolute;
top: 60px;
text-align: center;
line-height: 60px;
} #div1 {
top: 60px;
left: 0;
} #div2 {
top: 150px;
left: 900px;
} #reference {
width: 1px;
height: 260px;
background-color: black;
position: fixed;
top: 20px;
left: 450px;
}
</style>
<script>
function startMove(obj, iTarget) {
let timer = null;
let oDiv1 = document.getElementById(obj); clearInterval(timer);
timer = setInterval(function () {
let iSpeed = (iTarget - oDiv1.offsetLeft) / 12;
// Math.ceil() 向上取整 Math.floor() 向下取整
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (oDiv1.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head> <body>
<input type="button" value="开始运动" onclick="startMove('div1',450)" />
<input type="button" value="开始运动" onclick="startMove('div2',450)" />
<div id="div1" class="sport">A</div>
<div id="div2" class="sport">B</div>
<div id="reference"></div>
</body> </html>

 

效果图A:

效果图B:

 

javaScript运动框架之缓冲运动的更多相关文章

  1. javascript每日一练(十)——运动二:缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  2. JS运动---运动基础(缓冲运动)

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...

  3. Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  4. Javascript之运动框架2

    运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...

  5. JS学习之路,之弹性运动框架

    弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...

  6. javascript中的动画的实现以及运动框架的编写(1)

    大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...

  7. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  8. 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  9. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

随机推荐

  1. Java多线程核心知识

    多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲.在平时工作中如若使用不当会出现数据错乱.执行效率低(还不如单线程去运行)或者死锁程序挂掉等等问题,所以掌握了解多线程至关 ...

  2. 使用docker 部署python 项目

    使用python 开发了一个restfu api程序,使用docker镜像部署.主要有如下步骤,简单记录以供以后参考. 1. 创建DockerFile文件 创建一个DockerFile文件,文件名为D ...

  3. java的replace和replaceAll

    都是全部替换,只不过后者参数为正则 replaceFirst()是替换第一个

  4. Emacs Python 自动补全之 eglot

    eglot 个人水平有限,自己的测试难免有不足甚至错误的地方.欢迎各位emacser 能前来留言交流. 首先eglot 是一个lsp-mode的集成环境.作者说这不仅仅是一个lsp工具.但是我从其说明 ...

  5. pytest_1安装和启动

    一.安装和启动 1.1 安装pytest 1. 键入Ctrl+R,打开cmd,输入命令至python环境下(本机:D:\Python27>) 2. 在python环境下运行下面的命令即可安装py ...

  6. Kotlin 的 @JvmStatic 和 @JvmField 注解

    这是关于 Java 静态方法和静态变量的一段代码: public class TestStatic { private int otherField = 0; public static final ...

  7. 【react】input输入框可输入的最好实现方式

    使用的是refs.react中输入框不能直接定义value.输入框是可变的,react会提示报错.需要使用的inChange事件(输入框内容被改变时触发). 要定义输入框初始值,需要在componen ...

  8. python学习之数据类型(List)

    3.5 列表 3.5.1 列表的介绍 ​ 列表是python的基础数据类型之⼀,其他编程语言也有类似的数据类型. 比如JS中的数组, java中的数组等等.它是以[ ]括起来, 每个元素⽤' , '隔 ...

  9. nginx配置laravel项目

    在/etc/nginx/conf.d下新建一个laravel.conf文件,并编辑 写入如下文件即可 server { listen 80; server_name xxx; root "/ ...

  10. DSP28335 GPIO学习

    根据网络资料以及以下两篇博客整理 http://blog.sina.com.cn/s/blog_86a6035301017rr7.html http://blog.csdn.net/hmf123578 ...