前端技术分享-码匠 极客编程技术分享

您当前位于:jQuery与类库搭建 ——> JavaScript弹性框架(摩擦力视觉感)的实现方法(上)

JavaScript弹性框架(摩擦力视觉感)的实现方法(上)

2015/06/27 08:24:35 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:框架开发,弹性运动,缓冲运动

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现弹性运动框架的核心在于速度的控制。本篇文章从第一步开始,讲解如何让元素动起来,以及如何实现无休止的来回运动~

先来看最终效果:

最终效果

基础功能以及前期准备

样式与结构代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5 - 弹性框架 - HTML5学堂 独行冰海 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="../common/reset.css">
  7.     <style>
  8.         #btn {
  9.             width: 150px;
  10.             height: 40px;
  11.             line-height: 40px;
  12.             background: rgba(0, 0, 0, 0.6);
  13.             color: #fff;
  14.             -webkit-border-radius: 5px;
  15.             -moz-border-radius: 5px;
  16.             border-radius: 5px;
  17.         }
  18.         .box {
  19.             width: 600px;
  20.             height: 100px;
  21.             background: #666;
  22.             text-align: center;
  23.             line-height: 100px;
  24.             font-size: 36px;
  25.             font-weight: bold;
  26.             text-shadow: 0 0 2px #fff,
  27.                          0 0 5px #fff,
  28.                          0 0 8px #fff,
  29.                          0 0 10px #fff;
  30.         }
  31.         .target {
  32.             width: 100px;
  33.             height: 100px;
  34.             background:#39f;
  35.             text-align: center;
  36.             color: #fff;
  37.             font: 24px/100px bold;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <input type="button" id="btn" value="点击运动">
  43.     <div class="target" id="move">运动块</div>
  44.     <div class="box">HTML5学堂 www.h5course.com</div>
  45. </body>
  46. </html>

获取完成版样式的功能函数

需要明确,我们使用原生进行代码书写时,需要注意,应当基于获取完成样式的功能代码。即我们之后的功能会使用到如下函数。

  1. /*
  2. * 功能:获取渲染后标签的样式,element是标签的对象,property是标签样式属性值
  3. * 参数:element是元素对象,property是样式属性
  4. * demo:getStyle(move, "marginLeft");
  5. * author:HTML5学堂
  6. */
  7. function getStyle(element, property){
  8.     var proValue = null;
  9.     if (!document.defaultView) {
  10.         proValue = element.currentStyle[property];
  11.     } else {
  12.         proValue = document.defaultView.getComputedStyle(element)[property];
  13.     }
  14.     return proValue;
  15. }

第一步 让元素自动运动起来

我们希望在点击按钮的时候,元素能够实现运动。那么我们首先是获取运动以及控制运动的“主人公”,并为控制运动的“主人公”绑定运动的功能函数,然后通过改变某一种样式值使其发生变化。别忘了计时器哦~

  1. var btn = document.getElementById("btn");    // 获取控制按钮
  2. var move = document.getElementById("move");    // 获取运动块
  3. var timer = null;    // 初始化一个计时器
  4. var speed = 1;    // 初始化一个速度
  5. var startVal = parseInt(getStyle(move, "marginLeft"));    // 获取初始位置
  6.  
  7. btn.onclick = function () {
  8.     timer = setInterval(function(){            
  9.         startVal += speed;
  10.         move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
  11.     }, 24);
  12. }

欢迎沟通交流~HTML5学堂

第二步:无休止的往复运动

能够来回运动的关键在于速度的变化

之前的一些特效当中,我们通常是要求块达到临界值的时候停止运动,而这次我们是让其超过去,再运动回来,经过几次的反弹最终停止在临界值的位置,因此我们绝对不可能直接判断是否到达临界值然后清除计时器。先不要心急,先一步步来,我们第二步来实现块相对临界值,进行左右来回的运动。

左右来回的运动:从初始位置向右运动到临界值(假设运动了600像素),然后继续运动相应的距离(600像素),停止下来再向左运动,越过临界值到达初始状态,如此反复。

效果如图:

来回无休止的运动

先来创建一个变量用于存储目标值。之后我们一起来想,之所以能如此运动,在于速度在发生变化,从初始值到目标值的过程中,速度从0开始往上增加,越来越大,越过目标值到达最右侧位置的过程中,速度越来越小,直到速度值变为0,则停止运动,之后继续变小,成为负值,就从右侧开始向左运动。

修改代码:将初始化的速度置为0。之后在每次运动的时候均进行目标值与当前值的关系判断,如果当前值小于目标值,速度应该是增加,如果当前值大于目标值,速度应该变小。

  1. var btn = document.getElementById("btn");    // 获取控制按钮
  2. var move = document.getElementById("move");    // 获取运动块
  3. var timer = null;    // 初始化一个计时器
  4. var speed = 0;    // 初始化一个速度
  5. var startVal = parseInt(getStyle(move, "marginLeft"));    // 获取初始位置
  6. var targetVal = 600;    // new~! 新增一个变量,用于存储目标值
  7.  
  8. btn.onclick = function () {
  9.     timer = setInterval(function(){
  10.         if (startVal < targetVal) {
  11.             speed++;
  12.         } else if (startVal > targetVal) {
  13.             speed--;
  14.         };    
  15.         startVal += speed;
  16.         move.innerHTML = "速度:" + speed + "\n当前位置:" + startVal;    // 测试用代码-便于理解
  17.         move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
  18.     }, 24);
  19. }

为方便查看,特意在运动块中增加了速度变化的状态。同时,下面文字是HTML5学堂的块是作为参照物存在的,其宽度就是600像素。

能够看出,速度值的变化是从0 ——> 最大值 ——> 0 ——> 最小值 ——> 0

对应位置的变化则是:左 ——> 中 ——> 右 ——> 中 ——> 左

到此,我们能够实现一个无休止的运动。在下一篇文章当中我们将为大家讲解,如何将运动变为缓冲运动,再在此基础上“构建”有摩擦力的运动(越来越慢~~~)。提示是:在速度的控制上想办法。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端