js运动动画的八个知识点


Posted in Javascript onMarch 12, 2015

今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家。

      下面是我整理出来的结果。

知识点一:速度动画。

      1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){

oDiv.style.left=oDiv.offsetLeft+10+"px";

},30).

对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是:

a.offsetLeft和left的相同之处都是表示子节点相对于父节点的左位置。

b.但是left是既可以读又可以写的,而offsetLeft是只读的;

c.并且offsetLeft是没有单位的,获取子节点位置的时候后面不带px。

这里在引申一下其他的知识,感谢这位博主,http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/。

2.让运动的节点停止下来,这里我们用if语句做一个验证,如果offsetLeft==0,clearInterval(timer),这里的timer应该事先初始化=null,然后将之前的那个运动动画赋值给它。

3.这里有一个问题,如果在运动结束之前再次触发的运动,那么运动的速度会累加,这里,只要在整个运动开始之前,clearInterval(timer)就可以了。

4.设置移入移除效果,给运动设置参数,一个是速度speed,一个是目标位置iTarget,我们发现速度也是可以通过ITarget的位置来判断的,所以只需要一个参数即可。

知识点二:透明度渐变

1.其实,跟刚刚是差不多的,只不过ITarget的值为透明度而已,流程还是清除定时器再开一个定时器判断等等。

2.定义一个参数alpha=透明度,注意定时器里面应该这样写:

alpha+=speed;

oDiv.style.filter='alpha(opacity:'+alpha+')';         //这是非常重要的一种方法,注意是这样写的

oDiv.style.opacity=alpha/100;            //注意不要忘记除以100

3.以上都是行内样式。

知识点三:缓冲运动

1.缓冲运动就是距离越大,速度就愈大,距离越小,速度就越小,即速度与距离有关。

2.根据上面的说法,对速度进行重新的定义,一开始速度为0,而现在:

var speed=iTarget-oDiv.offsetLeft;

重新定义定时器:

oDiv.style.left=oDiv.offsetLeft+speed+'px';

此时我们发现速度太大了,可以这样:

var speed=(iTarget-oDiv.offsetLeft)/10;

3.此时会有一个严重的问题,因为屏幕的最小单位为px,所以会出现最终的left值为小数,而不为目标的iTarget,可以通过判断来解决,这里要引入Math.floor(),这是向下取整,同样还有Math.ceil(),这是向上取整。在定义speed后我们这样写:

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

这样就可以完全保证速度都是整数,并且在临界值上都为0。

知识点四:多物体运动

1.先获取所有的物体,形成一个数组,然后再用for循环来做(这种方法多么经典呀!),在for循环中添加节点事件,在函数中可以用this代替当前的节点,eg:startMove(this,iTarget),定义函数时startMove(obj,iTarget).

2.取当前宽度offsetWidth的时候就要用obj的值了。

3.当鼠标移动特别快的时候,节点的宽度未能恢复原状,这是因为定时器是大家公用的定时器,上一个节点还未恢复原状下一个节点就已经清除定时器了,解决的办法就是给每一个节点加一个index,就是在上面的for循环中加上aDiv[i].timer=null;然后再定义函数中用obj.timer替换timer。由此我们要注意共用定时器会出事的。

4.透明度的运动中,alpha代替了speed,但是即使定时器不共用,多物体的运动也会出现问题,这是因为alpha公用的原因,导致各物体相互撕扯,解决办法就是可以像timer那样在for循环中给每个节点都分配alpha。

      总结:解决冲突问题,要么初始化,要么个性化。

知识点五.获取样式

1.在改变节点宽度(移入大,移除小)的定时器中,如果给节点添加一个border边框,那么在移入的时候比目标节点小,移出的时候比目标节点大。注意width+padding+scrollbar(滚动条)+border,所以原因就是每次offset都会增加border*2-(定时器中每次减少的数值)。

2.解决以上问题的办法就是在行内写入width,并且使用parseInt(oDiv.style.width)代替offsetLeft,但是并不能总是写在行内,所以我们定义一个函数,获取链入样式:

function getStyle(obj,attr){


if(obj.currentStyle){



return obj.currentStyle[attr];
                     //ie浏览器 


}


else{



return getComputerStyle(obj,false)[attr];          //其他浏览器


}

}

3.对于font-size这种,在js里只有fontSize这一种写法。

知识点六:任意属性值

1.所有的offset-的都会有小bug,要用getStyle函数,这个函数经常和parseInt()一起用,并通常用变量保存。

2.在写style.width的时候,也可以写成style['width']。

3.对于多物体的属性值调整,可以将样式作为参数封装一下,这样多物体属性的函数就包括了(obj,attr,iTarget)这三个属性值。

4.以上的这个运动框架是不适合于透明度变化的,因为透明度都是小数的,因为两个原因,第一是parseInt,第二是attr=...+px,这里我们可以用一个if判读来对透明度进行单独处理,将parseInt换成parseFloat,去掉px。

5.计算机本身是有一个bug的,0.07*100并不等于7,所以我们引入一个函数是Math.round(),这是一个四舍五入的值。

知识点七:链式运动

1.引入move.js框架。

2.传入一个回调函数fn(),用if判断,如果有fn(),那么执行fn()。

知识点八:同时运动

1.如果写两个运动函数来控制同时运动,会发生函数覆盖。

2.使用json这个知识点,json的循环是使用for(i in json),运动函数的参数为obj,json,fn。

3.没有iTarget这个值了,取而代之的是json[attr].

写到这里,就已经完全结束了,希望大家能够喜欢。也希望对大家学习js运动动画能够有所帮助。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
javascript中indexOf技术详解
May 07 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
canvas实现图像放大镜
Feb 06 Javascript
js实现简易聊天对话框
Aug 17 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
ant design实现圈选功能
Dec 17 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 #Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 #Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 #Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 #Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 #Javascript
You might like
Smarty分页实现方法完整实例
2016/05/11 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Flask之请求钩子的实现
2018/12/23 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
工程造价专业大学生自荐信
2013/10/01 职场文书
利群广告词
2014/03/20 职场文书
公休请假条
2014/04/11 职场文书
药店促销活动策划方案
2014/08/24 职场文书
公司周年庆活动方案
2014/08/25 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android