[摘要]这是一个设置了3个热点平躺，点击逐张弹出的效果，点击其中一张，其他两张弹回，特别的是弹出后图片以layer形式状态显示，可以用于展示墙上贴图热点的弹出。
代码说明
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!-- 增加3个图片热点，调整大小及扭曲形状实现其视觉上平躺状态 --> <hotspot name="spot1" style="flyoutimage" url="image1.jpg" zorder="1" ath="45" atv="54" scale="0.5" rx="-22.5" ry="-26.25" rz="-50.1" /> <hotspot name="spot2" style="flyoutimage" url="image2.jpg" zorder="2" ath="60" atv="54" scale="0.5" rx="-22.5" ry="-26.25" rz="-50.1" /> <hotspot name="spot3" style="flyoutimage" url="image3.jpg" zorder="3" ath="75" atv="58" scale="0.5" rx="-22.5" ry="-26.25" rz="-50.1" /> <action name="flyout_by_name"> <!-- 归位全部热点 --> flyback_others(); <!-- 设置4种显示状态: 0 = 正常 1 = 正在飞出 2 = 已飞出 3 = 正在飞回 --> <!-- 通过临时属性，保存热点飞出前的变形、缩放、层级参数值 --> if(hotspot[%1].flystate == 0, copy(hotspot[%1].backup_rx, hotspot[%1].rx); copy(hotspot[%1].backup_ry, hotspot[%1].ry); copy(hotspot[%1].backup_rz, hotspot[%1].rz); copy(hotspot[%1].backup_scale, hotspot[%1].scale); copy(hotspot[%1].backup_zorder, hotspot[%1].zorder); ); <!-- 设置新的状态flystate的值 --> set(hotspot[%1].flystate,1); set(hotspot[%1].zorder,99); <!-- 热点完全弹出的动作，就是取消全部变形，位于屏幕中央 --> tween(hotspot[%1].rx, 0); tween(hotspot[%1].ry, 0); tween(hotspot[%1].rz, 0); tween(hotspot[%1].scale, 1.5); <!-- 补间 'flying' 到 1.0, 可以让弹出的热点图片独立与场景，不随场景缩放和旋转，就是变成layer状态显示 --> tween(hotspot[%1].flying, 1.0, 0.5, default, set(hotspot[%1].flystate,2); ); </action> <action name="flyback_by_name"> if(hotspot[%1].flystate != 3, set(hotspot[%1].flystate,3); <!-- 通过读取备份好的临时属性，弹回到原来平躺位置 --> tween(hotspot[%1].rx, get(hotspot[%1].backup_rx) ); tween(hotspot[%1].ry, get(hotspot[%1].backup_ry) ); tween(hotspot[%1].rz, get(hotspot[%1].backup_rz) ); tween(hotspot[%1].scale, get(hotspot[%1].backup_scale) ); copy(hotspot[%1].zorder, hotspot[%1].backup_zorder); <!-- 平躺后补间'flying'到0.0 --> tween(hotspot[%1].flying, 0.0, 0.5, default, set(hotspot[%1].flystate,0); ); ); </action> <!-- 归位全部热点动作 --> <action name="flyback_others"> for(set(i,0), i LT hotspot.count, inc(i), if(hotspot[%i].flystate GT 0, flyback_by_name(get(hotspot[get(i)].name)); ); ); </action> |
下载地址
领主tips--图片热点添加，可参阅：
![krpano1.2透明背景环物弹出效果案例[非会员文章]](https://victu360.com/wp-content/themes/vfilmtime/timthumb.php?src=https://victu360.com/wp-content/uploads/2020/02/t360.jpg&h=280&w=506&zc=1)
