移花接木(34)- 添加热点飞出效果

案例官方下载包路径

你电脑的路径\krpano-1.19-pr12\viewer\examples\flyout-hotspots\index.html (1.19 pr12)

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

热点飞出演示

 

效果简述

各个热点正常状态下都是变形热点,也就是distorted属性为true,当点击热点时,热点图片飞出,固定在画面中央,如同一个定位在中心的图层,当再次点击该热点时,热点飞回到原来的位置,或是点击其它在正常状态下的热点时,原来在飞出状态的热点会飞回原来的位置,新点击的热点则飞出到中央位置。

 

代码解释

首先热点必须是变形热点,这样的话每个热点应该具有同样的style,例如

这三个热点都有共同的style,也就是flyoutimage。如果你有其它style,例如还有一个xx1的style,那么你的热点代码应该这样写。

style属性里使用分隔号”|”来调用多个style。既然调用了flyoutimage,自然也得有对应的style元素。

flying属性是控制热点飞出行为的。0.0就是没有飞出的,1.0是完全飞出固定在画面中央了。

backup_state、backup_zorder、flying_state是自定义属性。

backup_state是在热点飞出时记录正常状态下的flying、rx、ry、rz与scale。以便飞回时使用tween变回对应的数值。

backup_zorder是在热点飞出时记录下正常状态下的zorder值,以便飞回时使用tween变回对应的的数值。

flying_state是记录当前热点的状态,包括了正常下、已经飞出到位、正飞出、正飞回四种状态。

另外我们把onclick对应的action也放在xml中。

 

简而言之,就是两个步骤

  1. 把flyout_hotspot的action代码和flyoutimage的style代码放到xml中。scene元素的外面。
  2. 在需要应用飞出效果的hotspot中,调用flyoutimage这个style。