一步步教你弹性框架-上篇
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
对应位置的变化则是:左 ——> 中 ——> 右 ——> 中 ——> 左
到此,我们能够实现一个无休止的运动。在下一篇文章当中我们将为大家讲解,如何将运动变为缓冲运动,再在此基础上“构建”有摩擦力的运动(越来越慢~~~)。提示是:在速度的控制上想办法。
- 厚土Go学习笔记 | 24. map字典测试用例(文字出现次数统计)
- .NET Core+MySql+Nginx 容器化部署
- Trie树分析
- 厚土Go学习笔记 | 23. map字典的使用
- JDK动态代理的底层实现原理
- 冷场了吗?我带着phpcms9.6.2 注入来救场了
- 厚土Go学习笔记 | 22. 实现Pic
- ie8和chrome获取上传图片的宽度和高度等尺寸
- 厚土Go学习笔记 | 21. range用法
- Golang Stub初体验
- 厚土Go学习笔记 | 20. slice 继续
- 数据挖掘算法之深入朴素贝叶斯分类
- 歪?我想要一个XXE。
- 厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素
- 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 数组属性和方法
- Python Selenium模块安装使用教程详解
- Python selenium模块实现定位过程解析
- Django ORM判断查询结果是否为空,判断django中的orm为空实例
- ThinkPHP框架整合微信支付之JSAPI模式图文详解
- 一文掌握PHP Xdebug 本地与远程调试(小结)
- PHP生成随机码的思路与方法实例探索
- CI框架教程之优化验证码机制详解【验证码辅助函数】
- ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
- PHP中str_split()函数的用法讲解
- 微信JSSDK分享功能图文实例详解
- spring-boot-route(八)整合mybatis操作数据库
- PHP扩展Swoole实现实时异步任务队列示例
- ThinkPHP框架下微信支付功能总结踩坑笔记
- spring-boot-route(九)整合JPA操作数据库
- spring-boot-route(十)多数据源切换