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

HTML5学堂:本文继续为大家讲解弹性框架,在前一篇文章当中,我们实现了最基本的来回运动,在本文当中我们将基于前者,继续书写我们的代码。主要包括缓冲效果、有摩擦力的运动以及计时器的清除三个部分。在本文之后也将能够实现基本的弹性动画效果。

第三步 将运动处理成缓冲效果

缓冲效果其实是与速度相关的,在我们课程中的动画框架中其实也讲过——速度 = (目标值 - 当前值) / 步长。此处我们就不再做详细讲解了,直接上代码:

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(){
        speed += (targetVal - startVal) / 40;
 
        startVal += speed;
        move.innerHTML = "速度:" + speed + "\n当前位置:" + startVal;    // 测试用代码-便于理解
        move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
    }, 24);
}

当前的效果:

之所以采用缓冲运动,就是让运动呈现先慢后快再慢的视觉效果。

PS:对于基本结构与样式代码,在我们前一篇文章——一步步教你弹性运动框架(上)中有书写,可直接点击查看。

第四步 运动的摩擦力?

在实现缓冲之后,最核心的一点就是如何让速度在当前这种“先慢后快再慢”的效果上,还要越来越慢。换到我们生活当中,其实就相当于是一个物体在地面运动,必然会存在摩擦力。这种摩擦力怎么实现出来呢?

听上去好像很难的样子,自己在最初思考这个问题的时候其实也是有些纳闷,不过当想到方法的时候,突然就恍然大悟了~方法很简单——将速度乘以一个小于1的数字~~~

所以,只需要为获取到的speed再执行一句代码即可

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(){
        speed += (targetVal - startVal) / 40;
        speed *= 0.95;
        startVal += speed;
        move.innerHTML = "速度:" + speed + "\n当前位置:" + startVal;    // 测试用代码-便于理解
        move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
    }, 24);
}

PS:增加的代码是“speed *= 0.95;”

当前的效果:

已经出现回弹的效果了,果断离成功不远喽~~~

第五步 计时器还是要清除的

从上面的效果中也能看出,计时器是一直没有停下来的~

关于清除条件的确是需要思考一下滴~是不是当前值等于终点值呢?果断不是(反弹的效果会在前几次运动时经过终点值)。那,是不是速度为0呢?貌似也不是(最左端和最右端也是速度为0)。但是,我们将这两个条件结合起来貌似就可以了~同时满足如下两个条件:1、速度达到某个值;2、终点值与当前位置的差值也达到某个值。

需要增加如下代码

if (Math.abs(speed) < 1 && Math.abs(startVal - targetVal) < 1) {
    clearInterval(timer);
    startVal = targetVal;
};

解释一下上面的代码,当速度值绝对值小于1且当前位置距离终点位置小于1的时候,我们把计时器清除掉,并将目标值赋值给当前值。这个部分的操作,能够防止出现抖动现象,防止误差叠加-属性值的取整问题。这个时候我们就能发现,计时器最终被清除掉了。

当前的完整JavaScript代码

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(){
        speed += (targetVal - startVal) / 40;
        speed *= 0.95;
        startVal += speed;
 
        if (Math.abs(speed) < 1 && Math.abs(startVal - targetVal) < 1) {
            clearInterval(timer);
            startVal = targetVal;
        };
 
        move.innerHTML = "速度:" + speed + "\n当前位置:" + startVal;    // 测试用代码-便于理解
        move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
    }, 24);
}

到此,我们能够其实已经实现了基本的弹性框架功能,唯一不足的就在于我们的代码扩展性不够好,在下一篇文章当中,我们将会完成弹性运动框架的收尾工作 —— 完善优化,提升扩展性。

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

面对一个需求,我们怎么开始?

之前在作业区我出过一道题“用JS做一个抛物线下落的球”。这个题就是一个需求,内容是让你做一个抛物线下落的球。 我们把这个需求拆分一下,会发现它里面有以下几个内容...

1735
来自专栏极客慕白的成长之路

关系代数运算方法

在Client与Viewing的clientNo相同情况下,罗列出clientNo,fNale,lName,propertyNo,comment

614
来自专栏前端小吉米

BAT 要的是什么样的前端实习生?

1574
来自专栏HT

HT图形组件设计之道(四)

在《HT图形组件设计之道(二)》我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我...

1745
来自专栏北京马哥教育

十分钟入门 Python 绘图库 Matplotlib 入门教程

Matplotlib是一个Python语言的2D绘图库,它支持各种平台,并且功能强大,能够轻易绘制出各种专业的图像。本文是对它的一个入门教程。

700
来自专栏木子昭的博客

机器学习三剑客之Matplotlab绘制条形图直方图饼图

? Matplotlib 是Python 2D绘图领域的基础套件,它让使用者将数据图形化,并提供多样化的输出格式。这里将会以四个小案例探索Matplotli...

2906
来自专栏Python爬虫实战

看了《最强大脑》,我决定做这个游戏

今年年初,新一季的《最强大脑》开播了,第一集选拔的时候大家做了一个数字游戏,名叫《数字华容道》,当时何猷君以二十几秒的成绩夺得该项目的冠军,来看一下当时的比赛:

712
来自专栏magicsoar

二维码知识介绍

一、二维码的分类 二维码,从字面上看就是用两个维度(水平方向和垂直方向)来进行数据的编码,条形码只利用了一个维度(水平方向)表示信息,在另一个维度(垂直方向)没...

21910
来自专栏非典型技术宅

Quartz2D进行渲染1. 渲染模式2. even-odd rule:奇偶填充规则3. nonzero winding number rule:非零绕数规则4. 其他会用到的渲染模式5. 混合模式

793
来自专栏数据小魔方

标注特定日期的折线图

今天给大家分享的标注特定日期的折线图! ▽▼▽ 有时候我们拿到的数据存在特定日气的波动,比如股市、衍生品等指数会存在星期(周末)的波动,如果能够在图表中标注出特...

3327

扫描关注云+社区