原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现
在我们日常生活中运动就是必不可少的部分,走路、跑步、打篮球等。在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关。所以很重要,所以不废话了,先来分析一下运动这个功能的几个核心组成部分吧。
一、运动功能的核心组成部分:
- 位置变化:
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运动功能系列(一):运动功能剖析与匀速运动实现的更多相关文章
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- 原生JavaScript实现页面回到顶部的功能
/*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置 它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(targe ...
- 原生javascript实现 下拉框搜索功能
由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...
- 原生JavaScript实战之搜索框筛选功能
成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- 原生JavaScript运动功能系列(五):定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 原生JavaScript运动功能系列(四):多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- 原生JavaScript运动功能系列(二):缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
随机推荐
- Pleasant sheep and big big wolf HDU - 3046(最小割)
Pleasant sheep and big big wolf Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 ...
- MT【278】二次齐次化
对于$c>0$,当非零实数$a,b$满足$4a^2-2ab+4b^2-c=0,$且使$|2a+b|$最大时,$\dfrac{3}{a}-\dfrac{4}{b}+\dfrac{5}{c}$的最小 ...
- SCOI2016 Day2 简要题解
「SCOI2016」妖怪 题意 有 \(n\) 只妖怪,每只妖怪有攻击力 \(\text{atk}\) 和防御力 \(\text{dnf}\) ,在环境 \((a, b)\) 下,它可以把攻击力和防御 ...
- 【转】从此以后谁也别说我不懂LDO了!
LDO是个很简单的器件,但是我跟客户沟通的过程中,发现客户工程师的技术水平参差不齐,有的工程师只是follow 别人以前的设计,任何原理和设计方法都不懂,希望大家看完这篇文章都能成为LDO 专家. 第 ...
- bzoj1226/luogu2157 学校食堂 (状压dp)
我们先约定:(左) 窗口_人人人人人 (右) 可以发现,我们只需要知道最靠左的还没打饭的人 以及它身后7个人的状态 以及上一个打饭的人是谁 因为他左面的就都打过了 右面7个人以后肯定还没打 可以设f[ ...
- [JSOI2008]魔兽地图(树形dp)
DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the Ancients) Allst ...
- 【php】php实现数组分块
有时候需要将一个大数组按一定大小分块,那么可以实现这个功能,代码如下: /** * @param array $arr * @param int $size <p> * @param bo ...
- Docker普通用户不使用sudo提权
解决方法 sudo groupadd docker 添加Docker用户组 sudo gpasswd -a ${USER} docker 添加你的用户到Docker用户组 reboot 重启系统.也可 ...
- 洛谷P4248 差异
题意:求所有后缀两两之间的最长公共前缀的长度之和. 解:这道题让我发现了一个奇妙的性质:所有后缀两两最长公共前缀长度之和 和 所有前缀两两最长公共后缀之和的值是相等的,但是每一组公共前/后缀是不同的. ...
- A1111. Online Map
Input our current position and a destination, an online map can recommend several paths. Now your jo ...