网站设计 Web Design

网页设计动态特效—时间轴与JavaScript

一、什么是网页设计时间轴？

　　时间轴就是按照时间顺序来控制动作执行的过程。

　　它的工作原理就是定义一系列的小时间段——帧，这些帧随时间变化，在每一个帧均可以改变网页元素的各种属性，以此实现动画效果。。

二、网页设计“时间轴”面板：用于创建时间轴

1、打开“时间轴”：窗口——其他——时间轴（Alt+F9）

2、面板组成：

1）时间轴下拉列表：给出当前网页中的多个时间轴

2）返回首帧箭头：返回时间轴的第一帧

3）回放箭头：一次向左移回一帧

4）播放箭头：从当前帧开始一次播放一帧

5）当前帧号：在文本框中显示时间轴当前所在的帧

6）FPS（帧速率）：显示每秒播放的帧数

7）Autoplay（自动播放）：自动播放时间轴

8）Loop（循环）：重复播放时间轴

9）行为通道：显示执行一个特殊帧的行为

10）帧数：行为通道和动画通道的标尺

11）动画通道：显示动画

12）播放头：由一个红色垂直标志表示，显示时间轴中激活的帧

13）动画栏：每增加一个对象，时间轴中就出现一个蓝方框，称为动画栏。

14）关键帧：在动画栏中由一个圆点表示，关键帧是表示属性的动画帧

三、网页设计创建时间轴

1、用时间轴完成动画的直线运动：

1）插入层——层内插入图像——确定动画的起始位置
2）修改——时间轴——增加对象到时间轴——单击时间轴的最后一帧——确定动画结束位置。

2、用时间轴完成动画的曲线运动：

单击时间轴上要添加关键帧的位置，修改——时间轴——增加关键帧——改变图层位置

3、动画播放：选定Autoplay（自动播放）选项

范例：飞机空战

四、网页设计在时间轴上添加行为

1．用行为触发时间轴动画：如果没有选择Autoplay，需要使用行为触发动画。

选中对象——打开行为面板——单击加号按钮——时间轴——播放（或停止）时间轴

2．行为添加到时间轴中：

选定行为通道上的某一位置——单击行为面板的加号按钮——选定某一行为

五、网页设计在时间轴中改变对象属性：

选择关键帧——改变图层可见性、尺寸、Z-index值、源文件。

范例：动态下拉菜单

六、网页设计编辑时间轴

使动画播放的时间变长：拖动结尾帧标记

使层到达关键帧位置的时间提前或延后：拖动该关键帧

改变动画开始的时间：拖动开始帧

改变整个动画路径的位置：选择整个动画条，然后在页面上拖动

在时间轴上添加或删除帧：快捷菜单

使页面在浏览器中打开时自动播放时间链：选定Autoplay（自动播放）选项

使时间轴循环播放：选定Loop（循环）选项

七、网页设计JavaScript实例制作:

　　JavaScript程序可以使你的页面更加生动，活泼，它以小的程序量完成大的功能。

　　如果你会一些编程语言的话，那么JavaScript对你来说，应该很容易，不过在这里我们为你准备了一些现成的例子；如果你对编程不太在行的话，也不用着急，可以在网上下载一些基础的教程，先简单学一下，在每个例子后，也都有尽可能详尽的讲解，可以一边欣赏，一边学习；如果你根本不想学编程，又想在自己的页面中展现出那些生动的效果，那也很简单，你只要按照例子中所说的，把相应的代码放到相应的位置就一切OK了！