AE动画在H5设计中的应用研究

刘洁羽

摘 要：伴随智能手机和互联网移动终端的普及，新媒体文化市场日益发展，H5制作也逐渐走入人们的视野，各行各业把H5作为自身企业文化宣传和品牌形象推广的重要渠道，同时H5的设计与制作成了行业的新宠。目前动画技术已经开始在H5视觉设计中尝试应用了。文章对AE（Adobe After Effects缩写）动画技术在该行业内的应用进行了分析，认为动画技术的引用可以提高H5视频类的用户体验，拓宽H5的应用领域。

关键词：H5;AE动画

一、H5和AE概念解析

H5是指第五代的HTML（HyperText Markup Language），即第五代超文本标记语言，也泛指所有由H5语言产生的数字产品。在日常生活中手机、平板等设备浏览的网页以及互聯网上看到的大部分营销类、互动类的网页都是由设计人员用第五代超文本标记语言编写而成的。H5的优势在于不仅能够提供常用的音频、视频、图像、本体等的在线编辑，丰富消费者的体验效果，而且很好地解决了PC、安卓等移动终端设备地兼容问题，大大简化门槛的准入制度，为中小企业的营销推广等活动节约了宣传成本，受到越来越多企业和设计师的青睐。

借助H5的静态、动态展示可以使消费者获得新奇的观察视角和触控体验，例如用H5制作的婚礼电子邀请函和会议电子邀请函，接收者可以一边聆听背景音乐一边阅读具体的内容，还可以通过H5平台进行交流互动，如送上祝福、预祝会议顺利结束或者分享转发等新奇体验。H5编辑器的作用可概括为，能够通过简便的操作帮助用户制作出画质精良、互动体验顺畅，、视听效果丰富的移动终端营销作品（可以是链接也可以是APP）。H5的图像、音频、视频、地理信息、本地存储、脱机缓存、双向通信、新表单功能等，能够更好地满足营销市场对移动终端设备的“轻应用化”需求，并且符合“互联网+”时代的发展趋势。缺点是这类软件在视频编辑领域由于缺乏技术沉淀，不能提供很好的视频体验。

AE是Adobe After Effects的简称，是动画设计领域较为专业的电脑动画设计软件，是由美国Adobe软件公司推出并不断更新着的专业影音视频处理的付费软件。AE被广泛用于影视、动画制作、后期特效和多媒体应用的设计与制作中，借助AE软件设计师可以为观者呈现绚丽多彩的视觉特效，例如好莱坞大片中各种震撼人心的科幻场面。AE不仅可以帮助使用者进行2D和3D合成，还可以与其他Adobe软件交叉使用。如Adobe公司的图片处理软件Adobe Photoshop（简称PS），可以配合AE进行静态照片的制作与修改，利用AE对多个PS层的关键帧、路径进行合成操作，制作出动效流畅的合成效果。简单来说，AE可以轻松地控制高级的二维动画，其高效的视频处理能够确保高质量的视频输出，而AE强大的光效特效为动画作品增添了一些传统手绘动画难以完成的创意。为消费者提供更好的视频体验。不足之处在于由于是收费软件其普及率和正版率不高，入门技术难度较大，需要专门培训和学习才能更好地使用和掌握这一技术。

二、 AE动画技术在H5中的运用

第五代超文本标记语言标准的确定和规范及其优势的日益显现，使得各大互联网平台如微信、微博等争相对H5产品进行推广和普及，短短时间内H5页面及相关产业大热，各式各样的H5画面、视频等产品的编辑制作工具如雨后春笋般拔地而起，兔展、WPS H5等软件迅速走入大众视野。此类H5制作软件在平台设计上自主性强，操作自由度高，方便了不懂代码的非从事专业设计的人群，但是这也造成了H5产品的良莠不齐，特别是视频类作品。由于HTML的可视化编辑领域的开放性，致使许多不具备动画视频基础的非专业人员也可从事相关行业。这就需要在H5制作平台中引入专业的视频设计制作平台，AE就是这样一个平台。

