摘    要

随着移动互联网的用户、终端还有网络基础设施规模不停地稳定增长，H5页面的广告成为新媒体广告中的一个重要组成部分[1]。不管是产品宣传，热点炒作还是活动推广，甚至在各大app中我们都能看到H5的身影，可以看到H5的信息形式已经远远超出了我们的预想。H5广告呈现的图片展示、灵活新颖的交互方式能更得到用户的青睐。轻量级的页面做到了机动灵活，并且可以很轻巧方便的做到及时更新，让用户在有趣生动的方式中参与体验并且同时深入感知产品信息内容。

本文的主题是一个基于Annie2x[2]的交互小游戏的设计与实现，随着用户对H5的动效的追求日渐精致，Annie2x引擎做到了将用户需求和开发人员的需求基本全部照顾，是市面上比较新颖的一款2D动画引擎。Annie2x是一款专注于将Flash交互技术扩展到任何需要交互的应用领域的2D动画引擎，与AnnieJS无缝集成。AnnieJS仿照AS3的语法和架构[3]，支持ts和js两种开发语言环境方便开发且整体精简，核心代码压缩后不到70K，结合adobe及Annie2x工具使用最佳。本课题致力于研究Annie2x对于H5中动画的提升效果，将Animate CC的帧动画直接转型成为游戏，给予要求精品H5的客户更多的选择，也带给了用户们更佳的视觉体验。

关键词：Annie2x、 H5、新媒体广告；

目    录

中文摘要 I

英文摘要 II

1  绪论 1

1.1 项目研究背景 1

1.2 研究内容 1

1.3 设计目的 1

1.4 开发意义 2

1.5 本章小结 2

2  项目分析 3

2.1 需求分析 3

2.1.1 功能性需求 3

2.1.2 非功能性需求 3

2.2 关键技术需求 4

2.3 游戏开发及运行环境 4

2.4 本章小结 5

3  系统设计 14

3.1 游戏逻辑设计 14

3.2 功能性设计 14

3.3 数据库设计 14

3.4 本章小结 15

4  系统实现 16

4.1 用户进入 16

4.1.1 游戏加载 16

4.1.2 游戏登录 17

4.2 游戏主页 18

4.2.1 游戏人物 18

4.2.2 答题互动 20

4.3 AI人脸融合 21

4.6 本章小结 22

5  系统测试 20

5.1 测试目的 20

5.2 测试方法 20

5.3 测试结果 20

5.4 本章小结 21

结    论 23

致    谢 24

参考文献 25