南大软院大神养成计划——第十四天

女爷i 2022-08-17 15:23 158阅读 0赞

今天是南大软院大神养成计划实施的第十四天，离结束越来越近了，我也要加紧学习了。今天学习的主要内容是jS动画剩下的部分——链式运动和同时运动和一些动画案例。

**链式运动：**

什么是链式运动呢？链式运动就是结束一个运动的时候，去直接做另一个运动 ，你可以无限延伸下去，比如改变了div的长度后，我们又接着改变高度，然后又改变透明度，这就是链式运动。

**实现原理：**

就是在startMove(obj,attr,iTarget)再加一个fn参数使其变为startMove（），并在清除动画之后，加入fn方法：if(fn)\{fn();\}  
在主页中，在三个参数之后再加入一个参数  
startMove(Li,'width',400,function()\{   
startMove(Li,'height',200,function()\{ startMove(Li,'opacity',100);  
\})  
\})

startMove就是一个运动框架，前一天的博客已经写到这部分内容，根据相应的参数持续相应的改变属性的运动，这个startMove的运动是缓冲运动。

fn相当于回调函数。

链式运动在改变属性后，肯定要复原原来的属性，复原的顺序跟改变的顺序是相反的，如我们先改变了宽度，然后高度，那么复原的顺序就是先复原高度然后再复原宽度。

**实现代码：**

function startMove(obj,attr,iTarget,fn)\{   
clearInterval(obj.timer);//1.2+++  
obj.timer=setInterval(function()\{//1.2+++  
var icur=null;  
//1.判断类型  
if(attr=='opacity')\{   
icur=Math.round(parseFloat(getStyle(obj,attr))\*100);  
\}else\{   
icur=parseInt(getStyle(obj,attr));  
\}  
//2.算速度  
var speed=(iTarget-icur)/8;  
speed=speed>0?Math.ceil(speed):Math.floor(speed);  
//3.检测停止  
if(icur==iTarget)\{   
clearInterval(obj.timer);  
if(fn)\{   
fn();  
\}  
\}else\{   
if(attr=='opacity')\{   
obj.style.filter='alpha(opacity:'+(icur+speed)+')';  
obj.style.opacity=(icur+speed)/100;  
\}else\{   
obj.style\[attr\]=icur+speed+'px';  
\}  
  
\}  
\},30);  
\}  
function getStyle(obj,attr)\{   
if(obj.currentStyle)\{   
return obj.currentStyle\[attr\];  
\}else\{   
return getComputedStyle(obj,false)\[attr\];  
\}  
\}

**链式运动调用方法：**

window.onload = function()\{   
var oDiv = document.getElementById("div1");  
oDiv.timer = null;  
oDiv.onmouseover = function()\{   
startMove(oDiv,'width',400,function()\{//先改变宽度  
startMove(oDiv,'height',400,function()\{//然后改变高度  
startMove(oDiv,'opacity',100);//然后改变透明度  
\});  
\});  
\};  
oDiv.onmouseout = function()\{   
startMove(oDiv,'height',200,function()\{//先还原透明度  
startMove(oDiv,'opacity',30,function()\{//然后还原高度  
startMove(oDiv,'width',200)//最后还原宽度  
\})  
\});  
\};  
\};

\})

**同时运动：**

同时运动就是同时做两种运动，而不是一个运动做完后接着另一个运动，比如我们同时改变宽度和高度。在实现同时运动的时候，我们需要粗略的了解json。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。

**json格式：**

var json=\{a:12,b:13\};//可以放入多对值，每对值之间用“，”隔开，‘a’代表值得名称，12是值。  
for(var i in json)\{//用for-in循环访问json里的值  
alert(i); //弹出a  
alert（json\[i\]); //弹出12

定义一个json｛｝通过for（var i in json）来遍历里面的值，使得属性可以同时变化。  
注意：当json里的某个值到达目标时，就会停止定时器，此时需要对代码做出修改  
json｛name/key｝

想具体了解json的同学，可以访问**http://www.cnblogs.com/pigtail/archive/2012/06/08/2541314.html，这里详细讲解了json的内容。**

所以根据以上json的知识，我们可以修改我们的框架来使其可以同时改变多个属性。

**代码如下：**

