js运动动画的八个知识点
作者:hebedich 发布时间:2024-06-07 15:27:25
今天简单的学了一下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运动动画能够有所帮助。
猜你喜欢
- 今天我们来探索python中大部分的异常报错首先异常是什么,异常白话解释就是不正常,程序里面一般是指程序员输入的格式不规范,或者需求的参数类
- 哈喽兄弟们,今天来分享一下,Python初学者必须要学会的技能,Python进行debug操作。本文用的测试代码:from torchvis
- 前言视图是数据库系统中一种非常有用的数据库对象。MySQL 5.0 之后的版本添加了对视图的支持。认识视图视图是一个虚拟表,其内容由查询定义
- 异常捕捉:try: XXXXX1 raise Exception(“xxxxx2”) except (Exception1,Excepti
- 1.打开PyCharm,选择File--Settings2.依次选择Editor---Code Style-- File and Code
- 在学习使用Python的过程中,一定会遇到文字输入与处理,这就不可避免的会使用中文字符。但是Python2.7默认使用的字符集是ASCII,
- 一、起源 因子分析的起源是这样的:1904年英
- 第一种方法:<meta http-equiv="X-UA-Compatible" content="IE
- 经常存在在我们的电脑中的垃圾文件主要是指系统在运行过程中产生的tmp临时文件、日志文件、临时备份文件等。垃圾清理器的作用其实也是对这些文件进
- 本文实例讲述了GO语言实现列出目录和遍历目录的方法。分享给大家供大家参考。具体如下:GO语言获取目录列表用 ioutil.ReadDir()
- 在使用爬虫爬取别的网站的数据的时候,如果爬取频次过快,或者因为一些别的原因,被对方网站识别出爬虫后,自己的IP地址就面临着被封杀的风险。一旦
- 数据添加函数实例//数据添加 public function newData($strName="") &n
- 自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供
- 大家已经从实际使用中了解了jquery这个javascript框架的强大,其实jquery更加强大的是可扩展。你可以编写自己的基于jquer
- 初步认识k-means翻译过来就是K均值聚类算法,其目的是将样本分割为k个簇,而这个k则是KMeans中最重要的参数:n_clusters,
- 当今互联网时代,数据处理已经成为了一个非常重要的任务。而MySQL作为一款开源的关系型数据库,被广泛应用于各种场景。本篇博客将介绍如何使用P
- python语言最常见的括号有三种,分别是:小括号( )、中括号[ ]和大括号也叫做花括号{ }。其作用也各不相同,分别用来代表不同的pyt
- 1、互动流通的活跃度是社区网站的关键,产品设计者大都需要在此猛下药。facebook有利用率最高的minifeed,myspace有“好友的
- 个人总结了在开发css框架中的一点经验,献丑了。希望大家的讨论能使我们共同进步。:)1、css框架中国的互联网行业已经发展了10年,浏览器也
- Go素数筛选分析1. 素数筛选介绍学习Go语言的过程中,遇到素数筛选的问题。这是一个经典的并发编程问题,是某大佬的代码,短短几行代码就实现了