JavaScript的运动框架学习总结
一、目录
1. 入门案例——实现匀速运动
2. 入门案例——实现缓冲运动
3. 实现任意值的运动框架v.1
4. 改进任意值的运动框架v.2
5. 改进任意值的运动框架v.3
6. 实现链式运动框架
7. 实现完美运动框架
二、内容
1. 入门案例——实现匀速运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小匀速的变化到目标大小。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
margin: 10px;
position:absolute;
}
</style>
<script>
var timer = null; //定时器
var speed = 10; //运动速度
function uniformMotion(obj,iTarget) {
if (obj.offsetLeft > iTarget) { //判断当前left属性的值与最终目标的值之间的位置
speed = -10; //说明当前对象的位置在目标值的右边
} else {
speed = 10;
}
clearInterval(timer); //先关闭之前的定时器
timer = setInterval(function () { //开启定时器，并保存返回的定时器对象
if (obj.offsetLeft == iTarget) {
clearInterval(timer); //运动到目标后关闭定时器
} else if (Math.abs(obj.offsetLeft - iTarget) < Math.abs(speed)) {
obj.style.left = iTarget + 'px'; //如果当前位置与目标的位置不足10，那么就让它直接跳到目标位置上
clearInterval(timer); //关闭定时器
} else {
obj.style.left = obj.offsetLeft + speed + 'px'; //让当前位置向目标位置移动
}
}, 30);
}
window.onload = function () {
var btn = document.getElementsByTagName("input")[0];
var oDiv = document.getElementById("div1");
btn.onclick = function(){
uniformMotion(oDiv,300);
}
}
</script>
</head>
<body>
<input type="button" value="匀速运动"/>
<div id="div1"></div>
</body>
</html>
2. 入门案例——实现缓冲运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小由大到小的变化到目标大小。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style>
div {
width: 100px;
height: 100px;
position: absolute;
background: red;
margin: 10px;
left: 100px;
} #div2{
width: 1px;
height:300px;
background-color: black;
position: absolute;
left:600px;
}
</style>
<script>
/*缓冲运动*/
var timer = null;
var speed = 0;
function UnUniformModition(obj,iTarget) {
clearInterval(timer);
timer = setInterval(function () {
if (parseInt(getStyle(obj, "left")) == iTarget) {
clearInterval(timer);
} else {
speed = (iTarget - parseInt(getStyle(obj, "left"))) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
obj.style.left = parseInt(getStyle(obj, "left")) + speed + "px";
}
}, 30);
}
/* 用来获取样式的值 obj-对象，name-样式名*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
window.onload = function () {
var btn = document.getElementsByTagName("input")[0];
var oDiv = document.getElementsByTagName("div")[0];
btn.onclick = function () {
UnUniformModition(oDiv,600);
}
}
</script>
</head>
<body>
<input type="button" value="缓冲运动">
<div></div>
<div id="div2"></div>
</body>
</html>
3. 实现任意值的运动框架v.1
①. 要求：只要简单的实现传入的对象、要变化的属性名和运动的最终目标，便能操作该对象的传入要变花属性的值由大到小的变化到目标大小。（基于缓冲运动）
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意值运动框架version 1.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
}
#div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script>
/**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
var timer = null;
function startMove(obj, attr, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
cur = parseFloat(getStyle(obj, attr)) * 100;//乘以100是让透明度的0~1之间的度数扩大，方便后面的使用
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
/**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
/*
var oDiv2 = document.getElementById("div2");
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
}
*/ //测试width的变化（设置了影响width值得元素）
/*
var oDiv3 = document.getElementById("div3");
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
4. 改进任意值的运动框架v.2
①. 要求：在ie低版本测试下，透明度的值因为是小数，会出现一些特殊的情况，所以对此进行改进。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2.o版本对透明度的算法进行了改进，加进了round方法 具体内容在39行-->
<meta charset="UTF-8">
<title>任意值运动框架version 2.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
} #div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script>
/**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
var timer = null;
function startMove(obj, attr, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
//因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
//因此在这里使用round()方法对其值进行四舍五入，去除掉小数
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
//如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
/**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
/*
var oDiv2 = document.getElementById("div2");
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
}
*/ //测试width的变化（设置了影响width值得元素）
/*
var oDiv3 = document.getElementById("div3");
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
*/
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
5. 改进任意值的运动框架v.3
①. 要求：在任意值的运动框架的1/2版本中，都没有实现多物体运动，也就是同时多个物体进行运动，在第三版本中加入了多物体运动的功能。
②. 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 3.o版本 支持多物体运动 下面的三个例子可以同时测试-->
<meta charset="UTF-8">
<title>任意值运动框架version 2.0</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 10px;
} #div2 {
border: 1px solid black;
}
#div3{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script> /**
*
* @param obj 操作对象
* @param attr 属性名
* @param iTarget 目标值
*/
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //单独处理透明度问题，因为只有透明度一定要小数
//因为parseFloat会得到一个带小数的值，因为计算机会有误差，所以会得到一些奇怪的数值。
//因此在这里使用round()方法对其值进行四舍五入，去除掉小数
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6; //让速度与当前位置离ITarget的距离成正比。除数越大那么缓冲就越大
//如果attr的值是0~1之间的话，下面这句代码将不可用，如果是0~100之间的话，那么就没问题
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
} /**
* 获取样式属性的值。代替offset。
* @param obj 操作对象
* @param name 属性名
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /**
* 测试：
* 下面的例子只能一个一个进行测试，因为在这里没有设置多对象动作，
* 也就是说定时器此时是共有的，如果同时使用这个定时器，会出错。
*/
window.onload = function () {
//测试width的变化（未设置border等其他影响width的属性）
var oDiv1 = document.getElementById("div1");
oDiv1.timer = null;
oDiv1.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv1.onmouseout = function () {
startMove(this, "width", 100);
}
//测试width的变化（设置了影响width值得元素）
var oDiv2 = document.getElementById("div2");
oDiv2.timer = null;
oDiv2.onmouseover = function () {
startMove(this, "width", 500);
}
oDiv2.onmouseout = function () {
startMove(this, "width", 100);
} //测试opacity的变化
var oDiv3 = document.getElementById("div3");
oDiv3.timer = null;
oDiv3.onmouseover = function () {
startMove(this, "opacity", 100);
}
oDiv3.onmouseout = function () {
startMove(this, "opacity", 30);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
6. 实现链式运动框架
①. 要求：让其运动可以一个接一个的运行，也就是链式运动。具体效果看测试代码
②. 具体代码：
html代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
background: green;
} </style> <script src="链式运动框架.js"></script>
<script>
window.onload=function(){
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
startMove(oDiv,'width',500,function(){
startMove(oDiv,'height',500);
});
}
}
</script>
</head>
<body>
<input type="button" value="运动"> <div id="div1"></div>
</body>
</html>
链式运动框架.js代码：
/**
* 获取计算后的样式
* @param obj 对象
* @param name 样式名称：width/height等
* @returns {*}
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} function startMove(obj, attr, iTarget, fun) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
if (fun) {
fun();
}
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
7. 实现完美运动框架
①. 要求：改进链式运动框架，链式框架没办法实现多个“属性”同时运动！比如width、height同时变化。链式运动框架是没法实现的，所以对此进行改进，也就是最终的运动框架！
②. 具体代码：
html代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
background: black;
}
</style>
<script src="完美运动框架.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
startMove(oDiv,{width:500,height:500},function(){
startMove(oDiv,{width:100,height:100});
});
}
} </script>
</head>
<body>
<input id="btn1" type="button" value="运动">
<div id="div1"></div>
</body>
</html>
完美运动框架.js代码部分：
/**
* 获取对象的样式
* @param obj 对象
* @param name 样式名称
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
/**
* 完美运动框架实现了链式运动框架无法实现多属性同时运动的情况。如：width/height同时运动
* @param obj
* @param json 把要运动的属性通过json方式传入。如：{width:500,height:500}
* @param fun 执行完动作后，需要调用的方法
*/
function startMove(obj, json, fun) {
clearTimeout(obj.timer);
obj.timer = setInterval(function () {
var stop = true; //用来判断是否可以关闭定时器
for (var item in json) {
var cur;
if (item == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, item)) * 100);
} else {
cur = parseInt(getStyle(obj, item));
}
var speed = (json[item] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[item]) { //判断当前对象的值是否已经达到目标值
stop = false; //未达到目标值时，让stop为false。
}
if (item == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间
} else {
obj.style[item] = cur + speed + 'px';
}
if(stop){
clearInterval(obj.timer);
if(fun){fun();}
}
}
}, 30);
}
声明：这些知识点都来自智能社的视频所得~~
JavaScript的运动框架学习总结的更多相关文章
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- Javascript之运动框架2
运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...
- JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
- Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- javascript：运动框架
function startMove(obj,json,fnEnd) { clearInterval(obj.timer);//清除定时器 obj.timer=setInterval(function ...
- Javascript之pixi框架学习
pixi 创建渲染器(renderer) 创建一个可以播放动画的区域,相当于(canvas). var renderer = PIXI.autoDetectRenderer(512, 512); do ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript中的动画的实现以及运动框架的编写（1）
大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...
随机推荐
- Mina、Netty、Twisted一起学（九）：异步IO和回调函数
用过JavaScript或者jQuery的同学都知道,JavaScript特别是jQuery中存在大量的回调函数,例如Ajax.jQuery的动画等. $.get(url, function() { ...
- spring源码分析之spring jmx
JMX架构定义: https://docs.oracle.com/javase/8/docs/technotes/guides/jmx/overview/architecture.html Archi ...
- Testing - Tips
1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...
- rsync密码使用要注意的几个点
1 客户端和服务端的密码文件不一样 服务端的密码文件格式是: 用户名:密码 比如: yejianfeng:123456 客户端的密码文件格式是: 密码: 比如 123456 所以如果一个机器即 ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 解决360、猎豹浏览器等极速模式下css3兼容问题
有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...
- 图片和Base64之间的转换
public static Bitmap GetImageFromBase64String(string strBase) { try { MemoryStream stream = new Memo ...
- Winform图片拖拽与缩放
最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个 ...
- 微信开发jssdk入门
一个项目需要在微信里获得当前位置,于是就开始了我的微信开发之旅... 微信JSSDK说明文档http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9 ...
- C#串口通信—向串口发送数据，同步接收返回数据
最近写C#串口通信程序,系统是B/S架构.SerialPort类有一个DataReceived事件,用来接收串口返回的数据,但这种方式在C/S架构下很好用,但B/S就不好处理了.所以写了一个同步模式接 ...