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 MVC4 与 Web Form 并存
Web Forms 与 MVC 的asp.net 基础架构是相同的.MVC 的路由机制并不只MVC 特有的,它与WebForm 也是共享相同的路由机制.Web Forms 的Http请求针 ...
- MongoDB3.0新版本几点介绍
2015年3月3号,MongoDB新版本3.0发布了,和以前版本相比,这次改动较大,主要有以下几个方面: 1. 引入了插件式的存储引擎架构,允许第三方根据实际项目的需要开发存储引擎,类似于MySql中 ...
- Linux + Mono 目前已经支持Entity Framework 6.1
在上个随笔 CentOS上 Mono3.2.8运行ASP.NET MVC4经验中,步骤2中要求卸载EF 5.0,这样才能在Linux + Mono的环境中运行ASP.NET MVC4的Web应用.今天 ...
- 【Bugly干货分享】iOS内存管理：从MRC到ARC实践
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 对于iOS程序员来说,内存管理是入门的 ...
- 作业三：PSP记录个人项目耗时情况
PSP2.1 Personal Software Process Stages Time Planning 计划 20min Estimate 估计开发 ...
- Linux shell之打印输出
介绍 经常需要和shell命令打交道,但是一直没有系统的学习,接下来会花1到2个月的时间系统的学习一下shell命令,接下来就开启shell命令的奇妙旅行吧.本章主要介绍shell的打印输出. 知识要 ...
- 来看看Windows9到底是什么
今天有新闻一直在说windows 8.2 windows9,还给出了一张很有趣的图 我们就假设这张图是真的. 这张图透漏出两个信息 其一:开始菜单真的回来了. 不过还是不死心,绝不放弃开始屏,确实,开 ...
- bitmap算法
概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间 算法思想 32位机器上,一个整形,比如int ...
- iOS app 程序启动原理
iOS app 程序启动原理 Info.plist: 常见设置 建立一个工程后,会在Supporting files文件夹下看到一个"工程名-Info.plist"的文件, ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...