Pano2VR进阶

直行箭头按钮动画

知识点：

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

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

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

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

教学开始：

效果说明：案例全景展示了一个动态的直行箭头，是由定时器按一定时间间隔显示序列图的不同的位置，从而实现连续的动画效果，此效果常用于全景项目的场景（节点）切换漫游。效果如下：

实现步骤：

1. 准备一张箭头的序列大图，宽 50 高 1250 像素，每一个序列帧宽、高为 50，这张序列大图就有25个序列帧。在皮肤中用计时器控制变量的累加，用变量值来控制显示序列图的位置。

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

3. 打开皮肤编辑器，在变量卷展栏中，新建一个变量，名称为var_am，类型为数字，初始值为0。如下图所示：
   

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

• 计时器卷展栏：参数如下图所示，每运行0.04秒就切换显示序列图的一个位置，25个序列帧全部显示完成，正好是一秒。
  

• 动作卷展栏：添加了两个动作，激活时，设定变量var_am加 1，停用时，设定变量var_am为按25求余。求余的目的是让变量的值累加到25的时候，从 0 再次开始，保证箭头动画循环。如下图所示：
  

5. 在Pano2VR主界面的查看器中，创建一个点热点，热点默认的皮肤ID为ht_url，如下图所示：
   

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

7. 在画布中绘制一个容器，在树面板中，将容器元素拖动到热点模板ht_url元素上，作为子物体，如下所示：

• 添加容器元素：单击绘制容器元素，在画布中拖动鼠标，即可绘制容器。
  

• 热点模板和容器的结构
  

• 调整容器元素的位置、外观属性。
  位置卷展栏：如下图所示：
  
  外观卷展栏：特别强调，要开启容器的蒙版，可使容器的子物体只在容器设定的尺寸内显示。参数如下图所示：
  

8. 将箭头序列大图，拖动到皮肤编辑器的画布中，在树面板中，将图像元素拖动到容器元素上，作为子物体，如下所示：

• 序列图的结构
  

• 位置卷展栏：参数如下图所示：
  
  说明：
  初始位置： X Y 都为0 ；
  位置逻辑块：点击添加表达式按钮，共添加 25 条表达式。在每个表达式中，添加触发条件为变量var_am。如下图所示：
  
  在每一个表达式中，设定变量值等于从 0 到 24 的数字，并分别对应y轴的不同的值， y 轴的值代表序列图垂直方向的显示位置，0的时候显示第一帧，-50的时候，序列大图会上移50个像素，从而可以显示第二帧，以此类推。参考上图。

9. 通过定时器，控制变量累加，变量不同的值控制显示序列大图不同的位置。实现动画效果。