Hexo
0%

用JavaScript实现动画效果

Posted on Edited on In

动画的基础知识

动画是样式随时间变化的的一个很好的例子，简单来说，动画就是元素的位置随时间的变化而发生变化的一种函数。

  1. 位置
    设置元素在网页里的位置的任务一般是属于表示层的，也就是CSS的任务，例子如下： 

    1
    2
    3
    4
    5
    element {
        position: absolute;
        top: 100px;
        left: 30px;
    }

    同样也可以用js来设置： 

    1
    2
    3
    element.style.position = "absolute";
    element.style.top = "100px";
    element.style.left = "30px";

这就表示了该元素将被摆放在距离网页顶部100px处，距离网页左端30px处，position属性有四个可选择的值。

属性 值 含义
position static position属性的默认值，元素的位置想会按照元素出现的先后顺序依次出现
position fixed
position relative 表现形式和static相似，区别是position属性值为relative还可以从文档的正常显示顺序里脱离出来
position absolute 如果我某个元素的position值设为absolute，那么我们就可以把它放在容纳它的容器中的任意位置

容器：这里的容器也是一个元素，只不过需要一定的条件

  • 该元素的position属性是fixed或absolute
  • 改元素的父元素的position属性是fixed或absolute

把文档里的元素放在特定的地方不需要花太大的功夫，我们假定就这样一个元素：

1
<p id="message">Woo</p>

用js代码来设置这个元素的初始位置

1
2
3
4
5
6
7
8
function positionMessage() {
    if(!document.getElementById) return false;
    if(!document.getElementById('message')) return false;
    var elem = document.getElementById('message');
    elem.style.position = "absolute";
    elem.style.top = "100px";
    elem.style.left = "30px";
}

现在我们想让这个元素的位置随时间的变化而变化

  1. 时间

接下来会用到的函数：

  • setTimeout( “function“, interval );

    • 第一个参数通常是一个字符串，其内容是要执行的函数的名字。
    • 第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间才执行第一个参数传给它的函数。
    • 该函数还有一个返回值，当我们想要结束取消一个还在等待执行的函数，就可以把这个函数的返回值赋值给一个变量，然后调用cleanTimeout( )函数。

  • cleanTimeout( );

    • 取消待执行函数的排队。
    1
    2
    var movement = setTimeout( "positionMessage", 5000 );    //让函数positionMessage()5000毫秒后执行
    cleanTimeout( movment ); //取消执行
  1. 时间递增量

我们需要对我们函数进行升级，即使使用了setTimeout( )函数，这个元素的行为依然不像动画，只不过是过了一段时间后突然跳到另一个位置

首先设定一个目标位置值，在positionMessage( )函数中递增top和left的值，直到达到目标值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function messageMove() {
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
var ypos = parInt(elem.style.top);
var xpos = parInt(elem.style.left);
if (xpos == 200 && ypos == 200) {
    return true;
}
if (xpos < 200) xpos++;
if (ypos < 200) ypos++;
if (xpos > 200) xpos--;
if (ypos > 200) ypos--;
elem.style.top = ypos + 'px';
elem.style.left = xpos + 'px';
movement = setTimeout("positionMessage",10);  
}