前面我們介紹了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循環的後面。
到這裡，簡單的動畫效果就告一段落了，慢慢的一步一步的去修改去嘗試就會有新的發現。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。