《js动画效果》之速度动画

来源：互联网发布：bt下载软件苹果编辑：程序博客网时间：2024/05/21 10:39

学习视屏来自慕课网《js动画效果》：http://www.imooc.com/learn/167（这里话唠几句，慕课网上目前已有许多前端学习视屏，老师们将自己的研究进行分享，讲解生动，知识点+技术分析+典型例子的练习，非常适合我这种想要进一步提高前端各方面知识和技术且找不到例子练习的人。这里我不是在给慕课网做宣传或怎么样，慕课网视屏是免费的，且视屏内容真心不错，我作为其受益人当然要大力支持慕课网呀！）。下面进入正题，根据老师的讲解及板书，我将重要的知识及关键点归纳如下，以便参考。

js动画效果的类型：

1. 速度(匀速情况下)：改变值left、right、width、height、opacity

2. 缓冲运动（非匀速运动）

3. 多物体运动

4. 任意值变化（任意改变宽，高等）

5. 链式运动（eg: 先变宽，后变高）

6. 同时运动（eg: 宽高同时变）

1.1 简单动画——速度动画

*** 例子：鼠标划上“分享“按钮区域，面板从浏览器左侧滑出显示完整个面板；鼠标滑出整个面板，面板滑进浏览器左侧边界且全部隐藏，只留出”分享“区域。

*** demo图示：

图示-1 鼠标滑出时或初始状态

图示-2 鼠标划上

*** 分析

此例可作为”匀速运动“的典型例子，其通过改变物体的 left 值来实现运动，其实现的关键技术是采用定时器 setInterval(), 不过，在代码实现的过程中，会出现许多细节问题，根据老师的讲解，可以很容易的找出形成bug的原因及解决方法（除了技术的学习，老师的编码、分析问题、解决问题的能力也非常值得学习）。下面给出我练习的代码及相应注释：

[html] view plaincopyprint?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
#box{
width:200px;
height:200px;
background:red;
position:relative; /*物体初始必须要有此参数，否则不能实现物体的移动*/
left:-200px;
top:0;
}
#box span{
width:20px;
height:45px;
background:green;
position:absolute;
left:200px;
top:75px;
color:#fff;
text-align:center;
padding-top:10px;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var divEle = document.getElementById("box");
divEle.onmouseover = function(){
//showBox();
//playBox2(10,0); 采用传参，合并后的函数
playBox3(0); //更精简的函数
};
divEle.onmouseout = function(){
//hideBox();
//playBox2(-10,-200); 采用传参，合并后的函数
playBox3(-200); //更精简的函数
}
}
//定义定时器初始化为null
var timer = null;
//简化参数个数的函数
function playBox3(target){
//先清除之前的定时器,避免开多个定时器造成bug
clearInterval(timer);
var divEle = document.getElementById("box");
var speed = 0;
//简化传参个数，为移动速度赋值
if(divEle.offsetLeft > target){
speed = -10;
}else{
speed = 10;
}
timer = setInterval(function(){
if(divEle.offsetLeft == target){ //面板全部移出/移入时，清空定时器，停止运动
clearInterval(timer);
}else{
divEle.style.left = divEle.offsetLeft + speed +"px";
}
},50); //每个50ms物体匀速运动 speed + "px"
}
//鼠标划过和移除使用同一函数
function playBox2(speed,target){
//先清除之前的定时器
clearInterval(timer);
var divEle = document.getElementById("box");
timer = setInterval(function(){
//限制动画移动的范围
if(divEle.offsetLeft == target){
clearInterval(timer);
}else{
divEle.style.left = divEle.offsetLeft + speed +"px";
}
},50);
}
//鼠标划上
function showBox(){
//先清除之前的定时器
clearInterval(timer);
var divEle = document.getElementById("box");
timer = setInterval(function(){
if(divEle.offsetLeft == 0){
clearInterval(timer);
}else{
divEle.style.left = divEle.offsetLeft + 10 +"px";
}
},50);
}
//鼠标移出
function hideBox(){
//先清除之前的定时器
clearInterval(timer);
var divEle = document.getElementById("box");
timer = setInterval(function(){
if(divEle.offsetLeft == -200){
clearInterval(timer);
}else{
divEle.style.left = divEle.offsetLeft - 10 +"px";
}
},50);
}
</script>
</head>
<body>
<div id="box"><span id="share">分享</span></div>
</body>
</html>

0 0