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

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

  • 位置变化:

    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. 【BZOJ4872】【SHOI2017】分手是祝愿 期望DP

    题目大意 有\(n\)盏灯和\(n\)个开关,初始时有的灯是亮的,有的灯是暗的.按下第\(i\)个开关会使第\(j\)盏灯的状态被改变,其中\(j|i\).每次你会随机操作一个开关,直到可以通过不多于 ...

  2. Django media 配置

    Django  media 配置 settings.py 配置  配置 media 的路径, 以及连接到主路径 还要添加一个 上下文管理 TEMPLATES = [ { 'BACKEND': 'dja ...

  3. Tarjan求有向图强连通详解

    Tarjan求有向图强连通详解 注*该文章为转发,原文出处已经不得而知 :first-child { margin-top: 0; } blockquote > :last-child { ma ...

  4. python 获取当前文件夹下所有文件名

    os 模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os 4 5 def file_name(file_d ...

  5. [CQOI2017]老C的方块

    题目描述 https://www.lydsy.com/JudgeOnline/problem.php?id=4823 题解 观察那四种条件 有没有什么特点? 我们可以把蓝线两边的部分看做两个区域,这样 ...

  6. [SCOI2015]国旗计划[Wf2014]Surveillance

    [SCOI2015]国旗计划 A国正在开展一项伟大的计划——国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这 项计划需要多名边防战士以接力的形式共同完成,为此,国土安全局已经挑选了N名 ...

  7. redis主从复制几种结构

    1.redis主从: 主从有好几种复制模式 一主一从:一个主服务器,一个从服务器,适合并发量较小的 一主多从:适合于读多写少的,结构: 3. 树状结构

  8. SRM 600 div 2 T 1

      贪心+枚举 #include <bits/stdc++.h> using namespace std; class TheShuttles { public: int getLeast ...

  9. 【CF1141E】Superhero Battle

    \[x*p\ge y\rightarrow x=\lfloor{{y-1}\over p}\rfloor+1\]

  10. 斯坦福大学公开课机器学习:advice for applying machine learning | diagnosing bias vs. variance(机器学习:诊断偏差和方差问题)

    当我们运行一个学习算法时,如果这个算法的表现不理想,那么有两种原因导致:要么偏差比较大.要么方差比较大.换句话说,要么是欠拟合.要么是过拟合.那么这两种情况,哪个和偏差有关.哪个和方差有关,或者是不是 ...