function startMove(obj,json,fn)\{   
var flag=true;//标志所有运动是否到达目标值，  
clearInterval(obj.timer);  
obj.timer=setInterval(function()\{   
for(var attr in json)\{   
var curr=0;  
//判断是否为透明度  
if(attr=='opacity')\{   
curr=Math.round(parseFloat(getStyle(obj,attr))\*100);  
\}else\{   
curr=parseInt(getStyle(obj,attr));  
\}  
//移动速度处理  
var speed=0;  
speed=(json\[attr\]-curr)/10;  
speed=speed>0?Math.ceil(speed):Math.floor(speed);  
if(curr!=json\[attr\])\{//如果没有达到目标值，怎么设定运动没有完成，flag=false  
flag=false;  
\}  
if (attr=='opacity') \{   
obj.style.filter='alpha(opacity:'+(curr+speed)+")";  
obj.style.opacity=(curr+speed)/100;  
\}else\{   
obj.style\[attr\]=curr+speed+'px';  
\}  
\}//这个是定时器里的函数结尾  
if(flag)\{//如果运动全部做完，则设置flag==ture  
clearInterval(obj.timer);  
if(fn)\{   
fu();  
\}  
\}

有了这个框架，我们就可以实现大部分网上的动画效果，所以后面的动画效果都是基于这个框架实现的。

今天的学习就到这，期待明天的学习

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关南大软院大神养成计划——第十八天

今天是南大软院大神养成计划实施的第十八天。今天还是继续学习jQuery基础部分——常用插件部分，当我们能够灵活运用jQuery的各种插件时，我们的网页代码将能够简化大量的代码，

╰半橙微兮°/ 2022年08月18日 01:59/ 0 赞/ 194 阅读

相关南大软院大神养成计划——第十七天

今天是南大软院大神养成计划实施的第十七天，今天学习的还是jQuery基础一.jQuery事件与运用页面加载时触发ready()事件 ready()事件类似于onLo

超、凢脫俗/ 2022年08月18日 00:59/ 0 赞/ 207 阅读

相关南大软院大神养成计划——第十六天

今天是南大软院大神养成计划实施的第十六天，今天继续学习jQuery基础。一.过滤性选择器该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找

叁歲伎倆/ 2022年08月18日 00:43/ 0 赞/ 189 阅读

相关南大软院大神养成计划——第十五天

今天是南大软院大神养成计划的第十五天，离比赛的日子越来越近了。今天学习的主要内容是jquery基础。什么是JQuery呢？ jQuery是一套跨浏览器的JavaScrip

曾经终败给现在/ 2022年08月18日 00:40/ 0 赞/ 160 阅读

相关南大软院大神养成计划——第十四天

今天是南大软院大神养成计划实施的第十四天，离结束越来越近了，我也要加紧学习了。今天学习的主要内容是jS动画剩下的部分——链式运动和同时运动和一些动画案例。链式运动：什么

女爷i/ 2022年08月17日 15:23/ 0 赞/ 159 阅读

相关南大软院大神养成计划——第十三天

今天是南大软院大神养成计划实施的第十三天，今天学习的主要内容是JS动画效果。在浏览网页时候，我们经常会看到一些动画，有一些是flash动画，有一些则是用js编写的js动画，

ゞ浴缸里的玫瑰/ 2022年08月17日 15:17/ 0 赞/ 160 阅读

相关南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天，今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。先说说鼠标事件，鼠标事件

Myth丶恋晨/ 2022年08月17日 14:27/ 0 赞/ 176 阅读

相关南大软院大神养成计划——第十一天

今天是南大软院大神养成计划的第十一天，最近学习速度有点慢，主要是因为还参加了数学建模的比赛，所以不得不先把主要精力投入到数学建模比赛中，所以最近的博客都有点小水了。今天学习

浅浅的花香味﹌/ 2022年08月17日 14:23/ 0 赞/ 154 阅读

相关南大软院大神养成计划——第十天

今天是南大软院大神养成计划实施的第十天。今天主要学习了“DOM事件探秘”。首先说说第一章“事件流”，那什么是事件流呢？事件流就是描述描述从页面中接受事件的顺序，在浏览器中，

青旅半醒/ 2022年08月17日 14:14/ 0 赞/ 252 阅读

相关南大软院大神养成计划——第四天

时间飞逝了，转眼间就离南大软院大神养成计划实施有4天，这4天说长也不长，说短也不短，对于南大软院大神养成计划来说，算蛮长的了，比较已经过了1/7，对于大学生涯，这四天根本不算什

「爱情、让人受尽委屈。」/ 2022年08月10日 09:49/ 0 赞/ 186 阅读