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

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

先来看最终效果:

基础功能以及前期准备

样式与结构代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 - 弹性框架 - HTML5学堂 独行冰海 梦幻雪冰</title>
    <link rel="stylesheet" href="../common/reset.css">
    <style>
        #btn {
            width: 150px;
            height: 40px;
            line-height: 40px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .box {
            width: 600px;
            height: 100px;
            background: #666;
            text-align: center;
            line-height: 100px;
            font-size: 36px;
            font-weight: bold;
            text-shadow: 0 0 2px #fff,
                         0 0 5px #fff,
                         0 0 8px #fff,
                         0 0 10px #fff;
        }
        .target {
            width: 100px;
            height: 100px;
            background:#39f;
            text-align: center;
            color: #fff;
            font: 24px/100px bold;
        }
    </style>
</head>
<body>
    <input type="button" id="btn" value="点击运动">
    <div class="target" id="move">运动块</div>
    <div class="box">HTML5学堂 www.h5course.com</div>
</body>
</html>

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

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

/*
* 功能:获取渲染后标签的样式,element是标签的对象,property是标签样式属性值
* 参数:element是元素对象,property是样式属性
* demo:getStyle(move, "marginLeft");
* author:HTML5学堂
*/
function getStyle(element, property){
    var proValue = null;
    if (!document.defaultView) {
        proValue = element.currentStyle[property];
    } else {
        proValue = document.defaultView.getComputedStyle(element)[property];
    }
    return proValue;
}

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

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

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

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

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

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

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

效果如图:

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

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

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

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

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

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

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

移动端重构实战系列7——环形UI

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

2376
来自专栏数据小魔方

多度量的(堆积)不等宽柱形图

今天要跟大家介绍的图表是多度量的不等宽柱形图! ▽▼▽ 这种多度量的不等宽柱形图,在制作技巧上,与之前讲过的两篇不等宽柱形图有异曲同工之妙,但是在数据表达与展示...

4436
来自专栏顶级程序员

阿里巴巴公司根据截图查到泄露信息的具体员工的技术是什么?

? 在月饼事件中的新闻中提到。阿里对员工访问的界面做了一定的处理。貌似这不是简单的水印。这种处理是什么,是怎么做到的呢? =====第三次更新===== 评论...

5409
来自专栏天天P图攻城狮

终端图像处理系列 - OpenGL混合模式的使用

OpenGL一次渲染过程包含了多个阶段,包括顶点着色器、图元组装、栅格化、片元着色器、测试和混合等,最后将结果输出的FrameBuffer上。

88614
来自专栏邹成卓的专栏

Unity3D WebCamTexture 取帧渲染、像素读取的终端适配

由于Win/Mac/Adnroid/iOS等各系统平台和硬件环境下,WebCamTexture 用于渲染和图像计算时表现不完全一致,很容易造成图像渲染或者计算不...

5350
来自专栏逸鹏说道

水印新思路之~坑人于无形

有空可以研究一下。很多注重图片版权的公司完全可以设置这种无形水印,发现被人盗用,直接可以拿图告人,拿图找泄密者~ 本文通过一个的实验,简要介绍频域手段添加数字盲...

4274
来自专栏coding for love

CSS进阶12-网格布局 Grid Layout

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1002
来自专栏天天P图攻城狮

Android图像处理系列:OpenGL深度测试的应用

什么是深度测试? 深度测试是指检测从某个方向看过去时,两个点A和B谁在谁的前面,以便知道谁挡住了谁,被挡住的点一般不会进行绘制,以达到和真实世界一样的遮挡效...

2602
来自专栏IMWeb前端团队

移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

本文作者:IMWeb 张颖 原文出处:IMWeb社区 未经同意,禁止转载 适逢元旦假期,妹子逛街吃火锅看电影陪女朋友之际,写出来的文章难免画风略微粗糙...

2068
来自专栏MixLab科技+设计实验室

生成专属于你的人工智能书【3D生成器】

a-frame 是基于 threejs 的 web AR 库,也可以当 threejs 的简化版本使用,a-frame 只需写 html 标签就可以实现3维空间...

1706

扫码关注云+社区

领取腾讯云代金券