Pano2VR进阶

圆形图标颜色切换动画效果

知识点：

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

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

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

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

教学开始：

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

实现步骤：

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

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

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

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

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

4. 圆形图标颜色切换动画效果：

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

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

3. 在画布中，绘制矩形元素，在树面板中，将矩形元素拖动到热点模板ht_01元素上，作为子物体，结构如下图所示：
   

4. 调整矩形元素的位置和矩形属性。

• 位置卷展栏：相关参数如下图所示：
  

• 矩形卷展栏：相关参数如下图所示：
  
  说明：
  背景色彩： 红色，可自行选择其他颜色；
  背景色彩逻辑块：变量var_am为真时，背景为黄色，并启用过渡。如下图所示：
  
  边框半径： 设为99，大于矩形宽和高，矩形显示形状为圆形；

5. 定时器重复运行，变量var_am重复切换为真和假，矩形的颜色就会在两种颜色之间切换。实现动画效果。