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

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

  • 位置变化:

    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. 【XSY2786】Mythological VI 数学

    题目描述 有\(1\sim n\)一共\(n\)个数.保证\(n\)为偶数. 你要把这\(2n\)个数两两配对,一共配成\(n\)对.每一对的权值是他们两个数的和. 你想要知道这\(n\)对里最大的权 ...

  2. zabbix 自定义 nginx 监控模板

    打开zabbix首页→配置→模板→创建模板模板名称:Template App NGINXagent 需添加自定义监控项:UserParameter=nginx.status[*],/bin/bash ...

  3. Leetcode 349. 两个数组的交集 By Python

    给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2] 示例 2: 输入: nums1 = [4,9,5], ...

  4. luogu3242 接水果 (整体二分+树状数组)

    考虑整体二分,问题就变成了每个(水果)路径有多少个满足条件(权值)的(盘子)子路径 考虑一个盘子(a,b)表示两端点(不妨设dfn[a]<dfn[b]),那么他能接到的水果(u,v)一定满足(不 ...

  5. 一个GD初二蒟蒻的自我介绍

    emmm……今天博客第一天使用呢,好激动啊…… 这里是一个来自GD的初二蒟蒻+无脑OIER,什么都不会 NOIP2017普及组:260压线1=还是看RP过的…… GDKOI2018:120暴力大法吼啊 ...

  6. js 时间日期格式转换

    Date.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', ' ...

  7. A1127. ZigZagging on a Tree

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  8. 【POJ2676】sudoku 搜索

    按照每一行每一列去填数,当填到每一行的第9列时,开始填下一行. 代码如下: #include <cstdio> #include <algorithm> #include &l ...

  9. react-native中的TextInput

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数, 而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性 ...

  10. noi.openjudge 1.12.6

    http://noi.openjudge.cn/ch0112/06/ 总时间限制:  2000ms 内存限制:  65536kB 描述 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传 ...