在我们日常生活中运动就是必不可少的部分,走路、跑步、打篮球等。在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关。所以很重要,所以不废话了,先来分析一下运动这个功能的几个核心组成部分吧。

一、运动功能的核心组成部分:

  • 位置变化:

    1.位置从一个位置到达另一个位置;

    2.位置变化有可视的变化过程;

    3.位置变化具有可控的方向性;

  • 速度变化:

    1.运动的速度是可变的;

    2.运动的是可控的,比如暂停,减速,加速,继续运动

  • 大小透明度变化(相对位置来说处于静态的运动):

     1.宽高及阴影的变化;

    2.透明度或者背景颜色图片的变化。

  • 可移植性(即一种运动功能可以适应不同场景,在主体功能不变的情况下可以设置一些样式差异):

    1.比如运动体的大小可以实现初始化;

    2.可以设置一些视觉差异效果(比如轮播图有幻灯片模式,轮转模式,类3D效果)

    3.UI设定模式与自定义(比如轮播图的按钮形状)

上面的分析中,又以位置变化和速度变化为运动功能的主要核心功能,接下来我们就通过一系列的运动示例来理解和实现运动功能。

二、匀速运动:

匀速运动是运动功能中最基本的运动功能,只需要将要移动的元素从一个位置移动到另一个位置,速度不变,将移动距离分成若干个片段,并将每个片段移动之间设置微弱的时间间隔,以达到视觉上的移动效果。

这里有一个需要注意的点:

1.移动元素需要给元素设置绝对定位或者相对定位,不然设置left和right位置不会发生变化。以下是示例的HTML和CSS代码:

//html
<div></div>
<span></span>
<button id="bit">run</button> //css
div{
position: absolute;
left: 0px;/*向右移动*/
/* left: 600px; *//*向左移动*/
top: 0px;
width: 100px;
height: 100px;
background: red;
}
span{
position: absolute;
left: 300px;
top: 1px;
width: 1px;
height: 100px;
background-color: #000;
}
button{
margin-top: 150px;
height: 25px;
width: 35px;
}

2.要指定运动的起点和终点,不然运动会无限循环执行下去。在示例中,起点位置有css样式设定固定值,用DOM对象的的offsetLeft属性来获取元素距离浏览器左侧的距离,并且每执行一次移动之前都要判断距离目标位置的差值是否大于一次移动的距离,如果小于要移动的距离直接设置到达终点,结束运动。

 //通过标签名获取第一个div元素节点对象
var oDiv=document.getElementsByTagName("div")[0];
//通过id获取button节点对象
var oBut=document.getElementById("bit");
//创建一个定时器变量初始为空
var timer=null;
//通过button点击事件触发运动函数
oBut.onclick=function(){
startMove(oDiv);
}
//执行匀速运动的方法startMove,参数obj为运动的体的document节点对象
function startMove(obj){
//启动定时器前,关闭之前开启的定时器
clearInterval(timer);
//初始化一个变量,用于设置运动速度
var iSpeed;
//处理业务逻辑
//运动体大于距离目标点300时(这里是span标签的右侧零像素),运动体往左运动,反之则往右运动
if(obj.offsetLeft>300){
iSpeed= -8;
}else{
iSpeed= 8;
}
//定义定时器
timer = setInterval(function (){
//Math.ads()取当前位置与一单位移动距离的绝对值
//当前位置比一单位移动距离小时,直接设置运动体到终点,并结束定时器
//....................大时,执行运动运算
if(Math.abs(300-obj.offsetLeft)<Math.abs(iSpeed)){
clearInterval(timer);
obj.style.left='300px';
}else{
obj.style.left=obj.offsetLeft+iSpeed+'px';
}
},30);
}

3.看代码14行、30行代码clearInterval(timer)两处关闭定时器,setInterval()是每间隔多长时间执行一次,30行大家都通常能理解,当执行到终点时就关闭定时器。14行代码可能会有点懵,为什么在启动运动之前要关闭定时器呢?原因是如果出现多次触发运动启动时,会开启多个定时器叠加执行(具体知识点是闭包和定时器[模拟出来的]多线程),多个定时器叠加就相当于开倍速了,像实例中是点击触发运动,如果不管之前的定时器就出发运动,没点击一次就会有一次速度叠加。

