今天简单的学了一下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"codetitle">复制代码 代码如下:
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运动动画能够有所帮助。
js,运动,动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R:Episode Aegis》:重复爬塔的悲伤
- 《公会传说:遗落的世界》EA版评测:怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗?
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]