Javascript动画效果（一）
Javascript动画效果（一）
前面我们介绍了Javascript的回到顶部效果，今天呢，我们对Javascript动画做进一步的研究。在这篇博文中我们只介绍简单的匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动，同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较。
1、简单的匀速运动
下面我们介绍一个demo，鼠标移入，动画向右移动（即隐藏部分显示）；鼠标离开，动画向左运动（继续隐藏）整个过程都是匀速的。有了前面回到顶部效果作为基础，这里主要讲解重要部分，先来看看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style type="text/css">
body,div,span{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
}
#share{
width: 20px;
height: 40px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
//一进来就加载
window.onload = function(){
//获取div
var oDiv = document.getElementById('div1');
//鼠标移入时执行函数
oDiv.onmouseover = function(){
startMove();
}
//鼠标移出时执行函数
oDiv.onmouseout = function(){
startMove1();
}
}
//定义一个定时器
var timer = null;
function startMove(){
//让它一进来的时候就把计时器清掉，避免后面引入多个计时器
clearInterval(timer);
var oDiv = document.getElementById('div1');
//插入一个定时器
timer = setInterval(function(){
// oDiv.style.left = oDiv.offsetLeft+10+'px';
// //offsetLeft 当前left的值
// //此时运行的结果为鼠标移上去后，一直在动，此时需要if进行判断
if(oDiv.offsetLeft == 0){
//当当前的left值为0的时候，清空计时器
clearInterval(timer);
}
else{
//当当前的left值不为0的时候，进行移动
oDiv.style.left = oDiv.offsetLeft+10+'px';
}
},30)
} function startMove1(){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == -200){
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft-10+'px';
}
},30)
} //可以修改当前内容里面相同的部分 </script>
</head>
<body>
<div id="div1">
<span id="share">
分享
</span>
</div> </body>
</html>
在Javascript部分，我们发现有很多代码重复了，这时我们可以通过将不同的地方用参数的方法传进去，主要代码如下：
/*
* 前面的onmouseover和onmouseout事件中分别改为
* startMove(10,0);
* startMove(-10,-200);
* 后面再将 startMove和startMove1两个函数进行合并，代码如下：
*/
function startMove(speed,iTarget){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
},30)
}
此时我们还是会发现一个问题，就是，在功能相同的情况下，参数越少越好，这时我们要对我们之前的代码做进一步修改，因为iTarget是目标值，所以我们考虑将speed参数去掉，代码如下：
//考虑参数越少越好原则，可以去掉speed，同时，前面的onmouseover和onmouseout事件也应相应改变
function startMove(iTarget){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
//定义一个speed
var speed = 0;
//对speed进行判断
if(oDiv.offsetLeft > iTarget){
//当oDiv.offsetLeft > iTarget时，应该向左移动
speed = -10;
}
else{
speed = 10;
} if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
},30)
}
到这里，我们的匀速运动效果基本完成。在上面的demo中，我们改变的是left效果，同理我们还可以改变right，width和height效果。思考：在css3动画中有改变透明度的效果，在这里我们是否可以通过前面的方式来得到实现呢？
答案是：大致可以用上面的方法去实现，但是有个小小的问题值得注意，无论是left，right还是width，height它们都有单位px（在上面的demo中，有一行代码就是这样：oDiv.style.left = oDiv.offsetLeft+speed+'px';），而透明度无论是opacity也好，是filter也好，它们都是没有单位的，故我们可以写如下代码：
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(100); //鼠标移入的时候，透明度为100%
}
oDiv.onmouseout = function(){
startMove(30); //鼠标移出的时候，透明度为30%
}
}
var timer = null;
var alpha = 30;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer); //在运行之前，先关闭定时器
//关了定时器后，现在运行时需要加定时器
timer = setInterval(function(){
var speed = 0;
if(alpha > iTarget){
speed = -10;
}
else{
speed = 10
}
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30)
} </script>
</head>
<body>
<div id="div1">
要求：
<p>鼠标移入，透明度为100%；鼠标移出，透明度为30%</p>
</div>
</body>
</html>
到这里，我们的速度动画就告一段落了。关于opacity和filter，详情请见这里
2、缓冲运动
回忆之前回到顶部效果，为了增加用户的体验效果，回到顶部时是先快后慢。有了前面的基础，这里句很好办了，以demo1为例，我们可以添加如下代码：
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//注意这里的取整问题，不然运动后回不到原来的位置
// if(speed > 0){
// speed = Math.ceil(speed);
// }
// else{
// speed = Math.floor(speed);
// }
if(iTarget == oDiv.offsetLeft){
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
},30)
}
在这段代码中，var speed = (iTarget - oDiv.offsetLeft)/20;通过控制被除数可以控制动画的速度，然后我们分别用Math.floor和Math.ceil分别进行向下和向上取整，如果没用取整，那么鼠标移入和移出都达不到想要的效果（计算机在进行计算时总是有误差的）。到这里，缓冲运动也介绍的差不多了。下面我们来介绍多物体运动。
3、多物体运动
有了前面的基础，我们来看多物体运动时就觉得简单了。在多物体运动中，我们将宽度变化和透明度变化分开来讲
【多物体宽度变化】
在多物体宽度变化中，我们用无序列表来实现。与单个物体宽度变化不同的是，我们要用for循环依次遍历我们想要的值，关键代码如下：
var aLi = document.getElementsByTagName('li');
for(var i = 0; i< aLi.length; i++){ //i=0
aLi[i].onmouseover = function(){
startMove(this,400);
}
aLi[i].onmouseout = function(){
startMove(this,200);
}
}
全代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体动画</title>
<style type="text/css">
body,ul,li{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i = 0; i< aLi.length; i++){ //i=0
aLi[i].timer = null;
aLi[i].onmouseover = function(){
startMove(this,400);//this指向当前的aLi[i].onmouseover事件
}
aLi[i].onmouseout = function(){
startMove(this,200);//this指向当前的aLi[i].onmouseout事件
}
} } //var timer = null;
/*
* 若该代码还是在这里，当鼠标依次缓慢经过时不会出现大的问题，但是当移动的速度比较快时，会发现有问题：可以变得越来越宽
* 原因：timer并不是每次在鼠标经过每一个区域时为null
* 解决办法：在前面的for循环中加上aLi[i].timer = null;这样每次执行前都是null开始
*/ function startMove(obj,iTarget){//因为li有多个，这里需要再传一个参数obj
//var aLi = document.getElementsByTagName('li');
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetWidth)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget == obj.offsetWidth){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth+speed+'px';
//是obj 不是 aLi
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
【多物体透明度动画】
有了上面的例子，我们就能很容易的写出多物体透明度动画的代码，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体透明度动画</title>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
div{
width: 200px;
height: 200px;
background: red;
margin: 10px;
float: left;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer = null;
oDiv[i].alpha = 30;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}
}
//var alpha = 30;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = 0;
if(iTarget > obj.alpha){
speed = 10;
}
else{
speed = -10;
}
if(iTarget == obj.alpha){
clearInterval(obj.timer);
}
else{
obj.alpha +=speed;
obj.style.filter = 'obj.alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
和之前的timer一样，alpha = 30;也需要写在for循环的后面。
到这里，简单的动画效果就告一段落了，慢慢的一步一步的去修改去尝试就会有新的发现~
Javascript动画效果（一）的更多相关文章
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
- javascript动画效果
之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...
- javascript动画效果之任意效果任意值
通过学习,我发现当同一个ul下的li标签如果想要不同的效果,那怎么办? 比如第一个li是width变化,第二个li为透明度(opacity)变化,而opacity的值和width的值类型不同,不能通用 ...
随机推荐
- Salesforce + AngularJS + Bootstrap
也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...
- Entity Framework搜索指定字段解决方案
public class Book { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; ...
- listview(3、动态刷新）
listview的动态刷新主要是调用adapter的notifyDataSetChanged. 在下面的例子中除了记录正常的刷新外,还记录一种错误的情况(注释掉的),作为备忘. notifyDataS ...
- Linux 网络编程（IO模型）
针对linux 操作系统的5类IO模型,阻塞式.非阻塞式.多路复用.信号驱动和异步IO进行整理,参考<linux网络编程>及相关网络资料. 阻塞模式 在socket编程(如下图)中调用如下 ...
- Preserving Remote IP/Host while proxying
因为这个文章用一般手段看不到,所以摘录下来备用 (From http://kasunh.wordpress.com/2011/10/11/preserving-remote-iphost-while- ...
- [异常解决] MPU6050启动异常读出陀螺仪和加速度计的值全为0的解决办法
在调试一个自己做的手环,每次用keil烧写好程序运行的蓝牙.陀螺仪都是正常的.但是掉电再上电之后蓝牙是好的.陀螺仪可以读出ID但是读出的加速度和角速度数据全为0. 下面是发生问题时main函数的前面部 ...
- Android 数据传递（二）Activity与fragment之间的通信
在网上找到了一篇总结的非常好的文章,我这里就贴出他的博文地址.自己就不再写这个方面的总结了. Activity与Fragment通信(99%)完美解决方案
- Excel快速改变行列的次序
改变行列次序是在Excel中常常需要进行的操作,多数用户的方法是先剪切要调整的行或列,然后选定目标位置,单击菜单“插入”→“剪切单元格”. 事实上,使用键盘来配合的话,改变行列的次序可以更快捷.比 ...
- 转 - ubuntu apache2下目录结构
ubuntu apache2下目录结构 原文:http://blog.csdn.net/jibcy/article/details/8060651 在Windows下,Apache的配置文件通常只有一 ...
- MySQL(二) 数据库数据类型详解
序言 今天去健身了,感觉把身体练好还是不错的,闲话不多说,把这个数据库所遇到的数据类型今天统统在这里讲清楚了,以后在看到什么数据类型,咱度应该认识,对我来说,最不熟悉的应该就是时间类型这块了.但是通过 ...