网页动画技术发展与应用

刘文胜 陈首同

摘要：网页中动画的应用已被普遍接受，本文分析了各种动画技术特点与发展状况，给出了应用建议。随着Flash逐步退出市场，HTML5动画技术占据主流位置，学习HTML5相关技术与工具软件成为趋势。

关键词：网页动画;Flash;CreateJS;HTML5动画

中图分类号：TP37   文献标识码：A   文章编号：1672-9129（2020）11-0162-02

互联网时代下各种网站与网页数量激增，如何增强网页的表现效果是大家关注的焦点之一。在网页中采用动画技术成为普遍的做法。在动画技术与动画制作工具不断推陈出新的当下，针对不同应用需求采用合适的技术实现网页动画值得分析，可避免走弯路和降低开发与维护成本。

1 简单GIF动画

GIF是Graphics Interchange Format（图像交换格式）的缩写，1987年由Compu Serve公司开发，得到各平台的广泛支持，俗称动图。GIF是一种位图，图片由许多的像素组成，最高支持256种颜色。

GIF简单小巧，适合在网页中作为动态的小图标，添加动感效果，引导用户的关注重点内容。其缺点是颜色不够丰富，无法呈现高品质图像，各帧间只有简单的像素变换，难以实现复杂流畅的过渡特效。

GIF图片制作简单，Photoshop软件就能完成，方法是选中窗口中动画面板，新增帧，然后在各帧中调整各图层的可见性及各部件的位置，设置帧间的间隔时间，输出时选择存储为WEB和设备使用格式，存储为GIF图像即可。更专业些的GIF动画制作软件有Ulead Gif Animater。没有安装上述软件时，登录在线GIF制作网站也可完成素材上传和动画生成。

2 CSS动画

CSS层叠样式表（Cascading Style Sheets）是一种修饰网页HTML标签样式的描述语言。CSS不仅可以静态地修饰网页，还可以配合脚本语言动态地对网页元素进行格式化。CSS实现了网页内容与网页修饰的分离，让维护工作更规范。

目前流行的是CSS3，其新特征有：图片圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

CSS3新增的功能中有盒子的变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现旋转、扭曲、缩放或者移位。通过变形元素，web网页的内容展示更加形象生动。新增的过渡与动画属性则可通过简单的CSS设置就实现动画效果，以前需要编写大量的脚本代码才能实现。transition过渡属性通过设定某种元素在某段时间内的变化实现简单的动画效果。animation动画属性能够实现复杂的样式变化及交互效果。

随着网络带宽的大幅提升，网页风格也在向大幅面、大图标、大图片的方向发展。许多图片酷炫的变形、过渡和动画效果就是CSS3实现的。学习较简单、易于模仿，不需要编写复杂的脚本语句，这是CSS动画技术的优点。

3 简单脚本语言动画

JavaScript是一种解释型运行为主的脚本编程语言，被广泛地应用于Web前端开发中，它支持面向对象、命令式和函数式编程风格。JavaScript在1995年由Netscape公司首次設计实现。JavaScript的国际标准是ECMAScript。2015年发布了ECMAScript的第六版，通常被称为ECMAScript 6 或者ES6。

JavaScript编程入门简单，容错性强，用简单的代码即可实现鼠标移入移出更换图片的效果，增强了网页的交互性、动态性。通过设置定时器改变图片的坐标或在画布上绘制图形可轻松制作出简易动画。

但要精通JavaScript并制作出复杂的网页动画并不容易，其代码冗长、跟踪调试困难、浏览器兼容性差等缺点都会成为障碍。解决的一个办法是采用被大家广泛接受的框架中的特效或插件，拿来即用，修改几个参数或替换素材即可，不需要去读懂其中的复杂源代码。

jQuery是一个快速、简洁的JavaScript框架，它的设计目标是写地更少、做地更多，并且有良好的浏览器兼容性。jQuery UI 是以 jQuery为基础的网页用户界面代码库，包含众多用户交互、动画、特效和可更换主题的可视控件，应用它们可以提高简单网页动画脚本开发的效率。Bootstrap框架中也包含了许多组件供使用，如轮播图组件，其内部已包含大量的修饰样式与控制脚本，用户只需提供自己的图片素材、选择按钮样式和间隔时间，即可实现令人满意的轮播动画效果。

4 Flash动画与HTML5动画

