【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition、transform来进行运动。而使用原生的Javascript来控制元素运动,须要写非常多运动的细节以及兼容。
然而。当你的BOSS不让你使用庞大的JQ框架,并且你开发的产品也须要在一些不兼容CSS3的浏览器运行的时候。你是否认为每次都要开个定时器来琢磨运动该怎么进行,是件非常费力的事情呢?
那么福利来了,笔者近期总结了两个经常使用的运动框架,并将其写成组件,
仅仅要依照以下的方法调用。就可以方便使用。
1.在你的页面中引入js
<script src="Mover.js"></script>
2.在你的js代码中创建Mover对象
<script>
window.onload=function(){
var mover = new Mover();
};
</script>
3.開始使用mover!
使用方法说明:笔者写的组件包含了两种运动框架供使用。一种是基于速度的;一种是基于时间的。让我们来先看看基于速度的运动框架的使用方法
startMoveBySpeed(obj, json, endFn);
參数obj : 传入要运动的对象
參数json : 以json的形式传入要运动的属性,包含left、top、width、height等以px为单位的属性和透明度opacity,他们的值是运动的终点
參数endFn(可选) : 结束运动后要运行的方法
<script>
//基于速度的运动框架使用方法
window.onload=function(){
//得到你要运动的元素
var oDiv = document.getElementsByTagName('div')[0];
//使用运动框架
var mover = new Mover();
oDiv.onclick=function(){
mover.startMoveBySpeed(this,{'left':200,'width':300,'opacity':50});
//使oDiv的left运动到200px,宽度变为300px,透明度变为50%
}
};
</script>
让我们来看看第二种基于时间的运动框架
startMoveByTime(obj, json, options, endFn )
參数obj : 传入要运动的对象
參数json : 以json的形式传入要运动的属性。包含left、top、width、height等以px为单位的属性和透明度opacity。他们的值是运动的终点
參数options : 以json的形式传入传入运动的总时间和运动方式,如:
{
‘times’ : 1000。//运动总时间为1s
‘fx’ : ‘linear’ // 运动形式为匀速
}
当options传入參数为空json{}时,就使用默认设置(运动时间500ms,运动形式为匀速)
參数endFn(可选) : 结束运动后要运行的方法
//基于事件的运动框架使用方法
window.onload=function(){
//得到你要运动的元素
var oDiv = document.getElementsByTagName('div')[0];
//使用运动框架
var mover = new Mover();
oDiv.onclick=function(){
mover.startMoveByTime(
this,
{'left':500,'top':200},
{'times':1000,'fx':'easeIn'},
function(){
mover.startMoveByTime(this,{'opacity':20},{});
});
//使oDiv的left变为500px,高度变为200px,结束上述运动后再使透明度变为20%
}
}
如今来说说两种方式的差别吧。使用第一种方式进行运动时。元素的各项须要改变的属性的运动速度同样,而因为每项属性起点到终点的距离不一样。所以各项属性到达运动终点的时间也不一样。
而第二种运动直接固定了运动总时间同样,所以全部传入參数的属性一起改变、一起终止。
以下是Mover.js组件的代码,笔者乃菜鸟一仅仅,欢迎指正。后面有时间也会将弹性运动、碰撞运动、重力运动一起写入框架
/*
js原生运动组件
*/
//Mover构造函数
function Mover(){
this.setting = {
'times' : 500,
'fx' : 'linear'
}
}
//获取当前样式
Mover.prototype.getStyle = function(obj,attr)
{
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
//获取当前时间
Mover.prototype.now = function(){
return (new Date()).getTime();
}
//速度版运动框架
Mover.prototype.startMoveBySpeed = function (obj,json,fnEnd)
{
clearInterval(obj.timer);
_this = this;
obj.timer = setInterval(function(){
obj.bStop = true;
for(var attr in json)
{
var cur = 0;
var speed = 0;
if(attr === 'opacity')
{
cur = _this.getStyle(obj,attr);
cur = Math.round( parseFloat(cur*100) );
}
else
{
cur = parseInt(_this.getStyle(obj,attr));
}
var speed = (json[attr]-cur)/8;
speed = speed ? Math.ceil(speed):Math.floor(speed);
if(cur !== json[attr])
{
obj.bStop = false;
}
if(attr === 'opacity')
{
obj.style.opacity = (cur+speed)/100;
obj.style.filter = 'Alpha(opacity:'+(cur+speed)+')';
}
else
{
obj.style[attr] = (cur+speed)+'px';
}
}
if(obj.bStop)
{
clearInterval(obj.timer);
fnEnd && fnEnd.call(obj);
}
},20);
}
//时间版运动框架
Mover.prototype.startMoveByTime = function(obj,json,options,endFn){
//对于时间版框架来说。初始值b是固定的,所以写在定时器外面
var _this = this;
//默认设置
extend(_this.setting,options);
var iCur = {};
//获取当前值
for(attr in json)
{
iCur[attr] = 0;
if(attr === 'opacity')
{
iCur[attr] = Math.round( parseFloat( _this.getStyle(obj,attr) )*100 );
}else{
iCur[attr] = parseInt( _this.getStyle(obj,attr) );
}
};
var iStartTime = _this.now();
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCurTime = _this.now();
var t = _this.setting.times-
Math.max(0,iStartTime-iCurTime+_this.setting.times);
for(attr in json)
{
/*
Tween[fx]函数4个參数
t:current time(当前时间)
b:beginning value(初始值)
c: change in value(变化量)
d:duration(持续时间)
return (目标点)
*/
var value = _this.Tween[_this.setting.fx](
t, //t 0~times
iCur[attr], //b
json[attr]-iCur[attr], //c
_this.setting.times //d
);
if(attr === 'opacity')
{
obj.style[attr] = parseFloat(value/100);
obj.style.filter = 'alpha(opacity:'+value+')';
}else{
obj.style[attr] = value + 'px';
}
}
if( t === _this.setting.times )
{
clearInterval(obj.timer);
endFn && endFn.call(obj);
}
},13);
}
//覆盖默认设置
function extend(child,father){
for(var attr in father)
{
child[attr] = father[attr];
}
}
//Tween运动算法
Mover.prototype.Tween = {
/*
4个參数
t:current time(当前时间)
b:beginning value(初始值)
c: change in value(变化量)
d:duration(持续时间)
return (目标点)
*/
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
}
【原生JS组件】javascript 运动框架的更多相关文章
- 原生JS封装animate运动框架
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 【repost】JavaScript运动框架之速度时间版本
一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...
- javascript运动框架(三)
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- JavaScript 运动框架 Step by step(转)
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
- javascript运动框架
下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
- javaScript运动框架之匀速运动
运动框架 1.在开始运动时,关闭已有定时器 2.把运动和停止隔开(if/else) 匀速运动的停止条件 运动终止条件:距离足够近 Demo代码 <!DOCTYPE html> <ht ...
随机推荐
- [JZOJ3383] [NOIP2013模拟] 太鼓达人 解题报告(数位欧拉)
来源:XLk 摘录 HDU2894 Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队 ...
- spring mvc给参数起别名
需求: 将http报文请求(保护body和url)中的参数传递给Controller时支持使用别名. 举例: 下面两条请求报文的结果是一致的. http://example.com/foo?jobTy ...
- nodejs 通过 get获取数据修改redis数据
如下代码是没有报错的正确代码 我通过https获取到数据 想用redis set一个键值存储 现在我掉入了回调陷阱res.on 里面接收到的数据是data 里面如果放入 client.on('conn ...
- 求推荐go语言开发工具及go语言应该以哪种目录结构组织代码?
go语言的开发工具推荐? go语言开发普通程序及开发web程序的时候,应该以哪种目录结构组织代码? 求推荐go语言开发工具及go语言应该以哪种目录结构组织代码? >> golang这个答案 ...
- jquery一些总结
今天用jquery写一个js的效果,总结了几个方法. 获取jquery对象的css样式属性:css()方法,还可以更改其css样式:$(this).css('display') ;$(this).cs ...
- Ubuntu18.04 解压zip文件乱码的解决方法
在Ubuntu的系统下解压zip文件的时候居然出现了乱码,通过查找网上的资料,解决的办法有两种 一.通过unzip行命令解压,指定字符集,由于zip格式中并没有指定编码格式,Windows下生成的zi ...
- CF718C Sasha and Array(线段树维护矩阵)
题解 (不会矩阵加速的先去学矩阵加速) 反正我想不到线段树维护矩阵.我太菜了. 我们在线段树上维护一个区间的斐波那契的列矩阵的和. 然后询问时提取每个符合题意列矩阵的答案项(不是列矩阵存了两项吗,一个 ...
- Xshell6连接Ubuntu18.04
1.首先在自己windows10电脑上安装了xshell6,安装过程不叙述了 2.打开xshell 3.执行新建命令.打开Xshell软件后找到左上角第一个“文件”菜单并单击,弹出来一个下拉框,点击选 ...
- vSphere VCSA5.5加入AD域环境问题记录
vSphere VCSA5.5加入AD域环境问题记录 实验目的: 搭建一套vSphere VCSA5.5,并加入新搭建的AD域,并使用一个域用户登录VC,赋予对VC的只读权限. 实验环境: 使用VMW ...
- ArcGIS api for javascript——查询,立刻打开信息窗口
描述 本例展示了当一个要素被查询时如何立刻打开一个InfoWindow.信息窗口能被用来将要素的属性格式化成用户易读的格式. 本例中,地图和查询任务都使用ESRI sample server上的服务K ...