4.2　虚拟钢琴动画交互设计

本案例交互设计的过程是通过控件创建的二维面板按钮，带动场景中三维键盘的运动，每个按键都对应不同的音符和音调，以模拟真实钢琴弹奏的效果。按下键盘小球会随之运动，通过时间轴动画，水果图片也会根据音符的弹奏而翩翩起舞。除此之外，还有背景音乐的开启和关闭效果，相机360度全景展示效果，这些效果都是通过UI界面和脚本的设置来操控和完成的，按照这个思路和方法，就可以进行虚拟钢琴的动画交互设计了。

4.2.1　材质属性与UI界面设计

（1）场景物体材质调节　场景中，平面物体的贴图显示为单面，因此需要在材质的一般属性中，将双面渲染选项打开（图4-16），这样在视图中旋转，正反面都会有材质的显示效果。钢琴键盘和小球的材质类型设置为Fx Shader材质，选择材质为金属/烤漆（图4-17）。按照红、橙、黄、绿、青、蓝、紫的颜色顺序，调节材质的高光颜色，然后分别调整亮度因子为0.5，环境类型选择环境类型（3图4-18）。其中红色键盘和红色小球的材质类型保持一致，以此类推，其他物体的材质都按照这样的操作进行材质设置，设置完成后便可以在视图中实时观察其材质显示效果（图4-19）。装饰边框的材质也利用Fx shader材质进行设置，选择材质为金属/烤漆，参数采用默认设置，环境类型选择环境类型3。

（2）UI界面设计　设计制作钢琴键盘的图片按钮，分为3种状态：颜色模式状态、高亮显示状态和灰色显示状态，分别对应后期贴图设置的普通状态、鼠标经过状态和按下状态（图4-20）。在控件面板下创建图片按钮，7个音符作为二维虚拟键盘，2个音乐开关按钮控制背景音乐的开和关，3个图片按钮作为时间轴动画设置（图4-21）。图片按钮的位置尺寸根据视图的比例可调整到合适的位置，然后勾选根据窗口比例缩放控件，这样在运行窗口进行缩放时，控件可以跟随窗口的大小实时发生变化（图4-22）。在控件属性中进行贴图设置，分别将设计制作好的图片按照对应的顺序作为贴图进行导入（图4-23），其中音乐开关按钮和时间轴动画设置按钮，仅在普通状态设置一张贴图即可，这样窗口中所有的UI界面就设计完成了（图4-24）。

4.2.2　时间轴动画设计

（1）时间轴动画的时间设置　在时间轴面板中，分别创建10个时间轴，其中c、d、e、f、g、a、b设置动画的时间长度为1秒，后期对应视图中的水果音符图片做动画设置；yinfu1设置动画的时间长度为2秒，后期对应视图左下角的图片按钮做动画设置；yinfu2、yinfu3设置动画的时间长度为5秒，后期对应视图左上角和右上角的图片按钮做动画设置（图4-25）。

（2）水果音符动画设计　为了让时间轴面板能够在高级界面中显示，可以将时间轴面板中的锁定按钮打开，这样切换到三维模型界面，就可以显示时间轴面板了（图4-26）。选择场景中的Plane001物体，对应选择时间轴c在0秒的位置点击一下记录关键帧按钮（图4-27），拖动时间滑块到1秒的位置，沿着Y轴向上移动物体60～70个单位，具体位移尺寸根据视图中的实际尺寸而定，确保平面物体接触到上方横梁的位置即可，然后点击“记录关键帧”按钮（图4-28），这样物体向上位移的动画就做好了，其他6个平面物体按照以上操作步骤，选择对应的时间轴进行相应的操作即可完成水果音符时间轴的动画设计。

（3）图片按钮动画设计　为了丰富画面的视觉效果和整体氛围，利用其他三个图片按钮做时间轴动画作为场景中的动态装饰效果。切换到高级界面，按照上一步的时间轴动画设置方式，先选择左下角的图片按钮，然后选择yinfu1时间轴，做一个2秒钟的左右移动的位移动画（图4-29）；选择左上角的图片按钮，然后选择yinfu2时间轴，做一个5秒钟的上下移动的位移动画（图4-30）；选择右上角的图片按钮，然后选择yinfu3时间轴，也做一个5秒钟的上下移动的位移动画（图4-31）。

