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 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
vue实现点击按钮下载文件功能
Oct 11 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
Python 类的继承实例详解
2017/03/25 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
入党积极分子介绍信
2014/01/17 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript