简介

上篇tween阐之未尽，今日继续。

上篇使用tween来制作对联下滑效果，提及tween可以用于各种开场动画、游戏画面切换等场景当中。其实tween的一个重要应用场景还包括----动感菜单制作。

一款好的游戏必须搭配一个体验很好的导航菜单,tween可以帮助我们实现。如下图所示，这是小鸟的菜单，本篇实现一个比小鸟还要酷炫的菜单。

菜单分类

菜单是游戏当中必须的元素，是游戏中出现在显示屏上的选项列表，如开始游戏、关于作者、退出游戏、游戏设置等等，这些都是游戏中必备的元素。每款游戏的菜单风格也有较大差异。

菜单一般是由可点击的文字或者图片区域组成。作为一款canvas游戏，菜单可以有两种形式：

（1）Dom对象的按钮

       a.button标签

       b.img标签

       c.a标签

（2）canvas中的按钮

       a.图片按钮

       b.文字按钮

那么我们什么时候使用canvas中的按钮，什么时候使用Dom对象的按钮呢？

在一款完整的游戏当中，哪些使用dom对象，哪些使用canvas中的元素对象，这要因游戏而议。有的性能洁癖的开发者，认为canvas只负责显示游戏内容，菜单、弹出层、泡泡提示什么的都使用dom对象。但其实把所有东西都塞进canvas对性能影响不大、微乎其微，只要你的游戏引擎（canvas引擎）做好了缓存层。有的开发者是想绕过dom事件过度给canvas的流程，以及避开图片跨域、精确像素等麻烦事，所以直接使用dom对象。就菜单、弹出、泡泡等元素的粒子个数相对于游戏中丰富的内容，其粒子个数实在是微乎其微、可以忽略不计。

所以一般不使用canvas中元素菜单的原因如下：

1.性能洁癖

2.没有统一的GUI组建（比如button、silder、menu、popup、tip、progressbar、loading），而dom对象中都有成熟的插件。

由此也可以看出，这是html5相对于flash来说的一个优势所在，因为html5多了一种选择。