基于：逆向反演的交互式网页动画设计方法研究

韦艳丽　赵韩　杨亚荣

摘要：文章通过对动画运动原理的剖析，根据交互式网页动画的特点，提出由静至动逆向思维的方法创意动画，运用逆向运动反向演示的方法设计制作动画，拘建了交互式网页动画创意设计的新模式，为设计提供参考，并在实践中加以应用。

关键词：动画设计；数字化设计；新媒体艺术；交互设计；交互式网页动画；反向演示

中国分类号：J50

文献标识码：A

动画是静态视觉图像的连续运动，是通过播放一系列连续画面而形成的视觉映像，因其直观、信息含量大且艺术感染力强，被广泛应用于互联网，成为网站页面构成的重要组成部分，使页面生动有活力，达到引起关注、引导浏览和实现交互的目的。网页动画与传统动画最大的区别在于其交互性，交互式网页动画具有数据量小、表现力强、形式多样和交互性等特点，其运动的原理来自于动画的运动原理，在艺术呈现上不拘于技术的前卫与否，而是视觉、听觉和情境的营建，设计过程是将形态、色彩和声音等媒体信息进行整合的过程。通过由静至动逆向思维的方法创意动画和逆向运动反向演示的方法制作动画，从而完成交互式网页动画的设计，充分发挥动画在网络世界的互动传播的力量。

一、由静至动逆向思维的方法创意动画

交互式网页动画作为网页的构成部分，在网页中的应用主要有Banner动画、片头动画和酋页动画等，在网页上的应用不同，而其合成设计的方法和流程都是相同的，在设计表达形式上与平面设计有很大的相似性，不同的是媒介的不同和网页是动态的并具有交互性。

（一）逆向思维创意构思。在创意设计上，采用逆向思维的方法能为创意带来新的视角，特别是在视觉效果表达上，经常会遇到设计瓶颈，运用方向逆向、置换逆向和状态逆向的方法进行创意设计，由设计达到的最终效果反推出满足的必要条件，轻而易举的完成创意，准确地把握创新点，将设计开发过程中的问题简单化，提高设计效率和效果。

1.方向逆向。交互式网页动画设计的过程是在静态视觉的基础上加上动态元素和交互功能，将一个静态的视觉画面变成一个动态的影像，以达到吸引眼球引起注意和产生交互的目的。动画的播放是按照“从前向后”的顺序播放的，从第1帧开始播放，一直播放到最后一帧，而在动画创意设计时，要用方向逆向的方法，从相反方向进行，遵循“从后向前”的原则。首先确定一个动作最后一帧的静态视觉效果，再逆向完成动画的运动过程。

2，置换逆向。交互网页动画的设计是由静态图到动态图转化的过程，静态图的创意在动画表现中起着关键作用，根据动画表达的主题，采用置换逆向的方法，从新的视角进行思考，将看似不相关的事物组合在一起来表达，从而使“图”产生新颖独特的艺术效果，并赋予其丰富的内涵。引发人们的联想和情感的共鸣。

3状态逆向。交互式网页动画往往在交互过程中呈现。对于这种过程动画，可以采用状态逆向的方法，利用动画中事物的不同状态，甚至利用其缺点来表达，从而使看似普通的事物有了新意。例如在动画中，用花骨朵做按钮，通常是当用鼠标点击时花骨朵是打开的，而当点击后花朵却凋谢散落一地时，人们的心情是不一样的。

（二）由静至动完成创意。交互式网页动画的设计过程是由静至动逆向设计的过程，首先确定最后一帧的静态视觉效果，然后再让这张静态的“图”动起来，在“图”的创意设计上采用一些能表达动画内涵，具有一定视觉冲击力的形态、色彩、空间和声音等视听元素来表现，吸引用户的注意，并用一些动画形式使这些元素运动出现，弓I导人们的视觉流程，从而达到有效传达信息的目的。在视觉表现上可以采用单镜头和多镜头的形式表现。单镜头的表现形式，是动画的运动过程基于一张“图”，将图中的视觉元素进行解剖，再以不同的动画形式依序出现，最后定格，从而生动的表达设计主题。多镜头的表现形式，是动画的运动过程是基于多张“图”，如盛唐卷烟网站的片头动画设计，从文化角度表现“唐韵”，采用六个镜头也就是六张图片来表达，从“唐”字到摇晃出现的马车到系列化的唐元素，最后点题“盛唐”网站主题，用多镜头视觉丰富的表达了网站的内涵和韵味，再配以音乐，使动画表现更具动感。

