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 ...
随机推荐
- 【.Net底层剖析】3.用IL来理解属性
.Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 未完待 ...
- 在<a></a>标签中调用javascript脚本
有时候,我们点击了<a></a>标签(除了跳转到指定链接外)想要它调用某个方法,及调用javascript脚本,该如何做: 方法1:<a href="javas ...
- Azure China (12) 域名备案问题
<Windows Azure Platform 系列文章目录> (1) 默认情况下,我们在创建的Azure 服务,默认使用的DNS地址为: http://xxx.chinacloudapi ...
- 转 Windows+VS2013爆详细Caffe编译安装教程
1. 安装cuda Cuda是英伟达推出的GPU加速运算平台 我这里安装的是cuda7.5,已经安装过的忽略,还没有安装过的这里有安装教程.windows下面安装还是非常简单的. 点击打开链接 ...
- 用Latex写学术论文： IEEE Latex模板和文档设置(\documentclass)
1.可以在博客园中使用latex代码输出公式,以后再以不用复制图片粘贴啦: http://www.cnblogs.com/cmt/p/3279312.html 例如以下代码两边加上 $ 符号后 x(k ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要系列文章索引
从发表第一篇文章到最后一篇文章,时间间隔有整整一个月,虽只有5篇文章,但每一篇文章都是我吸收<LEARNING HARD C#学习笔记>这本书的内容要点及网上各位大牛们的经验,没有半点废话 ...
- .NET Core扩展IServiceCollection自动注册服务
前言 在ASP.NET Core中使用依赖注入中使用很简单,只需在Startup类的ConfigureServices()方法中,通过IServiceCollection接口进行注入即可,其它的无需关 ...
- MySQL 5.1 参考手册CHM （官方 简体中文版）
点此下载: MySQL 5.1 参考手册CHM (官方 简体中文版) 在线文档:http://doc.mysql.cn/mysql5/refman-5.1-zh.html-chapter/
- 把DataTable转换为泛型List<T>或是JSON
在开发ASP.NET Web API或ASP.NET MVC时,我们从数据库得到的数据往往是DataSet或是DataTable.为了能让前端JQuery能方便使用至这些数据,我们需要把这些数据转换为 ...
- Error: pathspec '*' did not match any file(s) known to git.
git切换分支报错 error: pathspec 'develop' did not match any file(s) known to git. 解决办法如下: plumm@MACY-PC MI ...