4.最后既然要封装功能就要让代码具备复用性,所以可见将示例中的匀速移动函数提取出来,除了传入指定运动元素外,还需要用参数指定运动的终点位置和运动速度。

//匀速运动算法
function startMove(dom,target,iSpeed){
clearInterval(timer);
if(dom.offsetLeft>target){
iSpeed= -1 * iSpeed;
}else{
iSpeed= 1 * iSpeed;
}
timer = setInterval(function (){
if(Math.abs(target-dom.offsetLeft)<Math.abs(iSpeed)){
clearInterval(timer);
dom.style.left = target+'px';
}else{
dom.style.left=dom.offsetLeft+iSpeed+'px';
}
},30);
}
//参数:要运动的元素,运动到指定位置,运动的速度
//注意1:需要在调用方法的作用域上声明timer变量
//注意2:示例代码指定位置只有距离浏览器左侧的距离,如果是复杂的运动功能,可以将target封装成一个位置对象,还包括距离浏览器上边距、元素的大小,元素的透明度

后续博客持续更新,最后封装一个轮播图插件,当然这也不是最后的终点,学无止境,生命不息,挑战自我。

原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现的更多相关文章

  1. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  2. 原生JavaScript实现页面回到顶部的功能

    /*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置 它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(targe ...

  3. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  4. 原生JavaScript实战之搜索框筛选功能

    成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...

  5. 你可能不需要 jQuery!使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  6. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  7. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  8. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  9. 原生JavaScript运动功能系列(二):缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

随机推荐

  1. IDEA中Git分支未push的变更集如何合并到另一个分支

    使用rebase命令 刚开始,A分支和B分支的代码是一样的,把A分支checkout 为当前分支,并且修改了代码,进行[commit]和[push],commit成功了,但是push没有权限. 这个时 ...

  2. MT【278】二次齐次化

    对于$c>0$,当非零实数$a,b$满足$4a^2-2ab+4b^2-c=0,$且使$|2a+b|$最大时,$\dfrac{3}{a}-\dfrac{4}{b}+\dfrac{5}{c}$的最小 ...

  3. 【转】Ubuntu 64位系统安装交叉编译环境一直提醒 没有那个文件或目录

    安装交叉编译环境搞了一个晚上 一直提示 root@zqs-pc:~# arm-linux-gcc/usr/local/arm/4.3.2/bin/arm-linux-gcc: 行 3: /usr/lo ...

  4. CAN总线网络的传输模式

    CAN总线网络的传输模式根据触发条件的不同,在车身CAN网络中可分为事件型.周期性及混合型三种传输模式: 1.事件型传输模式: 随着类型或数据的转变及时发送的消息.此类型消息的好处是极少占用总线资源, ...

  5. Composer 安装时要求输入授权用户名密码?

    D:\work\dreamland-yii>composer require "saviorlv/yii2-dysms:dev-master" Authentication ...

  6. php 限制类的对象类型

    事实上,采用哪种处理参数类型的策略,取决于任何潜在bug的严重程度.通常PHP会根据语境自动转换大多数基本数据类型. 因此,你需要在检测类型.转换类型和依赖良好清晰的文档(无论决定用哪一种,都应该提供 ...

  7. uoj#80 二分图最大权匹配

    题意:给定二分图,有边权,求最大边权匹配.边权非负. 解:KM算法求解最大权完备匹配. 完备匹配就是点数少的那一边每个点都有匹配. 为了让完备匹配与最大权匹配等价,我们添加若干条0边使之成为完全二分图 ...

  8. 洛谷P2336 喵星球上的点名

    解:SAM + 线段树合并 + DFS序. 姓和名之间插入特殊字符,转化为下题: 给定串集合S,T,问S中每个串包含了T中的几个串?T中每个串被多少个S中的串包含? 解:对S建广义SAM,并线段树合并 ...

  9. [luogu3939][数颜色]

    题目链接 思路 对于每一种颜色都建立一个动态开点线段树.然后每次查询的时候就去这个颜色的线段树上查询就行了.修改之后不要忘记交换颜色. 这个题目数据有点强.抄了个比较快的读入优化才卡过去. 代码 /* ...

  10. tensorflow中tf.ConfigProto()用法解释

    在看C3D代码的时候,看见有一段代码是 config = tf.ConfigProto()#主要是配置tf.Session的运行方式,GPU还是CPU,在这里选择的是GPU的运行方式 config.g ...