Pano2VR进阶

按钮冲击波动画效果

知识点：

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

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

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

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

教学开始：

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

实现步骤：

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

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

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

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

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

4. 按钮冲击波动画效果：

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

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

3. 通过组件箱，向画布中添加锚点图标，添加两个矩形元素，矩形元素分别命名为 r1 和 r2 ，在树面板中，将锚点图标和矩形元素拖动到热点模板ht_04元素上，作为子物体，如下所示：

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

• 热点模板和图标的结构
  

4. 调整锚点图标元素的颜色、位置属性。

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

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

5. 调整 r1 的位置、外观、矩形等属性。

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

• 外观卷展栏：参数如下图所示：
  
  说明：
  初始缩放： X Y 都为100；
  缩放逻辑块：变量var_am为真时，X Y 设置为 300 ，并启用过渡，调整过渡的持续时间为 0.8 。如下图所示：
  
  初始可见： 不可见；
  可见逻辑块：变量var_am为真时，可见为 真。如下图所示：
  
  初始Alpha值： 1；
  Alpha值逻辑块：变量var_am为真时，Alpha值为 0 ，并启用过渡，调整过渡的持续时间为 0.6 ，延迟为 0.2 秒。如下图所示：
  

• 矩形卷展栏：参数如下图所示：
  
  说明：
  边框的色彩： 白色，透明通道为 200.如下图所示。
  

6. 调整 r2 的位置、外观、矩形等属性。

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

• 外观卷展栏：参数如下图所示：
  
  说明：
  初始缩放： X Y 都为100；
  缩放逻辑块：变量var_am为真时，X Y 设置为 300 ，并启用过渡，调整过渡的持续时间为 0.8 ，延迟为 0.2 秒。如下图所示：
  
  初始可见： 不可见；
  可见逻辑块：变量var_am为真时，可见为 真。如下图所示：
  
  初始Alpha值： 1；
  Alpha值逻辑块：变量var_am为真时，Alpha值为 0 ，并启用过渡，调整过渡的持续时间为 0.6 ，延迟为 0.4 秒。如下图所示：
  

• 矩形卷展栏：参数如下图所示：
  
  说明：
  边框的色彩： 白色，透明通道为 200.如下图所示。
  

7. 定时器重复运行，变量var_am重复切换为真和假，矩形元素的缩放，可见和Alpha值就会在设定的两个值间进行切换。实现动画效果。