第7章 网页界面中的动画设计(网页界面设计与制作课件).ppt

第7章 网页界面中的动画设计 课堂学习目标 ? 掌握网页动画的概念、基本元素和种类 ? 了解网页动画的特点与作用 ? 掌握网页动画设计的原则 ? 掌握常见网页动画的设计 ? 掌握网页动画广告的设计 · 从消费心理学来讲，只有先引起消费者对您的产品的注意，才有可能进入到比较、联想、判断、购买行动的施行等一系列的消费心理过程。 · 在浩瀚的网络上，网站就好像急需引起注意的产品，如何吸引网络消费者，也就是浏览者的注意，使他进一步浏览您的网站，关注您希望他关注的信息，是每一位网页设计者煞费苦心的问题。 · 多媒体功能在网络上的实现，为设计师们提供了新的吸引浏览者视线的“工具”。 · 原来的静态页面由于视频与声音元素的注入，使其视觉效果和感官享受得以向三维、四维空间拓展。 · 其中，网页动画的出现不仅丰富了网站建设的设计元素，同时其较强的视觉冲击力使它在表现设计师意图方面具有更多的能动性，有助于吸引浏览者关注到最需要的地方。 · 作为多媒体功能中视频效果的主要元素，动画已经成为网页设计师喜爱的传达信息的形式。 7.1 网页动画概述 7.1.1 网页动画的基本原理 · 根据有关记载，最早的动画出现在1831年。 · 法国人Joseph Antonine Plateau把几张画好的图片按顺序置于一部机器的圆盘上。 · 当机器以一定速度带动圆盘旋转时，通过一个观察窗观看这些旋转的图片，图片中的人物魔术般地动起来，产生了最原始的动画效果。 · 随着计算机技术的飞速发展，电脑介入动画领域，动画也得以出现在国际互联网的网页上，网页动画原理与最早的动画几乎毫无二致，都是利用人们眼睛的视觉暂留原理。 · 医学已经证明，我们的视觉器官在看到的物像消失后的短暂时间内，仍可将相关的视觉印象保留大约0.1秒。 · 因此如果两个视觉印象之间的间隔不超过0.1秒，那么前一个视觉印象尚未消失前，后一个视觉印象已经产生，并与前一视觉印象连接在一起，这就是视觉暂留现象。 · 正因为我们的视觉能产生这种暂留现象，所以画在图片上的连贯动作才能“活动”起来。 · 如图7-2所示，在几页纸上画上同一个小盒，每一页上的小盒里的人都比上一页略微抬起一点，快速翻动页面，就变成小人从盒子里钻出来了。 · 中间过程的图幅越多，动画就越精致连贯。 · 如果要求不高，则几页图就够了。 7.1.2 网页动画的种类 1．二维动画 · 即平面动画、2D动画，表现物体的平面运动，产生平面视觉效果。 · 在网络上应用最广泛。此外二维动画也可以模拟三维效果。 · 根据电脑处理方式不同，二维动画又可以大致分为：Flash动画和GIF动画。 （1）GIF动画 （2）Flash动画 2．三维动画 · 即立体动画，又称空间动画、3D动画，其中的画面都是在三维空间中做出的效果，表现物体在三维空间里的形状、色彩及运动，如图7-6所示。 · 由于三维动画文件较大，对下载速度影响较大，所以在网页上还未能广泛普及。 7.1.3 网页动画的基本概念与元素 · 英国动画大师约翰·哈拉斯（John Halas）认为：“动作的变化是动画的本质。” · 随着动画技术的发展，“动作的变化”这一范围也已得到日益广泛的延伸，除了画面主体的动作变化外，还有颜色的变化、材质的变化、光线的变化，这些都使动画的面貌日新月异。 · 总结以上特点，网页动画的概念也可以一言以蔽之：网页动画是通过沿着一定时间线改变对象的属性来变化对象。 · 这个属性可以是动作、大小、形态、颜色、材质、光线等。 · 本章涉及的内容将网页上动的元素均称为动画，如旋转的标志、交替出现的图片、颤动的图标、飞行的文字等。 1．对象属性 · 指对象用来创建动画的随时间移动而变化的那部分属性，包括位置、旋转、大小和色彩等。 2．周期 · 在动画中周期是指对象运动完一次所需要的时间，或指对象从动画中出现和消失的开始时间和结束时间。 · 这个时间的确定取决于多个因素，如传达信息的复杂程度、传达对象等。 3．帧 · 在Flash中通常把时间轴上的一个个小格称为帧。 · 动画中的每一个画面对应于Flash中的一个帧，也就是说帧是组成一个动画的一系列画面中的一个，简单地说一帧就是一个画面或一张图像。 4．关键帧 · 指特殊的动画帧。只有在关键帧中，才能改变动画对象的属性。 · 将一个对象制作成动画至少需要两个关键帧。