Pano2VR进阶

放大镜图标位移动画效果

知识点：

• 定时器（计时器）：可用于皮肤中计时，在一定时间后，可以触发某个动作。

• 点热点：点热点是项目内的交互点。

• 热点模板：热点模板可以将自定义图像添加到点热点。

• 变量: 在皮肤编辑器中，可以使用动作和触发器来更改存储在变量中的值。

教学开始：

效果说明：案例全景展示了四个动画图标，一个是通过控制图标角度产生的动画效果，一个是通过控制图标的位置产生的动画效果，一个是通过控制矩形的颜色产生的动画效果，一个是通过控制矩形的缩放，Alpha值和可见度实现的一个综合动画效果。效果如下：
按钮动画效果

实现步骤：

1. 打开pano2VR软件，创建一个全景项目，并创建一个web输出，为项目新建一个皮肤并保存到和项目工程一个目录里，命名为 skin.ggsk。

2. 打开皮肤编辑器，在变量卷展栏中，新建一个变量，名称为var_am，类型为条件判断，初始值为假。如下图所示：
   

3. 在皮肤编辑器的画布中，绘制定时器元素，并调整相关属性参数如下：

• 计时器卷展栏：参数如下图所示。
  

• 动作卷展栏：添加了两个动作，激活时，设定变量var_am为真，停用时，设定变量var_am为假。如下图所示：
  

4. 放大镜图标位移动画效果：

1. 在Pano2VR主界面的查看器中，创建一个点热点，并在热点属性面板的皮肤ID中输入ht_03，如下图所示：
   

2. 进入皮肤编辑器，在画布中，新建交互热点模板元素，名称（ID）为ht_03。

3. 通过组件箱，向画布中添加放大镜图标，在树面板中，将放大镜图标拖动到热点模板ht_03元素上，作为子物体，如下所示：

• 添加放大镜图标：单击组件箱，按图示找到图标，双击添加到画布中。
  

• 热点模板和图标的结构
  

4. 调整放大镜图标元素的颜色、位置属性。

5. 定时器重复运行，变量var_am重复切换为真和假，放大镜图标位置就会在 0 和 15 之间来回移动。实现动画效果。

• 设置放大镜图标颜色：选中图标后，点击皮肤编辑器右上角的颜色工具，设置为白色如下图所示：
  

• 位置卷展栏：参数如下图所示：
  
  说明：
  初始位置： X Y 都为0；
  位置逻辑块：变量var_am为真时，X Y 设置为 15 ，并启用过渡。如下图所示：