4.1 Flash动画。Flash动画曾经在网页中大量使用，最广泛的应用就是用其制作的网页广告。许多的网页游戏使用Flash制作，交互性很强。优秀的富有故事情节的Flash动画片深受大家喜欢。Flash动画最突出的特点就是矢量绘图，矢量意味着即使动画无限放大，也能够保证画面清晰。

Flash最初由乔纳森盖伊开发，实现了矢量绘图，并且有时间轴，这些特性一直是Flash最突出的特点。1996年被Macromedia公司收购定名为Macromedia Flash。2005年Adobe公司收购Macromedia，改名为Adobe Flash。Flash动画的扩展名为.swf，其播放时使用名为Flash Player的播放器或插件。Flash支持ActionScript脚本语言编程，AS3增加了面向对象的语言特性。2010年乔布斯宣布苹果公司移动产品不支持Flash播放器，因其存在性能与安全问题。2017年，Adobe公司宣布放弃Flash Player产品。

Flash曾经是事实的网页动画标准，许多学校都开设了相关课程并学习其ActionScript脚本编程。当前形势下，及时地更新教材和调整教学内容是大势所趋。

4.2 HTML5动画。当前主流的网页动画技术是HTML5动画。

HTML超文本标记语言是网页标准，最初版本在1993年制定。2014年10月，W3C组织推出HTML 5作为推荐标准。

HTML5动画是众多技术的组合，可以使用Canvas、CSS3、JavaScript、SVG等實现网页动画，其功能完善，几乎可以实现所有的Flash动画功能。

HTML5动画在浏览器中运行不需要额外的插件。由浏览器本身支持的标签和脚本语言来实现动画，大大提高了动画加载的速度，并且动画的精确度高，运行高效率的同时保证了高可靠性和高安全性。HTML是开放的国际标准技术，使用免费。在手机等可移动设备上低功耗很重要，HTML5动画可以实现更低功耗。

HTML5专业化程度高，涉及内容多，学习周期较长。学习HTML5、CSS3、JavaScript本身就需要花费较长时间，还要学习框架或相关技术的使用。

目前较为专业的HTML5动画制作工具是Adobe Animate CC， Animate CC相比原Flash软件，多了一种文件类型，即HTML5 canvas文件，可制作和输出HTML5动画，并尽量保持与原Flash动画制作方式的兼容性。Animate CC可以使用时间轴、舞台及各种工具来制作HTML5动画，脚本语言支持JavaScript编写。它会根据制作的内容，生成HTML文件和JS文件，可直接在浏览器中运行查看。

Animate CC要创建一个HTML5 动画文件，选择“文件”中的“新建”，选择“HTML5 Canvas”选项即可创建。要添加交互性，选择要添加 JavaScript脚本的帧，选择“窗口”中的“动作”以打开动作面板，可在其中编写代码。选择“窗口”中的“代码片段”，选择修改其中预先写好的代码片段便可实现交互功能。

CreateJS是一套可以开发 HTML5 动画与游戏的开源工具包，包含大量的JavaScript类与函数，目的是降低 HTML5 项目的开发难度和成本。Animate CC软件就是使用CreateJS库构建和发布HTML5作品。CreateJS套件包括EaselJS、TweenJS、SoundJS、PreloadJS几个模块。其中，EaselJS 用于Sprites、动画、向量和位图的绘制，实现交互功能;TweenJS实现补间动画的效果;SoundJS用于处理音频;PreloadJS用于管理网页资源的预加载工作。

要高效精准地控制动画，可系统学习CreateJS库，设计制作出个性化的效果。对于一般的需求，直接应用Animate CC软件制作输出，由软件自动生成相应的脚本代码即可。

结语：网页动画技术不断推陈出新，应根据应用需求选择合适的实现技术。Flash动画曾产生了巨大的影响，但终将被HTML5动画取代，相关专业的网页动画设计课程内容都将随之更新。

参考文献：

[1]居全伟. Flash动画的现状、问题及发展思路[D].东北师范大学，2007.

[2]赵剑. HTML5动画引擎技术的研究与实现[D].北京邮电大学，2015.

[3]杨永平.网页动画的制作与研究[J].科技资讯，2007（11）：207.

[4]平淑文，潘珏羽，张学金，杜晓荣.基于HTML5和JavaScript轻量型动画框架开发[J].计算机技术与发展，2013，23（12）：5-10.

作者简介：刘文胜，男，出生：1971.1，汉族，籍贯（省市）：湖南省衡阳市，学位：硕士，职称：讲师，研究方向：计算机应用技术。