二、逆向运动反向演示的方法制作动画

通过由静至动逆向方法完成了动画的静态视觉效果以后，再用逆向运动反向演示的方法让这些静态图片动起来形成动画。

1.静态视觉元素分解。首先将最后帧静态视觉画面中需要运动的元素进行分解，如背景、图形、图像和文字等元素，在FLASH软件中将其分解到不同的图层中，使其成为能在舞台上独立运动的元素。

2，动态视觉生成。将图层中需要运动和交互的视觉元素转换为图形、按钮或影片剪辑元件，再把这些运动元件用动画表现形式生成动态视觉让其动起来。交互式网页动画的形式多种多样，从设计原理上有四种类型。关键帧动画，动画形式为逐帧动画；时间轴动画，动画形式有形状补问、动作补间、运动引导和遮罩动画；程序语言动画，是用ActionScfipt脚本语言开发的脚本动画；还有一种是用Flash第三方辅助设计软件开发的插件动画。每种动画形式能产生不同的动画效果，在设汁中灵活应用。

3，添加交互语句。交互式网页动画的设计制作，要实现画面的运动播放，同时要能产生交互，通过在图形元件、按钮元件或影片剪辑元件上添加stop、goto、getURL、loadMovie或qmt等交互语句实现交互。stop语句是一个停止播放命令，用于控制动画的停止播放goto语句是一个跳转命令，用于控制动画的跳转；getURL语句用于建立网页的链接，调用JavaS-cnpt脚本等；loadMovie语句用于载入外部图像与动画影片，实现不同动画之间的链接；quit语句是一个命令用于退出动画影片，不同的语句执行不同的指令。

4.添加音效。为了增强效果，除了追求视觉上的表现，还需通过音效来渲染气氛，音效的添加要根据动画表现的主题来选择。一般在网站片头动画和首页动画中应用的比较多，可以通过音效丰富网站的表现效果，更好的表现设计的主题，网页动画中的音效文件不可太大。否则会影响动画的播放。不是所有的交互式网页动画都适合添加音效。

5，输出。动画设计完成后，通过测试和调整，将其发布输出成FLASH的文件格式，再上传到网站上，完成整个动画的设计制作过程。最终输出的动画效果应该是与开始设计的最后帧的视觉画面效果是一致的。

三、设计案例分析

以“FLASH一网页动画创意大赛”Banner广告动画设计为例，设计制作的过程是由静态视觉到动态生成再到实现交互的过程，如图1所示。将最后帧的静态视觉画面中的运动元素，不同颜色的“圈圈”图形、“人物头饰”图像、“FLASH一”、“网页动画创意大赛”文字和绛红色的背景在FLASH软件中分解，放置到不同的层中；把不同颜色的“圈圈”图形分别转化为图形元件，“人物头饰”图像转化为影片剪辑元件，“FLASH一”和“网页动画创意大赛”文字分别转化为按钮元件：再设计画面的运动，不同颜色的“圈圈”图形元件运用逐帧动画，使其分别在画面中逐渐出现，“人物头饰”图像影片剪辑元件运用运动引导动画，使其头饰如同发光般一直在循环运动，“FLASH一”和“网页动画创意大赛”文字按钮元件，以运动补间的形式由镜头外逐渐出现，在动作设计时要注意对时间的控制和调整；然后在“FLASH一”和“网页动厕创意大赛”文字按钮添加上添加getURL交互语句，使单击其按钮能跳转到链接的页面；最后输出动画，输出动画的效果与最后帧的静态视觉画面效果一致。

动画是静态视觉图像的连续运动，交互式网页动画的设计过程是将一个静态视觉画面转化为动态影像的过程，由静至动逆向思维的方法创意动画，逆向运动反向演示的方法设计制作动画，通过网页动画的表现形式产生画面运动，再添加交互语句和音效，从而创建基于网络的交互式动画。