您的位置：首页 > Web前端 > JavaScript

JavaScript运动框架（全）

2015-09-12 13:03 609 查看

先看以下代码：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

#aa{

width: 500px;

height: 500px;

background-color: #000066;

}

</style>

<script>

window.onload=function(){

aa.onclick= function () {

this.style.width='700px';

}

}

</script>

</head>

<body>

<div id="aa"></div>

</body>

</html>

这就实现了最简单的动画效果了！点击aa的时候，aa的宽度由原来的500px变成了700px。但是变化的过程是一瞬间的。毫无违和感。

因此我们需要用自己写的运动方式来实现动画效果。让动画效果更好看，更舒服。

这套运动框架，网上很容易找到。这里重新温习一遍！一共有三种。层层升级。

---------------------------------------------------------------------------------------------------------------------------------

首先

准备1：需要一个获取元素样式的方法来配合运动框架。

虽然JS自带了像offset,client,scroll等获取元素的方法，但是有时候获取到的值跟我们希望要会有点点偏差。

具体区别点这里：http://blog.csdn.net/qq_30668579/article/details/47961079

function getStyle(obj,name)

{

if(obj.currentStyle)

{

// IE低版本获取样式的方法

return obj.currentStyle[name];

}

else

{

// IE高版本和其它浏览器支持的方法

return getComputedStyle(obj,false)[name];

}

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------

准备2：通过className获取元素的方法

JS给我们提供了document.getElementById(),document.getElementsByTagName()等获取元素的方法。但是没有通过类名获取元素的方法，所以我们要自己写一个方法。

//通过class的选择器

function getByClass(parent,cla) {

var ele=parent.getElementsByTagName("*");

var result=[];

// 如果有多个class 依次判断

// 正则表达式RegExp：g:全局匹配（不会找到第一个匹配就结束）；i:对大小写匹；m:执行多行匹配

// \b 是语法匹配一个单词边界，也就是指单词和空格间的位置

// \\b 是转译匹配 “\b"

var re=new RegExp("\\b"+cla+"\\b","g");//简单的说，因为有这种情况：<div class="class1 class2"></div>的情况

for(i=0;i<ele.length;i++)

{

// search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

// 如果没有找到任何匹配的子串，则返回 -1。

if(ele[i].className.search(re)!==-1)

{

result.push(ele[i]);

}

}

return result;

}

如果对这个getByClass不明白，可以点这里　http://blog.csdn.net/qq_30668579/article/details/48394729
　-------------------------------------------------------------------------------------------------------------------------------------------------------------------

第一种基本运动框架：

function GoMove3(obj,attr,target){ //obj：你要运动的元素，attr你要运动的元素的属性，target：目标值

clearInterval(obj.timer); //清除原来的定时器，停止之前的动画

obj.timer=setInterval(function () { //设置定时器，就是通过定时器的设置，来不断进行一点点的运动，最到到达我们目标值才停，这样就起到了有动画过程的效果

var cur=0;

// 获取样式，分两种，一种透明度的属性，getStyle(obj,‘opacity’)，获取到的是小数形式。parseFloat（）转换为数字；Math.round：四舍五入；最后*100 转换为整数

if(attr=="opacity")

{

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}

else

{

cur=parseInt(getStyle(obj,attr));

}

// 开始判断是否运动

if(cur==target) //判断当前值是否等于目标值

{

clearInterval(obj.timer); //如果是，如停止计时器，动画结束

}

else

{

var speed=(target-cur)/6; //目标值减到现在值除以6 这样speed的值会线性变小，起到缓冲效果，如果不喜欢缓冲效果，把speed的值设为固定值即可

speed=speed>0?Math.ceil(speed):Math.floor(speed);// 大于0向上取整，小于0向下取整

// 开始动画

if(attr=="opacity") //透明度变化部分

{

obj.style.opacity=(cur+speed)/100;

obj.style[filter]='alpha(opacity:'+cur+speed+')';

}

else //其它元素变化

{

obj.style[attr]=cur+speed+"px";

}

}

},30)

}

第一种最基本的运动框架已经完成。但是不支持链式动画！链式运动就是，当动画实行完后就执行的动作。

-------------------------------------------------------------------------------------------------------------------------------------------------

第二种运动框架：

function GoMove2(obj,attr,target,fn){ //其实跟第一种运动框架比区别就在于参数多了一个fn！就是放个函数会为参数

clearInterval(obj.timer);

obj.timer=setInterval(function () {

var cur=0;

// 获取样式

if(attr=="opacity")

{

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}

else

{

cur=parseInt(getStyle(obj,attr));

}

// 开始判断是否运动

if(cur==target)

{

clearInterval(obj.timer);

if(fn)fn(); //当运动结束，如果有fn的话就执行fn!

}

else

{

var speed=(target-cur)/6;

// 大于0向上取整，小于0向下取整

speed=speed>0?Math.ceil(speed):Math.floor(speed);

// 开始运动

if(attr=="opacity")

{

obj.style.opacity=(cur+speed)/100;

obj.style[filter]='alpha(opacity:'+cur+speed+')';

}

else

{

obj.style[attr]=cur+speed+"px";

}

}

},30)

};

目前这个运动框架就剩一点不好了，就是不能同时多个动作一起执行。

-------------------------------------------------------------------------------------------------------------------------------------------------------------

第三种运动框架：

//可同时进行多个运动的链式运动

function GoMove(obj,json,fn) { //将要变换的属性值放到json中，GoMove(obj,{"width":''700px":"height":''700px"},fn) ;类似这样跟数组点像，具体什么鬼，我也说不清楚。这样就可以支持多个属性同时进行运动了！

clearInterval(obj.timer);

obj.timer=setInterval(function () {

var isStop = true; //先设isSop为真值

for(var attr in json) for 循环，遍历json里的元素

{

var target=json[attr]; json[attr] 相当于数组索引为sttr的值！！就是我们运动的目标值！

var cur=0;

if(attr=="opacity")

{

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}

else

{

cur=parseInt(getStyle(obj,attr));

}

if(cur!=target) //如果有值没到达目标值

{

isStop=false; //那些isStop就是false，就不能结束动画，

}

var speed=(target-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(attr=="opacity")

{

obj.style.opacity=(cur+speed)/100;

obj.style.filter="alpha(opacity:"+cur+speed+")";

}

else

{

obj.style[attr]=cur+speed+"px";

}

}

if(isStop) // isStop为true 说明要运动的属性全部到时候目标值了，则结束动画

{

clearInterval(obj.timer);

if(fn)fn();

}

},30);

};

这里稍微讲下isStop

这里有点绕，首先停止动画的条件是 isStop为true。也就是只要有一个动画没完成我们就给它设为false！这样他就不会停止动画。当动画全部完成了。就不给它设为false，那它的值就是一开始给他设的默认值 true！！就停止动画！

第一种调用方式：

aa.onclick= function () {

GoMove(this,'width',700);

};

第二种调用方式：

aa.onclick= function () {

GoMove(this,'width',700,function(){

alert(1);

});

};

第三种调用方式：

aa.onclick= function () {

GoMove(this,{'width':700,'height':700},function(){

alert(1);

});

};

其它当你掌握了以上这个方法。然后你再去看看JQUEYR 的animate方法，你就一目了然。

$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});

看看JQ的动画方法，是不是很像。也好记了！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航