4.2.3　脚本交互设计与音乐制作

（1）创建绕物旋转相机　为了能够在视图中可以随时观察不同的视角，首先在相机菜单下利用绕物旋转相机在场景中创建一个相机（图4-32），然后在属性面板中，修改旋转中心参照物为Box001，即钢琴主体模型（图4-33），这样在该相机视角下旋转，相机就会以钢琴主体为中心进行旋转。

（2）钢琴键盘时间轴动画设计　交互设计的过程为点击虚拟键盘，钢琴按钮会在视图中按下，同时小球会随之向上移动，水果图片也会随之上下不停地摆动，同时按下键盘会弹奏出相应的音符音乐。按照上面的思路分析，可进行如下操作设置，选择图片按钮c，在控件属性的脚本中，在“鼠标点击”按钮后添加以下脚本，播放刚体動画：vrp_rigid01，2，1，2（图4-34），设置刚体动画播放区间：vrp_rigid01，<0>，<10>（图4-35），时间轴播放：c（图4-36），更改时间轴播放方式：c，2，1（图4-37），播放音乐：E:\第4章虚拟钢琴时间轴动画交互设计\源文件\1 do.mp3，0，1，1（图4-38）。同理，c、d、e、f、g、a、b按键的设置也根据上述的操作步骤即可实现（图4-39），按照类似的操作即可完成键盘按下的交互设计过程。

（3）音乐开关按钮动画设计　通过music on和music off按钮的脚本设置，可以实现音乐的开启和关闭，同时还可以控制相机视角的切换，其中music on控制开启音乐，同时可以切换到动画相机视角（图4-40）；music off控制关闭音乐，同时可以切换到绕物旋转相机视角（图4-41）。

（4）音符按钮的动画设计　打开脚本编辑器，在系统函数下新建一个窗口消息函数，创建一个初始化事件（图4-42），然后设置时间轴的播放方式和属性，完成三个时间轴系统运行就一直往复播放的动画效果。具体设置脚本如下（图4-43）：

时间轴播放，yinfu1

更改时间轴播放方式，yinfu1，2，0

时间轴播放，yinfu2

更改时间轴播放方式，yinfu2，2，0

时间轴播放，yinfu3

更改时间轴播放方式，yinfu3，2，0

（5）其他脚本交互设计　按下键盘上的F5进行预览，观察效果，发现按下键盘后水果音符一直在上下跳动，为了让其可以静止下来，可以利用左下角的音符进行控制，在鼠标点击按钮后添加时间轴暂停脚本和时间轴定位脚本（图4-44），即可实现通过按钮按下让水果音符停止运动并回到初始位置的状态，通过再次按键才可以激活其动画设置。为了方面音符按钮的操控，可以在鼠标移入事件中添加时间轴暂停脚本：时间轴暂停，yinfu1，在鼠标移出事件中添加时间轴播放脚本：时间轴播放，yinfu1。这样鼠标移入动画就会暂停，鼠标离开动画就会播放。yinfu2和yinfu3按照以上相同的操作方法，分别在鼠标移入和鼠标移出中添加相应的脚本，通过以上的设置，基本完成了脚本的交互设计。

4.2.4　编译与输出

按一下键盘上的F4打开项目设置对话框，在启动窗口中设置启动窗口的标题文字和介绍图片（图4-45）；在运行窗口设置标题文字，窗口大小改为全屏，初始相机为Camera01（图4-46）。在文件菜单中点击“编译独立执行Exe文件”命令，设置输出路径，点击编译按钮，弹出脚本资源收集对话框（图4-47），全部选择单击确定，等待一段时间程序编译完成后，单击“测试”按钮弹出运行界面（图4-48），点击“运行”就可以测试程序最终编译的效果。如果懂一些钢琴演奏的技巧，便可以参考曲谱弹奏一曲《海上钢琴师》进行赏析了。