一步步教你弹性框架-中篇
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);
}
到此,我们能够其实已经实现了基本的弹性框架功能,唯一不足的就在于我们的代码扩展性不够好,在下一篇文章当中,我们将会完成弹性运动框架的收尾工作 —— 完善优化,提升扩展性。
- 通常Java开发人员如何进行数据排序?
- 消息服务框架使用案例之--大文件上传(断点续传)功能
- Java中三种Set类型用法、性能大比拼
- Android基础总结(5)——数据存储,持久化技术
- 如何突破Windows环境限制打开“命令提示符”
- 【Spark研究】Spark之工作原理
- Java中泛型使用的必要性
- “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式
- Android基础总结(4)——广播接收器
- “一切都是消息”--MSF(消息服务框架)之【请求-响应】模式(点对点)
- “老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春
- 解决服务器SID引起虚拟机不能加入AD域用户,无法远程登录的问题
- 【Python环境】如何使用 Docker 快速配置数据科学开发环境?
- Java中UUID的2种创建方法——有代码实例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- js逐步教你实现原生古诗匹配系统
- c++从入门到进阶--引用与常量
- 图论树的直径
- 白话k8s-Pod的组成
- Jaba_Web--JDBC 修改记录操作模板
- h5逐步实现 <<canvas系统>>
- 递归与N皇后问题
- Jaba_Web--JDBC 查询记录操作模板
- Linux下如何删除指定路径下所有的__pycache__文件夹?
- js逐步实现原生flex系统
- POJ 2054 Color a Tree解题报告
- Jaba_Web--JDBC 删除记录操作模板
- POJ 1789 Truck History 最小生成树
- Vector shrink 请求容器降低其容量和size匹配 shrink_to_fit();
- Codeforces Round #677 (Div. 3)