对比国内2016年和2017年热门的H5产品，视频类的H5作品在2017年呈现出爆发式的增长，一方面是由于H5软件技术的日益成熟，另一方面是因为消费者想要获取更加丰富的视听体验。而AE动画技术在完善视听体验领域的技术积累可以很好地解决这一矛盾。通过调研发现，2017年度比较热门的视频类H5作品如《春运驯兽记》《入职第一天，网易爸爸教我学做人》等已经开始引入AE软件，将视频素材经过AE软件进行特效处理后导入H5制作平台进行互动等程序的制作，这类H5作品的视频流畅性和特效效果是其它普通H5作品所无法比拟的，带来的视觉体验也更好。AE的加入可以将简单的矢量特效以及动态化的漫画更加顺畅地展现出来。很好地提升了视频类H5作品的动画效果和体验。

如《春运驯兽记》，可以说是国内目前在H5版本编辑器中将AE后期动画运用的相当成功的案例。运用AE直接完成了两段动态漫画的制作。除了让原本静态的漫画动了起来，还运用AE的遮罩图层和路径动画功能完成了一些简单的烟雾和发光特效，在使漫画人物动起来的同时，运用镜头的运动和后期剪辑令视频看起来接近传统手绘二维动画的效果，满足用户视觉观赏体验质量的同时又大大压缩了视频制作的工作量以及各格式体量。目前H5的制作编辑器只能导入格式体量较小的视频文件，应用AE制作这种轻量的动画能很好地利用H5的现有功能。

由此可见，AE软件的引入符合当下H5的发展趋势。目前AE动画技术广泛应用于视频类、动画类的H5作品制作中，提高了原画绘制的利用率。其带来的趣味化、特效化、娱乐性的视听觉体验是符合广大受众需求的，也是符合H5平台发展的。AE软件可以提升H5作品整体的层次和品质，可以为H5作品提供良好的画面效果，同时有效降低了制作的时间成本。但目前AE软件的学习成本较高，国内正版软件使用率不高，相应的从业者不是很广泛，AE软件的引入需要H5平台的从业者投入较高的成本和学习时间，但就最终的制作效果以及市场反响来看这种投入是值得的 。

三、AE动画技术在H5中运用的意义

（一）加强用户体验

加强用户体验是H5作品不可忽视的优势，视频类H5作品有利于多平台推广。它既可以实现视频与互动无缝衔接，其兼容性又可以无需转换格式就能支持多终端应用。另外，它顺畅的视听体验是其他H5产品所不具备的。当AE技术的引入，不仅在技术上解决了H5视频编辑领域不成熟的问题，而且和其他类似的应用软件相比较，用户体验上营造的氛围更加震撼。在实际操作中AE的关键帧动画和特效效果能够灵活地与H5制作编辑器衔接应用，提升趣味性和娱乐性，能够给用户带来更丰富有趣的视听体验。

（二）拓宽使用范围

目前国内的H5主要应用于微信等社交平台，AE动画技术的加入使H5产品设计者可以考虑更广泛的应用范围，特别是在视频类H5的作品中，AE的加入可以提升產品的品质，促使更多的企业加入到H5的推广与研发中，为消费者带来更好的视听体验。而且AE软件的加入也能拓宽H5作品的传播范围，借助AE的国际化特征以及H5平台的通用性，H5平台特别是视频类的H5作品将风靡全球。

（三）丰富互动形式

伴随着AE技术的引入，为H5作品互动提供了更多的可能。设计师的一些天马行空的想法可以摆脱文案的束缚，通过AE 软件呈现在体验者的移动终端平台，使人与机器之间多了一条沟通的桥梁，使他们之间的互动不再只是点击和滑动，可以根据服务对象的具体需求，加入更有趣的视频互动形式。

四、结语

目前H5主要应用于商业社交、产品推广等领域，AE动画技术的加入可以提升H5产品的质量，设计者可以为受众带来更加完善的交互体验，更好地覆盖如场馆、店面、展览等线下实体空间的视频电子终端平台，弥补了传统H5制作平台不能很好地兼顾视频体验的不足，与传统的H5制作平台相比，AE软件技术能够灵活地与H5制作编辑器衔接。它强大的动画、影视处理能力，成为H5视频类作品取得完美视频体验的保证，既能提升作品的趣味性和娱乐性，又能够给受众带来更丰富有趣的视听体验和新奇的互动形式。

参考文献：

[1]赵前，何嵘.动画片场景设计与镜头运用[M].北京：中国人民大学出版社，2015.

[2]毛小龙.动漫基础[M].沈阳：辽宁美术出版社，2016.

[3]陈菁晶.新媒体竞争环境下的德国报业发展对我国的启示[J].辽宁高职学报，2013（2）.

作者单位：

衡水学院