JavaScript运动框架（全）

最新推荐文章于 2021-07-27 00:22:46 发布

浅歌陌上

最新推荐文章于 2021-07-27 00:22:46 发布

阅读量772

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScriipt

本文链接：https://blog.youkuaiyun.com/qq_30668579/article/details/48393375

JavaScriipt 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现基本动画效果，并逐步深入至三种不同的运动框架，以提升动画的视觉体验。从获取元素样式到创建运动过程，直至支持链式动画与同时进行多个动作的实现，每一步都旨在使动画效果更加平滑、流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看以下代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#aa{
width: 500px;
height: 500px;
background-color: #000066;
}
</style>
<script>
window.οnlοad=function(){
aa.οnclick= 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.youkuaiyun.com/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.youkuaiyun.com/qq_30668579/article/details/48394729

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

第一种基本运动框架：

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

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

第二种运动框架：

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

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

第三种运动框架：

//可同时进行多个运动的链式运动
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.οnclick= function () {
GoMove(this,'width',700);
};

第二种调用方式：

aa.οnclick= function () {
GoMove(this,'width',700,function(){
alert(1);
});
};

第三种调用方式：

aa.οnclick= 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的动画方法，是不是很像。也好记了！