JavaScript动画效果
Posted winfredzen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript动画效果相关的知识，希望对你有一定的参考价值。
记录学习”javascript动画效果”笔记
JavaScript动画效果
速度动画
在鼠标移入移出div元素时，设置的动画
window.onload = function ()
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function () //鼠标移入事件
startMove(0);
;
oDiv.onmouseout = function () //鼠标移出事件
startMove(-200);
var timer = null;
function startMove(iTarget)
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function ()
var speed = 0;
if(oDiv.offsetLeft > iTarget)
speed = -10;
else
speed = 10;
if(oDiv.offsetLeft == iTarget)
clearInterval(timer);
else
oDiv.style.left = oDiv.offsetLeft + speed + "px";
, 30);
效果如下：
透明度动画
设置鼠标移入时，透明度为100，移出时，为30。
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);
;效果如下：
缓冲运动
在”速度动画”中，动画的速度是均匀的，调整以下，使其做缓冲运动：
var timer = null;
function startMove(iTarget)
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function ()
var speed = (iTarget-oDiv.offsetLeft) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(oDiv.offsetLeft == iTarget)
clearInterval(timer);
else
oDiv.style.left = oDiv.offsetLeft + speed + "px";
, 30);
效果如下：
多物体动画
多物体动画
实现ul列表中ul动画，在鼠标移入和移出时改变其width：
<script>
window.onload = function ()
var aLi = document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++)
aLi[i].timer = null;
aLi[i].onmousemove = function ()
startMove(this, 400);
aLi[i].onmouseout = function ()
startMove(this, 200);
function startMove(obj, iTarget)
clearInterval(obj.timer);
obj.timer = setInterval(function ()
var speed = (iTarget-obj.offsetWidth) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == iTarget)
clearInterval(obj.timer);
else
obj.style.width = obj.offsetWidth + speed + "px";
,30);
</script>效果如下：
获取样式
如下例子，本意是使宽度减少，结果却不是这样的，宽度却在增加：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style type="text/css">
#div1
width: 200px;
height: 200px;
background-color: red;
border: 2px solid black;
</style>
<script type="text/javascript">
window.onload = function ()
animation();
function animation()
var aDiv = document.getElementById("div1");
setInterval(function()
aDiv.style.width = aDiv.offsetWidth -1 + "px";
, 30);
</script>
</head>
<body>
<div id="div1">font-size</div>
</body>
</html>将script改为如下的形式：
<script type="text/javascript">
window.onload = function ()
animation();
function animation()
var aDiv = document.getElementById("div1");
setInterval(function()
aDiv.style.width = parseInt(getStyle(aDiv,'width')) -1 + "px";
, 30);
//获取样式
function getStyle(obj,attr)
if(obj.currentStyle)
//针对IE浏览器
return obj.currentStyle[attr];
else
//针对firefox浏览器
return getComputedStyle(obj,false)[attr];
</script>就OK了。
继续完善函数
完善后的startMove()函数如下：
function startMove(obj, attr, iTarget)
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function ()
//如果属性为透明度
if(attr == 'opacity')
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
else
icur = parseInt(getStyle(obj, attr));
var speed = (iTarget-icur) / 8;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(icur == iTarget)
clearInterval(obj.timer);
else
//如果属性为透明度
if(attr == 'opacity')
obj.style.filter = 'alpha(opacity:'+(icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
else
obj.style[attr] = icur + speed + "px";
,30);链式动画
本例子，是在宽度变化之后，高度再变化，最后才是透明度变化。完善startMove方法，添加一个新的参数，用于回调。
function startMove(obj, attr, iTarget, fn)
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function ()
//如果属性为透明度
if(attr == 'opacity')
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
else
icur = parseInt(getStyle(obj, attr));
var speed = (iTarget-icur) / 8;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(icur == iTarget)
clearInterval(obj.timer);
if(fn)
fn();
else
//如果属性为透明度
if(attr == 'opacity')
obj.style.filter = 'alpha(opacity:'+(icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
else
obj.style[attr] = icur + speed + "px";
,30);
代码如下：
<script>
window.onload = function ()
var Li = document.getElementById("li1");
Li.onmouseover = function ()
startMove(Li, 'width', 400, function ()
startMove(Li,'height', 200, function ()
startMove(Li, 'opacity', 100);
);
);
;
Li.onmouseout = function ()
startMove(Li, 'opacity', 30, function ()
startMove(Li,'height', 100, function ()
startMove(Li, 'width', 200);
);
);
;
</script>效果如下：
同时运动
改善startMove方法，使其支持同时运动
function startMove(obj, json, fn)
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function ()
for(var attr in json)
var icur = 0;
//如果属性为透明度
if (attr == 'opacity')
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
else
icur = parseInt(getStyle(obj, attr));
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur != json[attr])
flag = false;
else
flag = true;
//如果属性为透明度
if (attr == 'opacity')
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
else
obj.style[attr] = icur + speed + "px";
if(flag)
clearInterval(obj.timer);
if(fn)
fn();
, 30);
动画代码如下：
<script>
window.onload = function ()
var oLi = document.getElementById('li1');
oLi.onmouseover = function ()
startMove(oLi,width:400,height:200,opacity:100, function ()
alert('完成');
);
oLi.onmouseout = function ()
startMove(oLi,width:200,height:100,opacity:30);
</script>效果如下：
以上是关于JavaScript动画效果的主要内容，如果未能解决你的问题，请参考以下文章