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的值类型不同,不能通用 ...
随机推荐
- 第一个 Asp.Net vNext 应用程序
要说免费的虚拟主机的话,最好的服务商应该就是Microsoft Azure(不是Windows Azure由世纪互联运营),提供免费的1GB .NET/Java/Python/Php空间,日流量有限制 ...
- Emberjs之Observer
Observer Person.reopen({ fullNameChanged: Ember.observer('fullName', function() { // deal with the c ...
- 【推荐】【给中高级开发者】构建高性能ASP.NET应用的几点建议
本篇目录 早期阶段就要对应用进行负载测试 使用高性能类库 你的应用是CPU密集还是IO密集的 使用基于Task的异步模型,但要慎重 分发缓存和会话(session)状态 创建Web Gardens 巧 ...
- ENode 2.0 - 深入分析ENode的内部实现流程和关键地方的幂等设计
前言 ENode是一个基于消息的架构,使用ENode开发的系统,每个环节都是处理消息,处理完后产生新的消息.本篇文章我想详细分析一下ENode框架内部是如何实现整个消息处理流程的.为了更好的理解我后面 ...
- 浅谈Excel开发：三 Excel 对象模型
前一篇文章介绍了Excel中的菜单系统,在创建完菜单和工具栏之后,就要着手进行功能的开发了.不论您采用何种方式来开发Excel应用程序,了解Excel对象模型尤其重要,这些对象是您与Excel进行交互 ...
- 基于java的设计模式入门（1）——为什么要学习设计模式
大年初一,楼主在这里给大家拜年,祝大家码上升职加薪,码上有对象结婚,码上有车有房,幸福安康. 过完年,回学校注册报道之后,大概就要回深圳到公司开始实习了.提高自己,无非就有两种方式,一是看书学习,二是 ...
- 浅析Windows安全相关的一些概念
Session 我们平常所说的Session是指一次终端登录, 这里的终端登录是指要有自己的显示器和鼠标键盘等, 它包括本地登录和远程登录.在XP时代每次终端登录才会创建一个Session,但是在Vi ...
- ASP.NET-自定义HttpModule与HttpHandler
在之前的ASP.NET是如何在IIS下工作的这篇文章中介绍了ASP.NET与IIS配合工作的机制,在http请求经过一系列处理后,最后到达ASP.NET管道中,这时,就是Http Modules和Ht ...
- Spring Trasnaction管理（1）- 线程间事务隔离
问题导读 Spring中事务是如何实现的 Spring中各个线程间是如何进行连接.事务隔离的 Spring事务配置 Spring的事务管理应该是日常开发中总会碰到的,但是Spring具体是怎么实现线程 ...
- NodeJS系列~第四个小例子，NodeJs处理Get请求和Post请求
返回目录 说在前 对于HTTP请求来说,我们通常使用的是Get和Post,除此之外还有put,delete等,而对于get来说,比较lightweight,只是对字符串的传输,它会被添加到URL地址里 ...