移花接木(1)- 添加动态热点或动态图层

更新于 2016.10.19

 

官方下载包路径

你电脑的路径\krpano-1.19-pr8\viewer\examples\animated-hotspots

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

1.19 pr8动态热点在线演示

 

VIP会员代码运行器

动态热点原理

让krpano全景里的热点(hotspot)或layer产生动态效果,例如不断变化的箭头大小或一直变幻颜色的图片,这样更容易引起浏览者的注意,效果也比较酷炫。当提到动态时,有人会想到flash文件或是gif图片,但在这里不推荐使用。因为只有Flash viewer才支持swf文件。虽然HTML5 viewer下支持gif动画,但在很多浏览器下表现不如png图片序列。我们需要使用png图片序列,并且运用简单的动态代码,让这些图片动起来。
我们把图片序列做在一张图上。例如下图,我们实际上只是在切换这张图的不同区域从而产生动态效果:

QQ图片20150527092948

 

这里提供快速将多张png图片合并成一个png序列图的小工具PngMergeHelper

下载地址:http://pan.baidu.com/s/1c0hcy

同时提供将多个jpg图片合并在一个jpg的小工具JPGCombine

下载地址:http://pan.baidu.com/s/1pKxgFpx 密码:36qr

提供一个将gif分离成多个png的小工具GIF分离器

下载地址:http://pan.baidu.com/s/1minnTtm 密码:m3js

 

也就是说要做动态热点或动态图的话,必须有类似上面的一张序列图,如果你只使用一个箭头的单帧图片,然后在hotspot代码或layer代码的url属性写这个箭头的路径,是不会有任何的动态效果的。实际上用这个小工具还可以创造环物的照片序列png。为什么要把多个图片做成png序列。好处就是切换不同图片时不用重新加载,如果重新加载新图时,也就是更改url属性,速度再快,都会有一个明显的卡顿以至于有个黑场的闪烁,使用png序列的话,我们只是在一开始载入了一张图片,只是通过切换图片的不同区域来制造动画效果的话,这样就避免了在动态热点演示过程中出现卡顿的情况,这同样是环物制作中需要用到png图片序列的原因。而且使用一个png图片也相对比多个png图片减少了文件的总体积。

 

更多不同样式的热点序列图:链接:http://pan.baidu.com/s/1i396ukH 密码:xwaa  720云原创 

QQ图片20160604075031

海量动态图素材:

链接:http://pan.baidu.com/s/1hs2lP5M 密码:lezl

 

1.19 pr8方法说明

1.19 pr4及之后版本优化了对png序列图的处理,你可以使用多横多纵的序列图。如下图是7横x7列的序列图(分辨率为700*700.每一帧为100*100)

explosion

或者是下面的单排序列图(可以是横排或者纵排)。

arrow

krpano 1.19 pr4之后案例的png序列图如果是多横多纵的话,其动画顺序是从左至右,从上至下

 

当要使用动态热点或动态layer时,务必要在主xml(tour.xml)空白处的scene标签的外面,放入以下动作代码do_crop_animation

点击代码窗口最右侧按钮,在新窗口打开后复制代码

正常情况下,这个action是不用特意修改的。它还内置了onlastframe,在调用的hotspot或layer中可以加入onlastframe属性,写上每次到最后一帧时要执行的动作。

如果你正确地调用了png序列图,那么你需要知道的就是该序列图上每一帧的宽度和高度,例如第一张爆炸动态图explosion.png,我们知道它是一张700×700的序列图,每一排每一列都是7个小图,可以计算得出每一个小图也就是每一帧是100×100像素。同时我们确定其帧速率为60fps。因为只需要在该动态的热点箭头hotspot的静态代码或layer中使用url和onloaded就可以了。也就是

点击代码窗口最右侧按钮,在新窗口打开后复制代码

url是我们的序列图的路径,然后只要在这个hotspot的代码的onloaded加上do_crop_animation

 

do_crop_animation()是在png图加载完开始执行,不然的话就会闪烁。第一个参数代表的是序列图每一个小图的宽度,第二个参数是小图的高度,第三个参数是动画的帧速率,数值越大,动态越明显。在这里分别是100、100和60。

 

这种用法对于layer也是适用的。url是我们的序列图的路径,然后只要在layer代码的onloaded事件加上do_crop_animation

 

案例中其它热点的代码也是类似的。这里有个好玩的地方,是爆炸这个动态图用了随机坐标。也就是有个onlastframe的自定义属性。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

注意spot3这个热点的ath和atv两个球面坐标是随机的,random会随机产生一个0到1之间的数。然后由calc后面的算式来计算出第一次的坐标所在。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

什么时候会执行onlastframe呢?这在do_crop_animation已经定义了。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

当frame大于或者等于frames时,也就是执行到最后一帧时,检查是否有onlastframe,这里是有的,然后就执行onlastframe。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

也是一个随机计算坐标的action。

 

动态热点上添加始终显示的文字

第一步 显示所链接场景scene的title

如果是链接到场景的title,在该hotpsot的静态属性中添加自定义属性linkedscene,写对应链接的scene的name。如:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

显示自定义文字

如果是自定义文字,在该hotpsot的静态属性中添加text,写对应文字。如:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

无论是linkedscene还是text都是自定义属性,非krpano自有属性。它仅仅是记录了某个字符串或数值。

第二步 在热点的onloaded事件中加上add_all_the_time_tooltip()

点击代码窗口最右侧按钮,在新窗口打开后复制代码

第三步 空白处加上action

在scene标签外添加

点击代码窗口最右侧按钮,在新窗口打开后复制代码

如果有text自定义文字,则选择自定义文字作为显示内容,没有text,则获取linkedscene所链接场景的title作为显示内容。

 

热点或图层在鼠标点击或鼠标悬停时进入动态模式

还有一种变化即该热点或图层不是一开始就是动态中,而是需要鼠标点击或者悬停时才进入到动态模式中,而在鼠标再次点击或移出时,热点或图层则恢复到静止状态。这样的话,我们需要有两个action,如下一个是do_crop_animation_onclick,一个是do_crop_animation_register。

在热点的onloaded事件中写do_crop_animation_register,在onclick或onover和onout中写do_crop_animation_onclick。注意不能同时用onclick或者onover。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

点击下页继续查看1.18教程

在 “移花接木(1)- 添加动态热点或动态图层” 上有 2 条评论

发表评论