网页设计教程-第9章ppt课件

第9章创建网页动画 时间 2次课 4学时 第9章创建网页动画 教学提示 本章介绍 时间轴 面板以及使用时间轴的各种方法 让读者了解如何创建时间轴动画 如何为时间轴添加行为 如何应用插件实现时间轴的特殊效果和创建各种不同的层动画效果 教学目标 通过本章内容的学习 读者可以掌握设计网页的动态效果的一般方法 第9章创建网页动画 9 1网页动画利器 时间轴9 2将时间轴与行为结合起来9 3用插件实现层动画效果9 4精彩的网页过渡效果9 5上机实战 9 1网页动画利器 时间轴 9 1 1 时间轴 面板9 1 2创建时间轴动画9 1 3修改时间轴动画 9 1网页动画利器 时间轴 时间轴也叫等时线 用于表示网页存活时间中发生的各种状态 通过时间轴上不同部位放置的不同内容 就可以实现网页元素的动态效果 利用时间轴构建动态网页最大的好处是 它是通过往文档中添加JavaScript代码来实现网页的动态效果 不需要任何ActiveX控件 任何插件和任何Java小程序 具有极好的兼容性 利用时间轴 可以创建各种类型的动态效果 例如 可以改变层的位置 大小 可见性 重叠顺序等 利用时间轴 还可以实现在页面载入后进行其他类型的动作 例如可以改变图像源文件 在特定时间上执行相应的行为等 9 1 1 时间轴 面板 时间轴主要是通过 时间轴 面板构建的 用户可以选择 窗口 时间轴 命令 如图9 1所示 或按Alt F9组合键 即可以显示如图9 2所示的 时间轴 面板 从图9 2可以看出 时间轴 面板主要由时间轴下拉列表框 行为通道 动画通道 动画条 控制按钮和控制选项等部分组成 下面介绍 时间轴 面板上的主要元素 时间轴下拉列表框 主要用于控制哪条时间轴显示在 时间轴 面板上 在下拉列表中 可以选择不同的时间轴 可以在 时间轴 面板上显示不同的时间轴设置 在 行为通道 上 将显示为时间轴上相应时间中所附加的行为 浅蓝色的方块表示存在行为 在 帧数 这一行中 显示时间轴上不同时间对应的动画帧 回放头 是位于帧数行上的红色方块 它表明当前的动画放映的位置 通过在 时间轴 面板上拖动回放头 可以在文档窗口中看到相应时间上动画放映的状态 同时 当前回放头所在的帧位置会显示在 时间轴 面板上方的前进箭头按钮和后退箭头按钮之间的文本框中 9 1 1 时间轴 面板 在 时间轴 面板上有33个 动画通道 分别从1排列至33 表示可以在同一时间进行33路动画设置 一旦某个动画通道上存在动画 就会显示动画条 动画条 表明某个对象在某段时间内的持续状态 动画条是真正的动画实体 其中一些空白圆圈表明关键帧 在一个动画通道上可以包含多个动画条 表示多个不同的对象 不同的动画条在同一帧内不能控制相同的对象 关键帧 就是由用户为对象所指定的在某一确定时刻 帧 上的状态 Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作 例如 要使对象直线运动 只需要定义开始和结束的位置 这两个位置就是关键帧 Dreamweaver会根据直线的开始和结束位置自动计算中间状态 在动画条上 关键帧以一个圆圈的形式表示 单击 返回 按钮 可以使回放头返回到动画的开始位置 单击 后退 按钮 可以将动画后退一帧 连续单击后退按钮 可以向后播放动画 单击 播放 按钮 可以将动画播放一帧 连续单击播放按钮 可以播放动画 在Fps 每秒帧数 文本框中 可以设置动画播放的速度 用户可以直接输入每秒帧数的值 选中 自动播放 复选框 则当网页被载入后自动播放动画 如果取消选中该复选框 则网页载入之后 动画并不播放 用户可以利用为对象附加行为的方法 提供播放动画的命令 选中 循环 复选框 则动画播放完毕后会自动重新播放 即动画将不断地循环播放 直至用户离开页面 取消选中该复选框 则动画只播放一次 9 1 1 时间轴 面板 图9 1打开 时间轴 面板 9 1 1 时间轴 面板 9 1 2创建时间轴动画 要创建时间轴动画 简而言之 就是往动画通道上添加对象 构建动画条 然后构建动画条上的关键帧 并从文档窗口中设置对象在关键帧上的位置 从而完成动画的创作 1 创建基本动画利用时间轴 用户可以在网页上创建层的动画效果 要利用时间轴构建层的基本动画 其具体操作如下 1 将层移动到动画的起始位置 该操作实际上就是指定起始的关键帧 选中要制作动画的层 2 选择 修改 时间轴 增加对象到时间轴 命令 即可在动画通道中添加一个对应该层的动画条 也可以直接将层拖动到 时间轴 面板上的相应位置来创建动画条 从动画条上 可以看到层名称 3 拖动动画条上最右端的关键帧标记 可以改变动画条的长度 也即改变动画的播放时间 单击动画条最右端的关键帧标记 然后按住并拖动层面左上角的 手柄 将层面拖动到一个合适的位置 如图9 3所示 这时在页面中自动生成一条从起点到终点的直线 并显示在页面中 它表示这个层面的运动轨迹 这实际上也创建了动画结束位置的关键帧 9 1 2创建时间轴动画 图9 3为层拉出一条直线的轨迹 9 1 2创建时间轴动画 4 单击 播放 按钮可以在文档窗口中预览动画效果 根据需要 选中或取消相应的 自动播放 和 循环 复选框 单纯的直线式动画显得比较枯燥 在Dreamweaver中还可以产生贝塞尔曲线的运动轨迹 这需要在 时间轴 面板中添加新的关键帧 关键帧是 时间轴 面板上的控制单元 在添加一个对象时 系统自动为对象设置了头和尾两个关键帧 通过改变关键帧可以改变动画的形态 要利用时间轴产生层的贝塞尔曲线的运动轨迹 其具体操作如下 1 单击需要在动画条的中间位置添加关键帧的帧 2 在动画条上的相应帧位置右击 在如图9 4所示的快捷菜单中选择 增加关键帧 命令 也可以选择 修改 时间轴 增加关键帧 命令来添加关键帧 3 选中关键帧标记 然后从文档窗口中拖动层 并将它移动到该帧对应的位置上 这时原来的直线将变成一条圆滑的贝塞尔曲线 如图9 5所示 4 单击 播放 按钮可以在文档窗口中预览动画效果 可根据需要选中或取消相应的 自动播放 和 循环 复选框 9 1 2创建时间轴动画 图9 4利用快捷菜单添加关键帧 9 1 2创建时间轴动画 图9 5为层产生贝塞尔曲线的运动轨迹 9 1 2创建时间轴动画 2 录制层路径对于简单的直线路径 采用前面介绍的方法 可以很好地创建动画 然而如果动画路径较为复杂 如曲线或圆形 则无法通过先设置关键帧 再拖动层到指定位置的方法来创建动画 Dreamweaver提供了可记录路径的方法 允许用户直接在文档窗口中拖动层 而Dreamweaver在后台记录拖动层的路径 然后将它应用到时间轴上 利用这种方法 可以很容易地创建各种移动方式的层动画 要使用 录制层路径 命令产生层复杂运动轨迹 具体操作如下 1 在文档窗口中选择要创建层动画的层 将层移动到动画的起始位置 2 在动画条上的相应帧位置右击 在如图9 4所示的快捷菜单中选择 录制层路径 命令 这时就可以开始录制层的移动路径 3 在文档窗口中 按照需要的路径拖动层 4 当希望动画停止时 可以释放鼠标 停止移动层 这时就会产生如图9 6所示的一个复杂的运动轨迹 5 单击 播放 按钮可以在文档窗口中预览动画效果 可根据需要选中或取消相应的 自动播放 和 循环 复选框 设计好动画之后 可以在 时间轴 面板中对时间轴进行各种控制 从而实现对动画的编辑和修改 利用时间轴 不仅可以改变层的位置 还可以改变层的某些属性 如大小和可见性等 利用时间轴 还可以改变图像的源文件 实现某些特殊效果 9 1 2创建时间轴动画 图9 6为层产生复杂的运动轨迹 9 1 2创建时间轴动画 3 设置动画的可见性为了设置层面的闪光效果 需要设置关键帧的可见性 这可以在 属性 面板中的 可见性 中设置 有3个选项 分别是visible 可见 hidden 隐藏 和inherit 继承 要设置关键帧的可见性 具体操作如下 1 从 时间轴 面板上 单击选中关键帧1 这时文档窗口中相应的对象也被选中 在 属性 面板中设置这个关键帧层的 可见性 属性为visible 可见 2 从 时间轴 面板上 单击选中关键帧15 这时文档窗口中相应的对象也被选中 在 属性 面板中设置这个关键帧层的 可见性 属性为hidden 隐藏 3 从 时间轴 面板上 单击选中关键帧30 这时文档窗口中相应的对象也被选中 在 属性 面板中设置这个关键帧层的 可见性 属性为visible 可见 4 从 时间轴 面板上 单击选中关键帧45 这时文档窗口中相应的对象也被选中 在 属性 面板中设置这个关键帧层的 可见性 属性为inherit 继承 则这个关键帧层的可见性将继承关键帧30的 也就是visible 可见 设置完毕 保存文档后在浏览器中预览效果 如图9 7所示为页面中的层在可见状态时的示意图 而图9 8所示为层在隐藏状态时的示意图 9 1 2创建时间轴动画 图9 7页面中的层可见 9 1 2创建时间轴动画 图9 8页面中的层隐藏 9 1 3修改时间轴动画 1 改变动画时间要改变整个动画时间 其具体操作如下 1 单击相应的动画条 可以选中一个动画条 2 拖动动画条最右端的关键帧标记 将它左右拖动 如图9 9所示 这时动画条长度会发生变化 同时上面所有的关键帧标记也按照比例移动相应的位置 如果希望保持所有中间位置的关键帧不动 可以按住Ctrl键 再拖动结束帧标记 要改变动画局部的播放时间 即改变关键帧之间的动画播放速度 其具体操作如下 1 单击相应的动画条 可以选中一个动画条 2 在动画条上左右拖动相应的关键帧标记 要改变动画起始时间 其具体操作如下 1 单击相应的动画条 可以选中一个动画条 2 将动画条在动画通道上左右拖动 2 改变动画对象要改变动画条对应的对象 其具体操作如下 1 单击相应的动画条 可以选中一个动画条 右击 在快捷菜单中选择 改变对象 命令 这时会打开如图9 10所示的对话框 提示用户选择新对象 2 选择新对象 单击 确定 按钮确定操作 即可改变动画条对应的对象 9 1 3修改时间轴动画 图9 9改变动画的整个时间 图9 10 更改对象 对话框 9 2将时间轴与行为结合起来 9 2 1为时间轴附加行为9 2 2控制时间轴的行为 9 2将时间轴与行为结合起来 若要为时间轴中某一帧触发行为 而不是让来访者的交互去触发行为 则将行为放置在时间轴中即可 例如 用户可以在时间轴的第15帧处开始播放声音 在时间轴中只有一种事件可以触发动作 动画到达一个指定的帧编号时 如onFrame7事件 行为不只是影响时间轴中的对象 它可以影响页面上的任何对象 在浏览器中预览时间轴以查看该行为如何工作 用户不能在Dreamweaver中预览该行为 9 2 1为时间轴附加行为 利用 播放时间轴 和 停止时间轴 动作 可以让用户通过单击链接或相应的按钮来开始和停止时间轴 这些动作也可以在用户鼠标经过链接 图像或其他对象时自动开始或停止 要使用 播放时间轴 和 停止时间轴 动作 具体操作如下 1 取消时间轴上的 自己播放 复选框 单击 时间轴 面板上行为通道中的帧 2 如图9 11所示 选择 窗口 行为 命令 打开 行为 面板 单击 行为 面板上的 按钮 并从如图9 12所示的动作菜单中选择 播放时间轴 命令 这时会打开如图9 13所示的对话框 3 从对话框中的 播放时间轴 下拉列表中选择需要播放的时间轴为 Timeline1 4 单击 确定 按钮确定操作 查看默认事件是否是用户需要的事件 如果该事件不是用户所需的 可以从弹出的事件菜单中选择事件为 onclick 5 单击 行为 面板上的 按钮 并从如图9 12所示的动作菜单中选择 停止时间轴 命令 这时会打开如图9 14所示的对话框 9 2 1为时间轴附加行为 图9 11打开 行为 面板图9 12选择 播放时间轴 命令 9 2 1为时间轴附加行为 图9 13 播放时间轴 对话框 图9 14 停止时间轴 对话框 9 2 1为时间轴附加行为 6 从对话框中的 停止时间轴 下拉列表中选择需要停止的时间轴为 Timeline1 7 单击 确定 按钮确定操作 查看默认事件是否是用户需要的事件 如果该事件不是用户所需的 可以从弹出的事件菜单中选择事件为 OnDbclick 在对时间轴对象使用了 播放时间轴 和 停止时间轴 动作后 保存文档 然后在浏览器中预览效果 图9 15所示为单击层后动画开始沿着轨迹运动 如果再次双击这个层将停止时间轴的播放 9 2 1为时间轴附加行为 图9 15单击层播放时间轴动画 9 2 2控制时间轴的行为 利用 转到时间轴帧 动作 可以将使时间轴跳到某指定帧上 时间轴 面板中的 循环 复选框的作用就是在动画的最后一帧上添加 转到时间轴帧 动作 使其跳到第一帧并重新开始动画 要使用 转到时间轴帧 动作 其具体操作如下 1 单击 时间轴 面板上行为通道中的第50帧 2 选择 窗口 行为 命令 打开 行为 面板 3 单击 行为 面板上的 按钮 并从如图9 12所示的动作菜单中选择 转到时间轴帧 命令 这时会打开如图9 16所示的对话框 4 在 时间轴 下拉列表中 可以选择需要添加行为的一条时间轴 然后在 前往帧 文本框中 输入帧名为 40 5 如果希望 前往帧 和当前帧之间的时间轴部分产生循环 可以在 循环 文本框中输入循环的次数为 4 6 单击 确定 按钮确定操作 查看默认事件是否是用户需要的事件OnFrame10 在对时间轴对象使用了 转到时间轴帧 动作后 保存文档后在浏览器中预览效果如图9 17所示 当打开这个网页后 动画层在运动到第50帧位置时 这时位置如图9 17 a 所示 然后转到第40帧的位置 这时位置如图9 17 b 所示 并重复4次 9 2 2控制时间轴的行为 图9 16 转到时间轴帧 对话框 9 2 2控制时间轴的行为 a b 图9 17控制时间轴的播放 9 3用插件实现层动画效果 9 3 1让层漂浮在窗口的固定位置9 3 2利用插件实现滑动的层 9 3用插件实现层动画效果 插件可以用于拓展Dreamweaver的功能 在Dreaweaver中可以利用各种插件实现层的动画效果 比如 让层按照特殊的路径运动 让层漂浮在窗口的固定位置 制作精美的滚动看板 让层跟着鼠标运动 实现层的过渡效果等 这一节将介绍如何利用插件在Dreaweaver中实现几种层的动画效果 9 3 1让层漂浮在窗口的固定位置 在Dreamweaver中 可以使用NirvanaFloatingLayer 漂浮在天堂的层 插件方便地制作漂浮在窗口固定位置的层 在任何情况下 该层都保持在窗口的固定位置 要使用NirvanaFloatingLayer插件 其具体操作如下 1 从网上下载NirvanaFloatingLayer mxp文件 获得该插件 2 启动插件管理器 并安装NirvanaFloatingLayer mxp插件 如图9 18所示为在插件管理器中安装好的NirvanaFloatingLayer mxp插件 3 此插件是一个命令插件 重新运行Dreamweaver8 即可在 命令 菜单中看见NirvanaFloatingLayer命令 如图9 19所示 选择 命令 NirvanaFloatingLayer命令 这时会出现如图9 20所示的对话框 9 3 1让层漂浮在窗口的固定位置 图9 18安装NirvanaFloatingLayer mxp插件 9 3 1让层漂浮在窗口的固定位置 图9 19选择NirvanaFloatingLayer命令 9 3 1让层漂浮在窗口的固定位置 图9 20PersistentScrollingLayer对话框 9 3 1让层漂浮在窗口的固定位置 4 在TopPosition 距离顶部位置 文本框中 输入需要层距离浏览器顶部占浏览器高度几分之一的分母数 比如 如果层位于距离浏览器顶部1 3处 则在文本框中输入 3 5 单击YesPlease 请插入 按钮确定使用这个插件 6 在文档页面中拖动出现的层 确定层距离浏览器左边的位置 在层中添加内容 比如插入一张图像或是输入一些广告性的文本 在文档中添加了NirvanaFloatingLayer插件 并在该插件的 属性 面板中设置好插件的属性后 用户可以在浏览器中预览固定于滚动条的层的效果 在打开这个添加了NirvanaFloatingLayer插件的网页时 用户可以观察到这个层很快就垂直漂浮到距离浏览器顶部1 3处的位置 如图9 21所示 不论浏览者拖动窗口的滚动条 还是改变浏览器的窗口大小 该层都保持在窗口的这个位置 图9 22所示为拖动滚动条后这个层的位置 9 3 1让层漂浮在窗口的固定位置 图9 21打开页面时固定在滚动条的层 9 3 1让层漂浮在窗口的固定位置 图9 22拖动滚动条后固定在滚动条的层 9 3 2利用插件实现滑动的层 在Dreamweaver中可以使用SlideLayer 滑动层 插件方便地实现层在网页页面中的滑动效果 它比利用时间轴制作的滑动层动画更方便 更有趣 要使用LayerSlider 滑动层 插件 其具体操作如下 1 从网上下载flevSlideDiv231 Mxp文件 获得该插件 2 启动插件管理器 并安装flevSlideDiv231 Mxp插件 图9 23所示为在插件管理器中安装好的flevSlideDiv231 Mxp插件 3 重新启动Dreamweaver8 在文档窗口中 选中要附加行为的对象 4 选择 窗口 行为 命令 打开 行为 面板 单击 行为 面板中的 按钮 并从如图9 24所示的动作菜单中选择Flev00ware SlideLayer 滑动层 命令 这时会出现如图9 25所示的对话框 9 3 2利用插件实现滑动的层 图9 23安装flevSlideDiv231 Mxp插件 9 3 2利用插件实现滑动的层 图9 24选择LayerSlider命令图9 25SliderLayer对话框 9 3 2利用插件实现滑动的层 5 在Selectlayer 层的名称 下拉列表中 选择需要添加滑动效果的层为Layer5 6 在Left 新的距离窗口左边位置 文本框中 输入层滑动终点距离浏览器窗口左边位置的像素值为 400 在Top 新的距离窗口顶部位置 文本框中 输入层滑动终点距离浏览器窗口顶部位置的像素值为 400 在Constantspeed 固定速度 选项组中输入3 Px 20 ms 设置速度为3像素每20ms 7 单击 确定 按钮确定操作 在文档页面中拖动这个层 确定层滑动初始的位置 为层添加LayerSlider 滑动层 插件 并在插件的 属性 面板中设置好插件的属性后 用户可以在浏览器中预览这个滑动层的效果 在打开这个添加了SlideLayer插件的页面时 单击图像后 用户可以观察到这个层慢慢地滑向浏览器的右下方 如图9 26所示 9 3 2利用插件实现滑动的层 图9 26滑动层效果 9 4精彩的网页过渡效果 9 4 1使用插件实现网页过渡9 4 2插入元数据实现网页过渡 9 4精彩的网页过渡效果 网页过渡是指当进入 离开网站或网页时 页面具有不同的刷新方法 添加此效果可以使网页更具动感 在这一节中我们将利用插件和插入元数据两种方法 来实现精彩的网页过渡效果 9 4 1使用插件实现网页过渡 在Dreamweaver中可以使用PageTranstions 网页过渡 插件方便地实现各种网页的过渡效果 比如 从页面四周收缩到一个点 从一个点扩展为整个页面 从上下收缩为一条横线 从一条横线上下扩展为整个页面 从左右收缩为一条竖线 从一条竖线左右扩展为整个页面 从上收缩为一条横线 从下收缩为一条横线 从左收缩为一条竖线和从右收缩为一条竖线等效果 要使用PageTranstions插件 具体操作如下 1 从网上下载PageTranstions mxp文件 获得该插件 2 启动插件管理器 并安装PageTranstions mxp插件 图9 27所示为在插件管理器中安装好的PageTranstions mxp插件 3 此插件是一个命令插件 重新运行Dreamweaver8 即可在 命令 菜单中看到PageTranstions命令 选择 命令 PageTranstions命令 如图9 28所示 这时会出现如图9 29所示的对话框 9 4 1使用插件实现网页过渡 图9 27安装PageTranstions mxp插件 9 4 1使用插件实现网页过渡 图9 28选择PageTranstions命令图9 29设置PageTransitions对话框 9 4 1使用插件实现网页过渡 4 选中PageEnter 网页页面进入 复选框 并在其后的下拉列表中选择载入页面时的过渡效果为BoxIn 方形收缩 在后面的for下拉列表中 选择页面载入过渡效果的时间为 3 单位为秒 5 选中PageExit 网页页面推出 复选框 并选中Sameasabove 同上面一样 单选按钮 为网页添加了PageTranstions 网页过渡 插件 并在插件的 属性 面板中设置好插件的属性后 用户可以在浏览器中预览这个网页过渡的效果 可以按照下列步骤进行操作 在打开这个添加了PageTranstions 网页过渡 插件的网页后 用户可以观察到这个页面慢慢地过渡到另一个页面 如图9 30所示 9 4 1使用插件实现网页过渡 图9 30网页过渡效果 9 4 2插入元数据实现网页过渡 在Dreaweaver同样可以利用菜单命令来设置网页的过渡模式 要使用Meta 元数据 命令实现网页过渡 其具体操作如下 1 选择 修改 页面属性 命令 如图9 31所示 这时会出现如图9 32所示的对话框 2 利用 背景颜色 颜色框为页面背景选择颜色 或者在 背景图像 文本框中 为页面背景选择背景图片 然后单击 确定 按钮确定 3 选择 查看 文件头内容 命令 如图9 33所示 显示文档窗口的头部 然后 选择 插入 HTML 文件头标签 Meta 元数据 命令 如图9 34所示 这时会出现如图9 35所示的对话框 4 在 属性 下拉列表中 选择HTTP equivalent HTTP等价属性 选项 在 值 文本框中 输入 Page Enter 网页页面进入 表示进入网页时有网页过渡效果 5 在 内容 文本框中 输入 RevealTrans Duration n Transition 3 Duration 为 n 表示网页过渡效果的延续时间为n秒 Transition 表示过渡效果方式 值为 3 时表示圆形展开 9 4 2插入元数据实现网页过渡 图9 31选择 页面属性 命令图9 32 页面属性 对话框 9 4 2插入元数据实现网页过渡 图9 33选择 文件头内容 命令图9 34插入Meta命令 9 4 2插入元数据实现网页过渡 图9 35设置META对话框 9 4 2插入元数据实现网页过渡 6 设置完毕后 单击 确定 按钮确定插入元数据 为网页插入Meta 元数据 后 用户可以在浏览器中预览这个网页过渡的效果 当完成网页编辑存盘并再次打开该网页时 网页以如图9 36所示的圆形展开方式显示网页上的内容 在网页设计时 有25种网页过渡效果 用户可以尝试这些不同的网页过渡效果 9 4 2插入元数据实现网